fdzcxy212206209
/
delivery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

111

Browse Source
master
xiao-ming77 21 hours ago
parent 1303dc285d
commit 9fbe6af81c
2 changed files with 452 additions and 390 deletions
Show Stats Download Patch File Download Diff File

211
frontend/src/View/express/ExpressForm.vue
Unescape View File

@ -5,144 +5,180 @@
<el-row class="send-container">
<el-button class="send-btn">寄</el-button>
<el-row>
<el-button class="btn">地址薄</el-button>
<el-button class="btn">地址簿</el-button>
<el-button class="btn">智能填写</el-button>
</el-row>
</el-row>
<el-form label-width="auto" class="form" ref="sendFormRef">
<el-form-item>
<el-form label-width="auto" class="form" :model="senderForm" :rules="rules" ref="senderForm">
<el-form-item prop="name">
<template #label>
<span style="color: red;">*</span> 姓名
姓名
</template>
<el-input placeholder="请填写真实姓名" v-model="express.sename"></el-input>
<el-input v-model="senderForm.name" placeholder="请填写发件人姓名"></el-input>
</el-form-item>
<el-form-item>
<el-form-item prop="phone">
<template #label>
<span style="color: red;">*</span> 联系电话
联系电话
</template>
<el-input placeholder="请填写手机号码或者固话号码" v-model="express.sephone"></el-input>
<el-input v-model="senderForm.phone" placeholder="请填写发件人联系电话"></el-input>
</el-form-item>
<!-- <el-form-item>-->
<!-- <template #label>-->
<!-- <span style="color: red;">*</span> 省市区-->
<!-- </template>-->
<!-- <el-input placeholder="请选择省市区" v-model="express.region"></el-input>-->
<!-- </el-form-item>-->
<el-form-item>
<el-form-item prop="region">
<template #label>
<span style="color: red;">*</span> 详细地址
省市区
</template>
<el-input placeholder="请填写详细地址" v-model="express.seaddress"></el-input>
<el-input v-model="senderForm.region" placeholder="请填写发件人省市区"></el-input>
</el-form-item>
<el-form-item prop="address">
<template #label>
详细地址
</template>
<el-input v-model="senderForm.address" placeholder="请填写发件人详细地址"></el-input>
</el-form-item>
<el-form-item label="公司名称">
<el-input v-model="senderForm.company" placeholder="请填写发件人公司名称"></el-input>
</el-form-item>
<!-- <el-form-item label="公司名称">-->
<!-- <el-input placeholder="请填写公司名称" v-model="express.company"></el-input>-->
<!-- </el-form-item>-->
</el-form>
</el-row>
<el-image class="arrow" src="/arrow.png"></el-image>
<el-row class="panel send-panel send-panel1">
<el-row class="send-container">
<el-button class="receive-btn">收</el-button>
<el-button class="send-btn receive-btn">收</el-button>
<el-row>
<el-button class="btn">地址薄</el-button>
<el-button class="btn">地址簿</el-button>
<el-button class="btn">智能填写</el-button>
</el-row>
</el-row>
<el-form label-width="auto" class="form" ref="receiveFormRef">
<el-form-item>
<el-form label-width="auto" class="form" :model="receiverForm" :rules="rules" ref="receiverForm">
<el-form-item prop="name">
<template #label>
<span style="color: red;">*</span> 姓名
姓名
</template>
<el-input placeholder="请填写真实姓名" v-model="express.rename"></el-input>
<el-input v-model="receiverForm.name" placeholder="请填写收件人姓名"></el-input>
</el-form-item>
<el-form-item>
<el-form-item prop="phone">
<template #label>
<span style="color: red;">*</span> 联系电话
联系电话
</template>
<el-input placeholder="请填写手机号码或者固话号码" v-model="express.rephone"></el-input>
<el-input v-model="receiverForm.phone" placeholder="请填写收件人联系电话"></el-input>
</el-form-item>
<!-- <el-form-item>-->
<!-- <template #label>-->
<!-- <span style="color: red;">*</span> 省市区-->
<!-- </template>-->
<!-- <el-input placeholder="请选择省市区" v-model="express.region"></el-input>-->
<!-- </el-form-item>-->
<el-form-item>
<el-form-item prop="region">
<template #label>
<span style="color: red;">*</span> 详细地址
省市区
</template>
<el-input placeholder="请填写详细地址" v-model="express.readdress"></el-input>
<el-input v-model="receiverForm.region" placeholder="请填写收件人省市区"></el-input>
</el-form-item>
<el-form-item prop="address">
<template #label>
详细地址
</template>
<el-input v-model="receiverForm.address" placeholder="请填写收件人详细地址"></el-input>
</el-form-item>
<el-form-item label="公司名称">
<el-input v-model="receiverForm.company" placeholder="请填写收件人公司名称"></el-input>
</el-form-item>
<!-- <el-form-item label="公司名称">-->
<!-- <el-input placeholder="请填写公司名称" v-model="express.company"></el-input>-->
<!-- </el-form-item>-->
</el-form>
</el-row>
</el-row>
<el-row class="panel send-panel">
<el-text class="send-label">寄件方式</el-text>
<el-row>
<el-radio-group>
<el-radio value="1">预约上门取件</el-radio>
<el-radio value="0">自行联系快递员取件</el-radio>
<el-radio-group v-model="deliveryMethod">
<el-radio :label="1">预约上门取件</el-radio>
<el-radio :label="0">自行联系快递员</el-radio>
</el-radio-group>
</el-row>
</el-row>
<el-row class="panel send-panel">
<el-button @click="submitForm" class="confirm-btn">下单</el-button>
<el-button class="confirm-btn" @click="submitForm">下单</el-button>
</el-row>
</el-row>
</template>
<script setup>
import { ref } from 'vue';
const sendFormRef = ref(null); // 用于操作寄件表单
const receiveFormRef = ref(null); // 用于操作收件表单
const express = ref({
sename: '',
sephone: '',
seaddress: '',
rename: '',
rephone: '',
readdress: '',
<script>
export default {
data() {
return {
senderForm: {
name: '',
phone: '',
// region: '',
// company: ''
});
// 提交表单的逻辑
const submitForm = async () => {
try {
await sendFormRef.value.validate(); // 验证寄件表单
await receiveFormRef.value.validate(); // 验证收件表单
// 如果验证通过，可以进行下一步操作，比如提交数据
console.log('寄件表单数据:', sendFormData.value);
console.log('收件表单数据:', receiveFormData.value);
// 在这里添加表单提交的相关逻辑
} catch (error) {
console.log('表单验证失败:', error);
}
};
region: '',
address: '',
company: ''
},
receiverForm: {
name: '',
phone: '',
region: '',
address: '',
company: ''
},
deliveryMethod: 1,
rules: {
name: [{
required: true,
message: '姓名不能为空',
trigger: 'blur'
}],
phone: [{
required: true,
message: '联系电话不能为空',
trigger: 'blur'
}],
region: [{
required: true,
message: '省市区不能为空',
trigger: 'blur'
}],
address: [{
required: true,
message: '详细地址不能为空',
trigger: 'blur'
}]
}
};
},
methods: {
submitForm() {
this.$refs.senderForm.validate((valid) => {
if (valid) {
this.$refs.receiverForm.validate((receiverValid) => {
if (receiverValid) {
this.$message.success('表单提交成功');
} else {
this.$message.error('收件信息填写不完整');
}
});
} else {
this.$message.error('发件信息填写不完整');
}
});
}
}
};
</script>
<style>
.required {
color: red;
margin-right: 5px;
}
<style scoped>
.send-btn {
border-radius: 100%;
padding: 10px;
background-color:black;
background-color: black;
color: white;
}
.receive-btn {
background-color: red;
color: white;
}
.btn {
background-color: white;
}
.send-container {
width: 100%;
display: flex;
@ -150,37 +186,44 @@ const submitForm = async () => {
align-items: center;
justify-content: space-between;
}
.panel {
display: flex;
flex-direction: column;
background-color: white;
align-items: flex-start;
justify-content: center;
align-items: flex-start;
}
.send-panel {
margin-top: 10px;
padding: 10px;
width: 100%;
line-height: 40px;
}
.send-panel1 {
width: 40%;
align-items: center;
}
.form {
width:80%;
width: 80%;
margin-top: 10px;
}
.arrow {
width: 40px;
max-width: 100%;
vertical-align: middle;
height: 10px;
}
.send-label {
font-weight: 600;
}
.confirm-btn {
background-color: royalblue;
color: white;
}
</style>

425
frontend/src/View/express/ExpressList.vue
Unescape View File

@ -1,218 +1,237 @@
<script setup>
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
import {
expressListService,
expressAddService,
expressUpdateService,
expressDeleteService
} from '@/api/express';
import { ElMessage, ElMessageBox } from "element-plus";
// 快递列表数据模型
const expressList = ref([]);
const visibleDrawer = ref(false);
const drawerTitle = ref('');
const expressModel = ref({
expressid: '',
sename: '',
sephone: '',
seaddress: '',
rename: '',
rephone: '',
readdress: '',
issigned: '',
signtime: '',
});
// 分页条数据模型
const pageNum = ref(1); // 当前页
const total = ref(20); // 总条数
const pageSize = ref(3); // 每页条数
const onSizeChange = (size) => {
pageSize.value = size;
fetchExpressList();
};
const onCurrentChange = (num) => {
pageNum.value = num;
fetchExpressList();
};
const fetchExpressList = async () => {
const params = {
pageNum: pageNum.value,
pageSize: pageSize.value,
// 以下参数需要与ExpressMapper接口中的list方法参数一致
id: null, // 假设您希望根据用户ID查询，如果没有这个需求可以删除
sename: '',
sephone: '',
seaddress: '',
rename: '',
rephone: '',
readdress: '',
issigned: '',
signtime: '',
};
try {
const result = await expressListService(params);
expressList.value = result.data.items;
total.value = result.data.total;
} catch (error) {
console.error('获取快递列表失败:', error);
ElMessage.error('获取快递列表失败');
}
};
fetchExpressList();
const showAddDialog = (title) => {
clearData();
drawerTitle.value = title;
visibleDrawer.value = true;
};
const clearData = () => {
expressModel.value = {
expressid: '',
sename: '',
sephone: '',
seaddress: '',
rename: '',
rephone: '',
readdress: '',
issigned: '',
signtime: '',
};
};
const addExpress = async () => {
await expressAddService(expressModel.value);
ElMessage.success('添加成功');
visibleDrawer.value = false;
await fetchExpressList();
};
const showEditDialog = (row, title) => {
visibleDrawer.value = true;
drawerTitle.value = title;
expressModel.value = { ...row };
};
const updateExpress = async () => {
await expressUpdateService(expressModel.value);
ElMessage.success("更新成功");
visibleDrawer.value = false;
await fetchExpressList();
};
const deleteExpress = (row) => {
ElMessageBox.confirm(
'你确认要删除该快递信息吗？',
'温馨提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}
).then(async () => {
await expressDeleteService(row.id);
ElMessage.success("删除成功");
await fetchExpressList();
});
};
</script>
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>快递管理</span>
<div class="extra">
<el-button type="primary" @click="showAddDialog('添加快递')">添加快递</el-button>
</div>
<el-row class="page">
<el-row class="block-view" v-for="(item,index) in expressList">
<el-row class="top">
<el-row>运单号：{{item.express_no}}</el-row>
<el-row class="top-time">签收时间: {{item.s_datetime}}</el-row>
</el-row>
<el-row class="express-view">
<el-row class="express-no-view">
<el-text class="city">{{item.senderCity}}</el-text>
<el-text class="user">{{item.senderName}}</el-text>
</el-row>
<el-row class="express-no-view">
<el-image class="arrow" src="/arrow.png"></el-image>
<el-text class="sign">已签收</el-text>
</el-row>
<el-row class="express-no-view">
<el-text class="city">{{item.receiveCity}}</el-text>
<el-text class="user">{{item.receiveName}}</el-text>
</el-row>
<el-row class="express-icon-view">
<el-icon @click="deleteByIndex(index)">
<Delete />
</el-icon>
<el-icon @click="modify(item,index)">
<Edit />
</el-icon>
</el-row>
<el-row class="line-view"></el-row>
</el-row>
</el-row>
<el-dialog v-model="dialogVisible" title="提示" width="500">
<span>确定删除此快递信息吗？</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="deleteByIndexConfirm()">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-table :data="expressList" style="width: 100%">
<el-table-column label="订单号" prop="expressid"></el-table-column>
<el-table-column label="发件人" prop="sename"></el-table-column>
<el-table-column label="发件人电话" prop="sephone"></el-table-column>
<el-table-column label="发件人地址" prop="seaddress"></el-table-column>
<el-table-column label="收件人" prop="rename"></el-table-column>
<el-table-column label="收件人电话" prop="rephone"></el-table-column>
<el-table-column label="收件人地址" prop="readdress"></el-table-column>
<el-table-column label="签收时间" prop="signtime"></el-table-column>
<el-table-column label="状态" prop="issigned"></el-table-column>
<el-table-column label="操作" width="100">
<template #default="{ row }">
<el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑快递')"></el-button>
<el-button :icon="Delete" circle plain type="danger" @click="deleteExpress(row)"></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据" />
</template>
</el-table>
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
layout="jumper, total, sizes, prev, pager, next" background :total="total"
@size-change="onSizeChange"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
</el-card>
<!-- 抽屉 -->
<el-drawer v-model="visibleDrawer" :title="drawerTitle" direction="rtl" size="50%">
<el-form :model="expressModel" label-width="100px">
<el-form-item label="订单号">
<el-input v-model="expressModel.expressid" placeholder="请输入订单号"></el-input>
<el-dialog v-model="dialogFormVisible" title="编辑快递表单" width="500">
<el-form :model="form">
<el-form-item label="寄件城市" :label-width="formLabelWidth">
<el-input v-model="form.senderCity" autocomplete="off" />
</el-form-item>
<el-form-item label="发件人">
<el-input v-model="expressModel.sename" placeholder="请输入发件人"></el-input>
<el-form-item label="寄件人" :label-width="formLabelWidth">
<el-input v-model="form.senderName" autocomplete="off" />
</el-form-item>
<el-form-item label="发件人电话">
<el-input v-model="expressModel.sephone" placeholder="请输入发件人电话"></el-input>
<el-form-item label="收件城市" :label-width="formLabelWidth">
<el-input v-model="form.receiveCity" autocomplete="off" />
</el-form-item>
<el-form-item label="发件人地址">
<el-input v-model="expressModel.seaddress" placeholder="请输入发件人地址"></el-input>
</el-form-item>
<el-form-item label="收件人">
<el-input v-model="expressModel.rename" placeholder="请输入收件人"></el-input>
</el-form-item>
<el-form-item label="收件人电话">
<el-input v-model="expressModel.rephone" placeholder="请输入收件人电话"></el-input>
</el-form-item>
<el-form-item label="收件人地址">
<el-input v-model="expressModel.readdress" placeholder="请输入收件人地址"></el-input>
</el-form-item>
<el-form-item label="签收时间">
<el-date-picker v-model="expressModel.signtime" type="date" placeholder="请选择签收时间"></el-date-picker>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="expressModel.issigned" placeholder="请选择状态">
<el-option label="未签收" value="0"></el-option>
<el-option label="已签收" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="expressModel.id ? updateExpress() : addExpress()">
{{ expressModel.id ? '更新' : '添加' }}
</el-button>
<el-form-item label="收件人" :label-width="formLabelWidth">
<el-input v-model="form.receiveName" autocomplete="off" />
</el-form-item>
</el-form>
</el-drawer>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="modifyConfirm()">
确定
</el-button>
</div>
</template>
</el-dialog>
</el-row>
</template>
<style lang="scss" scoped>
.page-container {
min-height: 100%;
box-sizing: border-box;
<script setup>
import {
Delete,
Edit
} from '@element-plus/icons-vue'
import {
reactive,
ref
} from 'vue';
import {
ElMessageBox
} from 'element-plus';
const expressList = reactive([{
"express_no": "SF123456789",
"senderCity": "深圳市",
"senderName": "叶先生1",
"receiveCity": "福州市",
"receiveName": "林先生",
"s_datetime": "2024-11-11 11:31:00"
},
{
"express_no": "SF123456789",
"senderCity": "深圳市",
"senderName": "叶先生2",
"receiveCity": "福州市",
"receiveName": "林先生",
"s_datetime": "2024-11-11 11:31:00"
},
{
"express_no": "SF123456789",
"senderCity": "深圳市",
"senderName": "叶先生3",
"receiveCity": "福州市",
"receiveName": "林先生",
"s_datetime": "2024-11-11 11:31:00"
},
{
"express_no": "SF123456789",
"senderCity": "深圳市",
"senderName": "叶先生4",
"receiveCity": "福州市",
"receiveName": "林先生",
"s_datetime": "2024-11-11 11:31:00"
}
])
const dialogVisible = ref(false)
let formIndex = -1
const deleteByIndex = index => {
dialogVisible.value = true
formIndex = index
}
const deleteByIndexConfirm = () => {
dialogVisible.value = false
expressList.splice(formIndex, 1)
}
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
"express_no": "",
"senderCity": "",
"senderName": "",
"receiveCity": "",
"receiveName": "",
"s_datetime": ""
})
const modify = (item,index)=>{
dialogFormVisible.value = true
form.senderCity = item.senderCity
form.senderName = item.senderName
form.receiveCity = item.receiveCity
form.receiveName = item.receiveName
formIndex = index
}
const modifyConfirm = ()=>{
dialogFormVisible.value = false
const item = expressList[formIndex]
item.senderCity = form.senderCity
item.senderName = form.senderName
item.receiveCity = form.receiveCity
item.receiveName = form.receiveName
}
.header {
</script>
<style>
.page {
display: flex;
flex-direction: column;
width: 100%;
background-color: white;
line-height: 20px;
}
.block-view {
width: 100%;
display: flex;
flex-direction: column;
}
.top {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 20px;
color: gray;
}
.top-time {
margin-left: 180px;
}
.express-view {
display: flex;
width: 100%;
justify-content: space-around;
}
.express-no-view {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.city {
font-size: large;
font-weight: 500;
}
.user {
margin-top: 10px;
font-size: small;
color: gray;
}
.arrow {
width: 40px;
height: 10px;
}
.sign {
font-size: small;
margin-top: 10px;
color: red;
font-weight: 100;
}
.express-icon-view {
width: 10%;
display: flex;
justify-content: space-around;
}
.line-view {
height: 0.5px;
width: 95%;
background-color: lightgray;
margin-top: 20px;
margin-bottom: 20px;
}
}
</style>
Write Preview
Loading…
Cancel
Save