DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(发货单): 新增发货单管理页面和MemoInput组件

Browse Source 
添加发货单管理页面，包含查询、新增、修改、删除等功能
引入MemoInput组件实现车牌号输入的历史记录和自动补全功能
This commit is contained in:
砂糖
2025-11-25 17:57:01 +08:00
parent 5d8ff6e332
commit be48594b62
2 changed files with 520 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
klp-ui/src/components/MemoInput/index.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch" placeholder="请输入内容"
:trigger-on-focus="triggerMode === 'focus'" @select="handleSelect" @change="handleInputChange"
clearable></el-autocomplete>
</template>
<script>
export default {
name: 'LocalStorageAutocomplete',
props: {
// localStorage 存储键名，必填
value: {
type: String,
default: ''
},
storageKey: {
type: String,
required: true,
validator: (value) => value.trim() !== '' // 校验非空
},
// 最大缓存数量，默认100条
maxCacheCount: {
type: Number,
default: 100,
validator: (value) => value > 0 // 校验正整数
},
// 匹配规则：start-前缀匹配，contain-包含匹配，默认前缀匹配
matchRule: {
type: String,
default: 'start',
validator: (value) => ['start', 'contain'].includes(value)
},
// 触发模式：focus-激活即列出，input-输入后匹配，默认focus
triggerMode: {
type: String,
default: 'focus',
validator: (value) => ['focus', 'input'].includes(value)
}
},
data() {
return {
inputValue: '',
// 缓存历史列表（格式：[{value: 'xxx'}, ...]）
historyList: []
};
},
computed: {
innerKey() {
if (!this.storageKey) {
throw new Error('storageKey is required');
}
return 'mono-' + this.storageKey;
}
},
watch: {
value: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.inputValue = newVal;
}
},
immediate: true
}
},
mounted() {
// 初始化时从localStorage读取历史记录
this.initHistoryList();
},
methods: {
/**
* 从localStorage初始化历史列表
*/
initHistoryList() {
const storedData = localStorage.getItem(this.innerKey);
this.historyList = storedData ? JSON.parse(storedData) : [];
},
/**
* 搜索查询方法（Element UI autocomplete 要求的格式）
* @param {string} queryString - 输入的查询字符串
* @param {function} cb - 回调函数，返回匹配结果
*/
querySearch(queryString, cb) {
let results = [...this.historyList]; // 深拷贝避免修改原数组
// 根据查询字符串过滤结果
if (queryString) {
const lowerQuery = queryString.toLowerCase();
results = results.filter(item => {
const lowerValue = item.value.toLowerCase();
// 前缀匹配或包含匹配
return this.matchRule === 'start'
? lowerValue.indexOf(lowerQuery) === 0
: lowerValue.includes(lowerQuery);
});
}
cb(results); // 回调返回匹配结果
},
/**
* 选中建议项时的处理
* @param {object} item - 选中的项 {value: 'xxx'}
*/
handleSelect(item) {
this.cacheInputValue(item.value);
this.inputValue = item.value;
// 触发自定义事件，通知父组件选中结果
this.$emit('select', item.value);
},
/**
* 输入框内容变化时的处理（比如手动输入后回车/失焦）
* @param {string} value - 输入框的值
*/
handleInputChange(value) {
if (value && value.trim() !== '') {
this.cacheInputValue(value.trim());
// 触发自定义事件，通知父组件输入结果
this.$emit('input', value.trim());
}
},
/**
* 缓存输入值到localStorage
* @param {string} value - 要缓存的值
*/
cacheInputValue(value) {
// 去重：如果已存在则移除原记录（保证最新输入在最前面）
this.historyList = this.historyList.filter(item => item.value !== value);
// 添加新记录到头部
this.historyList.unshift({ value });
// 限制最大缓存数量
if (this.historyList.length > this.maxCacheCount) {
this.historyList = this.historyList.slice(0, this.maxCacheCount);
}
// 保存到localStorage
localStorage.setItem(this.innerKey, JSON.stringify(this.historyList));
},
/**
* 清空历史记录（提供给父组件调用的方法）
*/
clearHistory() {
this.historyList = [];
localStorage.removeItem(this.innerKey);
this.inputValue = '';
this.$emit('clear');
}
}
};
</script>
<style scoped>
.demo-autocomplete {
margin-bottom: 20px;
}
.sub-title {
margin-bottom: 10px;
color: #666;
font-size: 14px;
}
.inline-input {
width: 100%;
}
</style>

