feat(发货单): 新增发货单打印功能及明细管理
refactor(组件): 重构发货单明细表格为独立组件 feat(组件): 添加发货单打印预览组件 fix(登录页): 移除默认用户名和密码 style(钢卷面板): 添加显示控制属性并优化布局 chore: 添加vitest测试配置和依赖
This commit is contained in:
砂糖
312
klp-ui/src/views/wms/delivery/components/detailTable.vue
Normal file
312
klp-ui/src/views/wms/delivery/components/detailTable.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-if="waybillId">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="2" style="font-weight: 900;">发货单明细</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="deliveryWaybillDetailList">
|
||||
<!-- <el-table-column label="关联钢卷表ID" align="center" prop="coilId" /> -->
|
||||
<el-table-column label="品名" align="center" prop="productName" />
|
||||
<el-table-column label="切边" align="center" prop="edgeType" />
|
||||
<el-table-column label="包装" align="center" prop="packaging" />
|
||||
<el-table-column label="结算方式" align="center" prop="settlementType" />
|
||||
<el-table-column label="原料厂家" align="center" prop="rawMaterialFactory" />
|
||||
<el-table-column label="卷号" align="center" prop="coilNo" />
|
||||
<el-table-column label="规格" align="center" prop="specification" />
|
||||
<el-table-column label="材质" align="center" prop="material" />
|
||||
<el-table-column label="数量" align="center" prop="quantity" />
|
||||
<el-table-column label="重量" align="center" prop="weight" />
|
||||
<el-table-column label="单价" align="center" prop="unitPrice" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-empty description="请选择发货单查看明细" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加或修改发货单明细对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="发货钢卷" prop="coilId">
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<coil-selector v-model="form.coilId" :use-trigger="true" @select="handleSelect" />
|
||||
<el-checkbox v-model="autoFillForm" label="自动填写表单信息" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="品名" prop="productName">
|
||||
<el-input v-model="form.productName" placeholder="请输入品名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="切边" prop="edgeType">
|
||||
<el-input v-model="form.edgeType" placeholder="请输入切边" />
|
||||
</el-form-item>
|
||||
<el-form-item label="包装" prop="packaging">
|
||||
<el-input v-model="form.packaging" placeholder="请输入包装" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结算方式" prop="settlementType">
|
||||
<el-input v-model="form.settlementType" placeholder="请输入结算方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="原料厂家" prop="rawMaterialFactory">
|
||||
<el-input v-model="form.rawMaterialFactory" placeholder="请输入原料厂家" />
|
||||
</el-form-item>
|
||||
<el-form-item label="卷号" prop="coilNo">
|
||||
<el-input v-model="form.coilNo" placeholder="请输入卷号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="specification">
|
||||
<el-input v-model="form.specification" placeholder="请输入规格" />
|
||||
</el-form-item>
|
||||
<el-form-item label="材质" prop="material">
|
||||
<el-input v-model="form.material" placeholder="请输入材质" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="重量" prop="weight">
|
||||
<el-input v-model="form.weight" placeholder="请输入重量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="unitPrice">
|
||||
<el-input v-model="form.unitPrice" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDeliveryWaybillDetail, getDeliveryWaybillDetail, delDeliveryWaybillDetail, addDeliveryWaybillDetail, updateDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
|
||||
import CoilSelector from "@/components/CoilSelector";
|
||||
|
||||
export default {
|
||||
name: "DeliveryWaybillDetail",
|
||||
props: {
|
||||
waybillId: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CoilSelector
|
||||
},
|
||||
watch: {
|
||||
waybillId: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 发货单明细表格数据
|
||||
deliveryWaybillDetailList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
waybillId: this.waybillId,
|
||||
coilId: undefined,
|
||||
productName: undefined,
|
||||
edgeType: undefined,
|
||||
packaging: undefined,
|
||||
settlementType: undefined,
|
||||
rawMaterialFactory: undefined,
|
||||
coilNo: undefined,
|
||||
specification: undefined,
|
||||
material: undefined,
|
||||
quantity: undefined,
|
||||
weight: undefined,
|
||||
unitPrice: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 自动填写表单信息
|
||||
autoFillForm: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询发货单明细列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listDeliveryWaybillDetail(this.queryParams).then(response => {
|
||||
this.deliveryWaybillDetailList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
handleSelect(coil) {
|
||||
// 填充钢卷信息到表单中，
|
||||
console.log(coil);
|
||||
if (!this.autoFillForm) {
|
||||
return;
|
||||
}
|
||||
this.form = {
|
||||
...this.form,
|
||||
productName: coil.itemName,
|
||||
edgeType: coil.surfaceTreatmentDesc,
|
||||
packaging: coil.packagingId,
|
||||
rawMaterialFactory: coil.manufacturer,
|
||||
coilNo: coil.currentCoilNo,
|
||||
specification: coil.specification,
|
||||
material: coil.material,
|
||||
quantity: 1,
|
||||
weight: coil.netWeight,
|
||||
}
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
detailId: undefined,
|
||||
waybillId: this.waybillId,
|
||||
coilId: undefined,
|
||||
productName: undefined,
|
||||
edgeType: undefined,
|
||||
packaging: undefined,
|
||||
settlementType: undefined,
|
||||
rawMaterialFactory: undefined,
|
||||
coilNo: undefined,
|
||||
specification: undefined,
|
||||
material: undefined,
|
||||
quantity: undefined,
|
||||
weight: undefined,
|
||||
unitPrice: undefined,
|
||||
remark: undefined,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.detailId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加发货单明细";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const detailId = row.detailId || this.ids
|
||||
getDeliveryWaybillDetail(detailId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改发货单明细";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.detailId != null) {
|
||||
updateDeliveryWaybillDetail(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addDeliveryWaybillDetail(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const detailIds = row.detailId || this.ids;
|
||||
this.$modal.confirm('是否确认删除发货单明细编号为"' + detailIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delDeliveryWaybillDetail(detailIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/deliveryWaybillDetail/export', {
|
||||
...this.queryParams
|
||||
}, `deliveryWaybillDetail_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
579
klp-ui/src/views/wms/delivery/components/wayBill.vue
Normal file
579
klp-ui/src/views/wms/delivery/components/wayBill.vue
Normal file
@@ -0,0 +1,579 @@
|
||||
<!-- 发货单组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="waybill-container" ref="waybillRef">
|
||||
<!-- 头部信息 -->
|
||||
<div class="waybill-header">
|
||||
<div class="header-left">
|
||||
<span class="label">收货单位：</span>
|
||||
<input type="text" class="editable-input transparent-input" v-model="localWaybill.consigneeUnit" />
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<input type="text" class="editable-input date-input transparent-input" v-model="localWaybill.deliveryYear" />
|
||||
<span class="label date-label">年</span>
|
||||
<input type="text" class="editable-input date-input transparent-input" v-model="localWaybill.deliveryMonth" />
|
||||
<span class="label date-label">月</span>
|
||||
<input type="text" class="editable-input date-input transparent-input" v-model="localWaybill.deliveryDay" />
|
||||
<span class="label date-label">日</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="label">发货单位：</span>
|
||||
<input type="text" class="editable-input transparent-input" v-model="localWaybill.senderUnit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<table class="waybill-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>品名</th>
|
||||
<th>切边</th>
|
||||
<th>包装</th>
|
||||
<th>结算</th>
|
||||
<th>原料厂家</th>
|
||||
<th>卷号</th>
|
||||
<th>规格</th>
|
||||
<th>材质</th>
|
||||
<th>数量（件）</th>
|
||||
<th>重量（kg）</th>
|
||||
<th>单价</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 无明细提示 -->
|
||||
<tr v-if="localWaybillDetails.length === 0">
|
||||
<td colspan="12" class="no-data">
|
||||
<div class="no-data-content">
|
||||
<el-empty description="暂无发货单明细" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 明细数据 -->
|
||||
<tr v-for="(item, index) in localWaybillDetails" :key="index">
|
||||
<td><input type="text" class="transparent-input" v-model="item.productName" /></td>
|
||||
<td><input type="text" class="table-input transparent-input" v-model="item.edgeType" />
|
||||
</td>
|
||||
<td><input type="text" class="table-input transparent-input" v-model="item.packageType" />
|
||||
</td>
|
||||
<td><input type="text" class="table-input transparent-input" v-model="item.settlementType" />
|
||||
</td>
|
||||
<td><input type="text" class="table-input transparent-input" v-model="item.rawMaterialFactory" />
|
||||
</td>
|
||||
<td><input type="text" class="table-input transparent-input" v-model="item.coilNumber" /></td>
|
||||
<td><input type="text" class="table-input transparent-input" v-model="item.specification" /></td>
|
||||
<td><input type="text" class="table-input transparent-input" v-model="item.material" />
|
||||
</td>
|
||||
<td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
|
||||
placeholder="0" /></td>
|
||||
<td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
|
||||
placeholder="0.00" /></td>
|
||||
<td><input type="number" class="table-input transparent-input" v-model.number="item.unitPrice"
|
||||
placeholder="0.00" /></td>
|
||||
<td>
|
||||
<div class="table-cell-with-action">
|
||||
<input type="text" class="table-input transparent-input" v-model="item.remark" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<!-- 备注说明 -->
|
||||
<div class="waybill-remarks">
|
||||
<p>1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：</p>
|
||||
<p>
|
||||
裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 签名栏 -->
|
||||
<div class="waybill-footer">
|
||||
<div class="footer-item inline">
|
||||
<span class="label">销售：</span>
|
||||
<input type="text" class="editable-input signature-input transparent-input" />
|
||||
</div>
|
||||
<div class="footer-item inline">
|
||||
<span class="label">发货：</span>
|
||||
<input type="text" class="editable-input signature-input transparent-input" />
|
||||
</div>
|
||||
<div class="footer-item inline">
|
||||
<span class="label">磅房：</span>
|
||||
<input type="text" class="editable-input signature-input transparent-input" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="waybill-actions">
|
||||
<el-button type="primary" @click="saveAsImage">保存为图片</el-button>
|
||||
<el-button type="success" @click="printWaybill">打印</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import domtoimage from 'dom-to-image';
|
||||
import printJS from 'print-js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 组件接收完整的发货单内容, 渲染发货单,这个面板内包括一个保存为图片(已经安装了dom-to-image)和一个打印按钮(已经安装了print-js)
|
||||
waybill: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
waybillDetails: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 本地可编辑的发货单数据
|
||||
localWaybill: {
|
||||
consigneeUnit: '',
|
||||
senderUnit: '',
|
||||
deliveryYear: '',
|
||||
deliveryMonth: '',
|
||||
deliveryDay: ''
|
||||
},
|
||||
// 本地可编辑的发货单明细
|
||||
localWaybillDetails: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听props变化，更新本地数据
|
||||
waybill: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.localWaybill = {
|
||||
consigneeUnit: newVal.consigneeUnit || '',
|
||||
senderUnit: newVal.senderUnit || '',
|
||||
deliveryYear: this.getYearFromDate(newVal.deliveryTime) || '',
|
||||
deliveryMonth: this.getMonthFromDate(newVal.deliveryTime) || '',
|
||||
deliveryDay: this.getDayFromDate(newVal.deliveryTime) || ''
|
||||
};
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
waybillDetails: {
|
||||
handler(newVal) {
|
||||
if (newVal && Array.isArray(newVal)) {
|
||||
this.localWaybillDetails = [...newVal];
|
||||
} else {
|
||||
this.localWaybillDetails = [];
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 从日期字符串中提取年份
|
||||
getYearFromDate(dateStr) {
|
||||
if (dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
return date.getFullYear().toString();
|
||||
}
|
||||
return '';
|
||||
},
|
||||
// 从日期字符串中提取月份
|
||||
getMonthFromDate(dateStr) {
|
||||
if (dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
return (date.getMonth() + 1).toString();
|
||||
}
|
||||
return '';
|
||||
},
|
||||
// 从日期字符串中提取日
|
||||
getDayFromDate(dateStr) {
|
||||
if (dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
return date.getDate().toString();
|
||||
}
|
||||
return '';
|
||||
},
|
||||
// 添加明细
|
||||
addDetail() {
|
||||
this.localWaybillDetails.push({
|
||||
productName: '',
|
||||
edgeType: '',
|
||||
packageType: '',
|
||||
settlementType: '',
|
||||
rawMaterialFactory: '',
|
||||
coilNumber: '',
|
||||
specification: '',
|
||||
material: '',
|
||||
quantity: 0,
|
||||
weight: 0,
|
||||
unitPrice: 0,
|
||||
remark: ''
|
||||
});
|
||||
},
|
||||
// 删除明细
|
||||
deleteDetail(index) {
|
||||
this.localWaybillDetails.splice(index, 1);
|
||||
},
|
||||
// 保存为图片
|
||||
saveAsImage() {
|
||||
const node = this.$refs.waybillRef;
|
||||
domtoimage.toPng(node)
|
||||
.then(dataUrl => {
|
||||
const link = document.createElement('a');
|
||||
link.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || Date.now()}.png`;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('保存图片失败:', error);
|
||||
this.$message.error('保存图片失败');
|
||||
});
|
||||
},
|
||||
// 打印发货单
|
||||
printWaybill() {
|
||||
const node = this.$refs.waybillRef;
|
||||
printJS({
|
||||
printable: node,
|
||||
maxWidth: 1200,
|
||||
type: 'html',
|
||||
scanStyles: true,
|
||||
targetStyles: ['*']
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.waybill-container {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
min-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
font-family: SimSun, serif;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.waybill-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header-left,
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* 可编辑输入框样式 */
|
||||
.editable-input {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: SimSun, serif;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px dashed #dcdfe6;
|
||||
}
|
||||
|
||||
.editable-input:focus {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* 透明输入框样式 */
|
||||
.transparent-input {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.transparent-input:focus {
|
||||
border-bottom-color: #409eff;
|
||||
background-color: rgba(64, 158, 255, 0.05);
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.waybill-table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
font-size: 12px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.waybill-table th,
|
||||
.waybill-table td {
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 表格列宽设置 */
|
||||
.waybill-table th:nth-child(1),
|
||||
.waybill-table td:nth-child(1) {
|
||||
width: 80px; /* 品名 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(2),
|
||||
.waybill-table td:nth-child(2) {
|
||||
width: 40px; /* 切边 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(3),
|
||||
.waybill-table td:nth-child(3) {
|
||||
width: 40px; /* 包装 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(4),
|
||||
.waybill-table td:nth-child(4) {
|
||||
width: 40px; /* 结算 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(5),
|
||||
.waybill-table td:nth-child(5) {
|
||||
width: 80px; /* 原料厂家 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(6),
|
||||
.waybill-table td:nth-child(6) {
|
||||
width: 80px; /* 卷号 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(7),
|
||||
.waybill-table td:nth-child(7) {
|
||||
width: 60px; /* 规格 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(8),
|
||||
.waybill-table td:nth-child(8) {
|
||||
width: 40px; /* 材质 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(9),
|
||||
.waybill-table td:nth-child(9) {
|
||||
width: 60px; /* 数量（件） */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(10),
|
||||
.waybill-table td:nth-child(10) {
|
||||
width: 60px; /* 重量（kg） */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(11),
|
||||
.waybill-table td:nth-child(11) {
|
||||
width: 40px; /* 单价 */
|
||||
}
|
||||
|
||||
.waybill-table th:nth-child(12),
|
||||
.waybill-table td:nth-child(12) {
|
||||
width: 100px; /* 备注 */
|
||||
}
|
||||
|
||||
.waybill-table th {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.waybill-table tr:nth-child(even) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/* 表格输入框样式 */
|
||||
.table-input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.table-input:focus {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
/* 无数据样式 */
|
||||
.no-data {
|
||||
height: 200px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.no-data-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 表格单元格操作区 */
|
||||
.table-cell-with-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* 备注样式 */
|
||||
.waybill-remarks {
|
||||
margin-bottom: 30px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.waybill-remarks p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
/* 底部签名样式 */
|
||||
.waybill-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.footer-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.footer-item.inline {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-item .label {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.signature-input {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
.waybill-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* 添加明细按钮 */
|
||||
.add-detail-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.waybill-container {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.waybill-header {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.waybill-footer {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.waybill-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.waybill-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.waybill-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.waybill-table th,
|
||||
.waybill-table td {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.waybill-footer {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.footer-item.inline {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user