feat(发货单): 新增发货单管理页面和MemoInput组件
添加发货单管理页面，包含查询、新增、修改、删除等功能 引入MemoInput组件实现车牌号输入的历史记录和自动补全功能
This commit is contained in:
砂糖
168
klp-ui/src/components/MemoInput/index.vue
Normal file
168
klp-ui/src/components/MemoInput/index.vue
Normal 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>
|
||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user