352
klp-ui/src/views/wms/delivery/waybill/index.vue
View File

@@ -0,0 +1,352 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="发货单编号" prop="waybillNo">
<el-input
v-model="queryParams.waybillNo"
placeholder="请输入发货单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="发货单名称" prop="waybillName">
<el-input
v-model="queryParams.waybillName"
placeholder="请输入发货单名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="收货单位" prop="consigneeUnit">
<el-input
v-model="queryParams.consigneeUnit"
placeholder="请输入收货单位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="deliveryWaybillList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false"/>
<el-table-column label="发货单编号" align="center" prop="waybillNo" />
<el-table-column label="发货单名称" align="center" prop="waybillName" />
<el-table-column label="车牌" align="center" prop="licensePlate" />
<el-table-column label="发货单位" align="center" prop="senderUnit" />
<el-table-column label="发货时间" align="center" prop="deliveryTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="负责人" align="center" prop="principal" />
<el-table-column label="负责人电话" align="center" prop="principalPhone" />
<el-table-column label="完成状态" align="center" prop="status" />
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新人" align="center" prop="updateBy" />
<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"
/>
<!-- 添加或修改发货单主对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="发货单编号" prop="waybillNo">
<el-input v-model="form.waybillNo" placeholder="请输入发货单编号" />
</el-form-item>
<el-form-item label="发货单名称" prop="waybillName">
<el-input v-model="form.waybillName" placeholder="请输入发货单名称" />
</el-form-item>
<el-form-item label="车牌" prop="licensePlate">
<MemoInput v-model="form.licensePlate" storageKey="licensePlate" placeholder="请输入车牌" />
</el-form-item>
<el-form-item label="收货单位" prop="consigneeUnit">
<el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
</el-form-item>
<el-form-item label="发货单位" prop="senderUnit">
<el-input v-model="form.senderUnit" placeholder="请输入发货单位" />
</el-form-item>
<el-form-item label="发货时间" prop="deliveryTime">
<el-date-picker clearable
v-model="form.deliveryTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择发货时间">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="磅房" prop="weighbridge">
<el-input v-model="form.weighbridge" placeholder="请输入磅房" />
</el-form-item>
<el-form-item label="销售" prop="salesPerson">
<el-input v-model="form.salesPerson" placeholder="请输入销售" />
</el-form-item> -->
<el-form-item label="负责人" prop="principal">
<el-input v-model="form.principal" placeholder="请输入负责人" />
</el-form-item>
<el-form-item label="负责人电话" prop="principalPhone">
<el-input v-model="form.principalPhone" 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 { listDeliveryWaybill, getDeliveryWaybill, delDeliveryWaybill, addDeliveryWaybill, updateDeliveryWaybill } from "@/api/wms/deliveryWaybill";
import MemoInput from "@/components/MemoInput";
export default {
name: "DeliveryWaybill",
components: {
MemoInput
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 发货单主表格数据
deliveryWaybillList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
waybillNo: undefined,
waybillName: undefined,
licensePlate: undefined,
consigneeUnit: undefined,
senderUnit: undefined,
deliveryTime: undefined,
weighbridge: undefined,
salesPerson: undefined,
principal: undefined,
principalPhone: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询发货单主列表 */
getList() {
this.loading = true;
listDeliveryWaybill(this.queryParams).then(response => {
this.deliveryWaybillList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
waybillId: undefined,
waybillNo: undefined,
waybillName: undefined,
planId: undefined,
licensePlate: undefined,
consigneeUnit: undefined,
senderUnit: undefined,
deliveryTime: undefined,
weighbridge: undefined,
salesPerson: undefined,
principal: undefined,
principalPhone: undefined,
status: undefined,
remark: undefined,
delFlag: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: 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.waybillId)
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 waybillId = row.waybillId || this.ids
getDeliveryWaybill(waybillId).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.waybillId != null) {
updateDeliveryWaybill(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addDeliveryWaybill(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const waybillIds = row.waybillId || this.ids;
this.$modal.confirm('是否确认删除发货单主编号为"' + waybillIds + '"的数据项？').then(() => {
this.loading = true;
return delDeliveryWaybill(waybillIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('wms/deliveryWaybill/export', {
...this.queryParams
}, `deliveryWaybill_${new Date().getTime()}.xlsx`)
}
}
};
</script>