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

小改，还要改

Browse Source
master
cxy 2 months ago
parent 74dccc232b
commit 748b0784a0
2 changed files with 302 additions and 412 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,229 +1,188 @@
<template>
<el-row class="main">
<!-- 发件人面板 -->
<el-row class="send-container">
<el-row class="panel send-panel send-panel1">
<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 >地址簿</el-button>
<el-button >智能填写</el-button>
</el-row>
</el-row>
<el-form label-width="auto" class="form" :model="senderForm" :rules="rules" ref="senderForm">
<el-form-item prop="name">
<template #label>
姓名
</template>
<el-input v-model="senderForm.name" placeholder="请填写发件人姓名"></el-input>
<el-form label-width="auto" class="form" >
<el-form-item label="姓名" >
<el-input v-model="form.senderName" placeholder="请填写发件人姓名"></el-input>
</el-form-item>
<el-form-item prop="phone">
<template #label>
联系电话
</template>
<el-input v-model="senderForm.phone" placeholder="请填写发件人联系电话"></el-input>
<el-form-item label="联系电话">
<el-input placeholder="请填写发件人联系电话"></el-input>
</el-form-item>
<el-form-item prop="region">
<template #label>
省市区
</template>
<el-input v-model="senderForm.region" placeholder="请填写发件人省市区"></el-input>
<el-form-item label="省市区" >
<el-input v-model="form.senderCity" 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 label="详细地址">
<el-input placeholder="请填写发件人详细地址"></el-input>
</el-form-item>
<el-form-item label="公司名称">
<el-input v-model="senderForm.company" placeholder="请填写发件人公司名称"></el-input>
<el-input placeholder="请填写发件人公司名称"></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="send-btn receive-btn">收</el-button>
<el-row>
<el-button class="btn">地址簿</el-button>
<el-button class="btn">智能填写</el-button>
<el-button >地址簿</el-button>
<el-button >智能填写</el-button>
</el-row>
</el-row>
<el-form label-width="auto" class="form" :model="receiverForm" :rules="rules" ref="receiverForm">
<el-form-item prop="name">
<template #label>
姓名
</template>
<el-input v-model="receiverForm.name" placeholder="请填写收件人姓名"></el-input>
<el-form label-width="auto" class="form" >
<el-form-item label="姓名">
<el-input v-model="form.receiverName" placeholder="请填写收件人姓名"></el-input>
</el-form-item>
<el-form-item prop="phone">
<template #label>
联系电话
</template>
<el-input v-model="receiverForm.phone" placeholder="请填写收件人联系电话"></el-input>
<el-form-item label="联系电话" >
<el-input placeholder="请填写收件人联系电话"></el-input>
</el-form-item>
<el-form-item prop="region">
<template #label>
省市区
</template>
<el-input v-model="receiverForm.region" placeholder="请填写收件人省市区"></el-input>
<el-form-item label="省市区" >
<el-input v-model="form.receiverCity" 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 label="详细地址" >
<el-input placeholder="请填写收件人详细地址"></el-input>
</el-form-item>
<el-form-item label="公司名称">
<el-input v-model="receiverForm.company" placeholder="请填写收件人公司名称"></el-input>
<el-input placeholder="请填写收件人公司名称"></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 v-model="deliveryMethod">
<el-radio :label="1">预约上门取件</el-radio>
<el-radio :label="0">自行联系快递员</el-radio>
<el-radio-group v-model="sendType">
<el-radio :value="0">预约上门取件</el-radio>
<el-radio :value="1">自行联系快递员</el-radio>
</el-radio-group>
</el-row>
</el-row>
<!-- 下单按钮 -->
<el-row class="panel send-panel">
<el-button class="confirm-btn" @click="submitForm">下单</el-button>
<el-button class="confirm-btn" @click="confirmOrder">下单</el-button>
</el-row>
</el-row>
</template>
<script>
export default {
data() {
return {
senderForm: {
name: '',
phone: '',
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'
}]
}
};
<script setup>
import { reactive,ref } from 'vue';
import { ElMessage } from 'element-plus';
import {expressStore} from "@/stores/express.js";
const store = expressStore();
const sendType = ref(0); // 默认选择自行联系快递员
const form = reactive({
"express_no": "SF1234567890",
"senderName": "",
"senderCity": "",
"receiverName": "",
"receiverCity": "",
"s_datetime": " 2024-11-11 11:11:11"
})
const confirmOrder =() => {
store.add(form);
ElMessage({
message: '下单成功！',
type:'success'
})
}
// 清空表单
const resetForm = () => {
form.value = {
name: '',
phone: '',
address: {
region: '',
detail: ''
},
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('发件信息填写不完整');
}
});
}
}
company: ''
};
};
</script>
<style>
.required {
color: red;
margin-right: 5px;
}
.send-btn {
border-radius: 100%;
padding: 10px;
background-color: black;
color: white;
}
.receive-btn {
background-color: red;
color: white;
}
.btn {
background-color: white;
}
.send-container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.panel {
display: flex;
flex-direction: column;
background-color: white;
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%;
margin-top: 10px;
}
.arrow {
max-width: 100%;
vertical-align: middle;
height: 10px;
}
.send-label {
font-weight: 600;
}
.confirm-btn {
background-color: royalblue;
color: white;
}
</style>
<style scoped>
.send-btn {
border-radius: 100%;
padding: 10px;
background-color: black;
color: white;
}
.receive-btn {
background-color: red;
color: white;
}
.btn {
background-color: white;
}
.send-container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.panel {
display: flex;
flex-direction: column;
background-color: white;
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;
}
.receiver-btn {
background-color:black;
color: white;
border-radius: 100%;
padding: 10px;
}
.form {
width: 80%;
margin-top: 10px;
}
.arrow {
width: 40px;
height: 10px;
}
.send-label {
font-weight: 600;
}
.confirm-btn {
background-color: royalblue;
color: white;
}
</style>

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

@ -1,237 +1,168 @@
<template>
<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-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="寄件人" :label-width="formLabelWidth">
<el-input v-model="form.senderName" autocomplete="off" />
</el-form-item>
<el-form-item label="收件城市" :label-width="formLabelWidth">
<el-input v-model="form.receiveCity" autocomplete="off" />
</el-form-item>
<el-form-item label="收件人" :label-width="formLabelWidth">
<el-input v-model="form.receiveName" autocomplete="off" />
</el-form-item>
</el-form>
<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>
<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.receiverCity}}}</el-text>
<el-text class="user">{{item.receiverName}}}</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>
</el-row>
<el-row class="line-view"></el-row>
</el-row>
<el-dialog v-model=" dialogVisible" title="警告" width=" 500" :before-close="handleClose">
<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-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-input>
</el-form-item>
<el-form-item label=" 寄送人" :label-width=" formLabelWidth">
<el-input v-model=" form.senderName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" 收件城市" :label-width=" formLabelWidth">
<el-input v-model=" form.receiverCity" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" 收件人" :label-width=" formLabelWidth">
<el-input v-model=" form.receiverName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<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>
</template>
<script lang="ts"setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { ElMessage } from "element-plus";
import { expressStore } from '@/stores/express.js'
const store = expressStore()
const { expressList } = reactive(store)
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
ElMessage.confirm('确认关闭？').then(() => {
done()
}).catch(() => {
})
}
let formIndex = -1
const deleteByIndex = (index) => {
dialogVisible.value = true
formIndex = index
}
const deleteByIndexConfirm = () => {
dialogVisible.value = false
store.deleteByIndex(formIndex)
}
const dialogFormVisible = ref(false)
const modify = (item, index) => {
dialogFormVisible.value = true
form.senderCity = item.senderCity
form.senderName = item.senderName
form.receiverCity = item.receiverCity
form.receiverName = item.receiverName
formIndex = index
}
const modifyConfirm = () => {
dialogFormVisible.value = false
let item = expressList[formIndex]
store.modify(form,formIndex)
}
<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
}
</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;
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;
}
.page {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
line-height: 20px;
}
.block-view {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.top {
display: flex;
justify-content: flex-start;
width: 100%;
margin-left: 20px;
color: gray;
font-size: 12px;
}
.top-time {
margin-left: 120px;
}
.express-view {
display: flex;
flex-flow: row;
justify-content: space-around;
width: 100%;
}
.express-no-view {
display: flex;
flex-direction: column;
}
.arrow {
width: 40px;
height: 18px;
}
.city {
font-size: 20px;
margin-bottom: 10px;
}
.sign {
color: gray;
}
.express-icon-view {
width: 10%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.line-view {
height: 0.5px;
width: 95%;
background-color: lightgray;
margin-top: 20px;
margin-bottom: 20px;
}
.line-view {
height: 0.5px;
width: 95%;
background-color: lightgray;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
Write Preview
Loading…
Cancel
Save