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

小改，还要改

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

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

@ -1,168 +1,121 @@
<template> <template>
<el-row class="main"> <el-row class="main">
<!-- 发件人面板 -->
<el-row class="send-container"> <el-row class="send-container">
<el-row class="panel send-panel send-panel1"> <el-row class="panel send-panel send-panel1">
<el-row class="send-container"> <el-row class="send-container">
<el-button class="send-btn">寄</el-button> <el-button class="send-btn">寄</el-button>
<el-row> <el-row>
<el-button class="btn">地址簿</el-button> <el-button >地址簿</el-button>
<el-button class="btn">智能填写</el-button> <el-button >智能填写</el-button>
</el-row> </el-row>
</el-row> </el-row>
<el-form label-width="auto" class="form" :model="senderForm" :rules="rules" ref="senderForm"> <el-form label-width="auto" class="form" >
<el-form-item prop="name"> <el-form-item label="姓名" >
<template #label> <el-input v-model="form.senderName" placeholder="请填写发件人姓名"></el-input>
姓名
</template>
<el-input v-model="senderForm.name" placeholder="请填写发件人姓名"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="phone"> <el-form-item label="联系电话">
<template #label> <el-input placeholder="请填写发件人联系电话"></el-input>
联系电话
</template>
<el-input v-model="senderForm.phone" placeholder="请填写发件人联系电话"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="region"> <el-form-item label="省市区" >
<template #label> <el-input v-model="form.senderCity" placeholder="请填写发件人省市区"></el-input>
省市区
</template>
<el-input v-model="senderForm.region" placeholder="请填写发件人省市区"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="address"> <el-form-item label="详细地址">
<template #label> <el-input placeholder="请填写发件人详细地址"></el-input>
详细地址
</template>
<el-input v-model="senderForm.address" placeholder="请填写发件人详细地址"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="公司名称"> <el-form-item label="公司名称">
<el-input v-model="senderForm.company" placeholder="请填写发件人公司名称"></el-input> <el-input placeholder="请填写发件人公司名称"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-row> </el-row>
<!-- 箭头图标 -->
<el-image class="arrow" src="/arrow.png"></el-image>
<!-- 收件人面板 -->
<el-row class="panel send-panel send-panel1"> <el-row class="panel send-panel send-panel1">
<el-row class="send-container"> <el-row class="send-container">
<el-button class="send-btn receive-btn">收</el-button> <el-button class="send-btn receive-btn">收</el-button>
<el-row> <el-row>
<el-button class="btn">地址簿</el-button> <el-button >地址簿</el-button>
<el-button class="btn">智能填写</el-button> <el-button >智能填写</el-button>
</el-row> </el-row>
</el-row> </el-row>
<el-form label-width="auto" class="form" :model="receiverForm" :rules="rules" ref="receiverForm"> <el-form label-width="auto" class="form" >
<el-form-item prop="name"> <el-form-item label="姓名">
<template #label> <el-input v-model="form.receiverName" placeholder="请填写收件人姓名"></el-input>
姓名
</template>
<el-input v-model="receiverForm.name" placeholder="请填写收件人姓名"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="phone"> <el-form-item label="联系电话" >
<template #label> <el-input placeholder="请填写收件人联系电话"></el-input>
联系电话
</template>
<el-input v-model="receiverForm.phone" placeholder="请填写收件人联系电话"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="region"> <el-form-item label="省市区" >
<template #label> <el-input v-model="form.receiverCity" placeholder="请填写收件人省市区"></el-input>
省市区
</template>
<el-input v-model="receiverForm.region" placeholder="请填写收件人省市区"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="address"> <el-form-item label="详细地址" >
<template #label> <el-input placeholder="请填写收件人详细地址"></el-input>
详细地址
</template>
<el-input v-model="receiverForm.address" placeholder="请填写收件人详细地址"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="公司名称"> <el-form-item label="公司名称">
<el-input v-model="receiverForm.company" placeholder="请填写收件人公司名称"></el-input> <el-input placeholder="请填写收件人公司名称"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-row> </el-row>
</el-row> </el-row>
<!-- 寄件方式 -->
<el-row class="panel send-panel"> <el-row class="panel send-panel">
<el-text class="send-label">寄件方式</el-text> <el-text class="send-label">寄件方式</el-text>
<el-row> <el-radio-group v-model="sendType">
<el-radio-group v-model="deliveryMethod"> <el-radio :value="0">预约上门取件</el-radio>
<el-radio :label="1">预约上门取件</el-radio> <el-radio :value="1">自行联系快递员</el-radio>
<el-radio :label="0">自行联系快递员</el-radio>
</el-radio-group> </el-radio-group>
</el-row> </el-row>
</el-row> <!-- 下单按钮 -->
<el-row class="panel send-panel"> <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>
</el-row> </el-row>
</template> </template>
<script>
export default { <script setup>
data() { import { reactive,ref } from 'vue';
return { import { ElMessage } from 'element-plus';
senderForm: { 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: '', name: '',
phone: '', phone: '',
address: {
region: '', region: '',
address: '', detail: ''
company: ''
}, },
receiverForm: {
name: '',
phone: '',
region: '',
address: '',
company: '' 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> </script>
<style>
.required {
color: red;
margin-right: 5px;
}
<style scoped>
.send-btn { .send-btn {
border-radius: 100%; border-radius: 100%;
padding: 10px; padding: 10px;
@ -207,14 +160,20 @@
align-items: center; align-items: center;
} }
.receiver-btn {
background-color:black;
color: white;
border-radius: 100%;
padding: 10px;
}
.form { .form {
width: 80%; width: 80%;
margin-top: 10px; margin-top: 10px;
} }
.arrow { .arrow {
max-width: 100%; width: 40px;
vertical-align: middle;
height: 10px; height: 10px;
} }

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

@ -2,159 +2,104 @@
<el-row class="page"> <el-row class="page">
<el-row class="block-view" v-for="(item,index) in expressList"> <el-row class="block-view" v-for="(item,index) in expressList">
<el-row class="top"> <el-row class="top">
<el-row>运单号：{{item.express_no}}</el-row> <el-row>运单号 {{item.express_no}}}</el-row>
<el-row class="top-time">签收时间: {{item.s_datetime}}</el-row> <el-row class="top-time">签收时间 {{item.s_datetime}}}</el-row>
</el-row> </el-row>
<el-row class="express-view"> <el-row class="express-view">
<el-row class="express-no-view"> <el-row class="express-no-view">
<el-text class="city">{{item.senderCity}}</el-text> <el-text class="city">{{item.senderCity}}}</el-text>
<el-text class="user">{{item.senderName}}</el-text> <el-text class="user">{{item.senderName}}}</el-text>
</el-row> </el-row>
<el-row class="express-no-view"> <el-row class="express-no-view">
<el-image class="arrow" src="/arrow.png"></el-image> <el-image class="arrow" src="/arrow.png"></el-image>
<el-text class="sign">已签收</el-text> <el-text class="sign">已签收</el-text>
</el-row> </el-row>
<el-row class="express-no-view"> <el-row class="express-no-view">
<el-text class="city">{{item.receiveCity}}</el-text> <el-text class="city">{{item.receiverCity}}}</el-text>
<el-text class="user">{{item.receiveName}}</el-text> <el-text class="user">{{item.receiverName}}}</el-text>
</el-row> </el-row>
<el-row class="express-icon-view"> <el-row class="express-icon-view">
<el-icon @click="deleteByIndex(index)"> <el-icon @click=" deleteByIndex(index)"><Delete /></el-icon>
<Delete /> <el-icon @click=" modify(item,index)"><Edit /></el-icon>
</el-icon> </el-row>
<el-icon @click="modify(item,index)">
<Edit />
</el-icon>
</el-row> </el-row>
<el-row class="line-view"></el-row>
</el-row> </el-row>
<el-row class="line-view"></el-row>
</el-row> </el-row>
<el-dialog v-model="dialogVisible" title="提示" width="500"> <el-dialog v-model=" dialogVisible" title="警告" width=" 500" :before-close="handleClose">
<span>确定删除此快递信息吗？</span> <span>确定删除这条快递记录吗？</span>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click=" dialogVisible = false">取 消</el-button> <el-button @click=" dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteByIndexConfirm()"> <el-button type="primary" @click=" deleteByIndexConfirm()">确 定</el-button>
确定
</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="dialogFormVisible" title="编辑快递表单" width="500"> <el-dialog v-model=" dialogFormVisible" title="修改快递信息" width=" 500">
<el-form :model=" form"> <el-form :model=" form">
<el-form-item label="寄件城市" :label-width="formLabelWidth"> <el-form-item label=" 寄送城市" :label-width=" formLabelWidth">
<el-input v-model="form.senderCity" autocomplete="off" /> <el-input v-model=" form.senderCity" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="寄件人" :label-width="formLabelWidth"> <el-form-item label=" 寄送人" :label-width=" formLabelWidth">
<el-input v-model="form.senderName" autocomplete="off" /> <el-input v-model=" form.senderName" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label=" 收件城市" :label-width=" formLabelWidth"> <el-form-item label=" 收件城市" :label-width=" formLabelWidth">
<el-input v-model="form.receiveCity" autocomplete="off" /> <el-input v-model=" form.receiverCity" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label=" 收件人" :label-width=" formLabelWidth"> <el-form-item label=" 收件人" :label-width=" formLabelWidth">
<el-input v-model="form.receiveName" autocomplete="off" /> <el-input v-model=" form.receiverName" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click=" dialogFormVisible = false">取 消</el-button> <el-button @click=" dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="modifyConfirm()"> <el-button type="primary" @click=" modifyConfirm()">确 定</el-button>
确定
</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</el-row>
</template> </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(() => {
<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 let formIndex = -1
const deleteByIndex = index => { const deleteByIndex = (index) => {
dialogVisible.value = true dialogVisible.value = true
formIndex = index formIndex = index
} }
const deleteByIndexConfirm = () => { const deleteByIndexConfirm = () => {
dialogVisible.value = false dialogVisible.value = false
expressList.splice(formIndex, 1) store.deleteByIndex(formIndex)
} }
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
"express_no": "",
"senderCity": "",
"senderName": "",
"receiveCity": "",
"receiveName": "",
"s_datetime": ""
})
const modify = (item, index) => { const modify = (item, index) => {
dialogFormVisible.value = true dialogFormVisible.value = true
form.senderCity = item.senderCity form.senderCity = item.senderCity
form.senderName = item.senderName form.senderName = item.senderName
form.receiveCity = item.receiveCity form.receiverCity = item.receiverCity
form.receiveName = item.receiveName form.receiverName = item.receiverName
formIndex = index formIndex = index
} }
const modifyConfirm = () => { const modifyConfirm = () => {
dialogFormVisible.value = false dialogFormVisible.value = false
const item = expressList[formIndex] let item = expressList[formIndex]
item.senderCity = form.senderCity store.modify(form,formIndex)
item.senderName = form.senderName
item.receiveCity = form.receiveCity
item.receiveName = form.receiveName
} }
@ -165,68 +110,53 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
background-color: white; height: 100vh;
line-height: 20px; line-height: 20px;
} }
.block-view { .block-view {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
} }
.top { .top {
display: flex; display: flex;
flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
padding: 20px; width: 100%;
margin-left: 20px;
color: gray; color: gray;
font-size: 12px;
} }
.top-time { .top-time {
margin-left: 180px; margin-left: 120px;
} }
.express-view { .express-view {
display: flex; display: flex;
width: 100%; flex-flow: row;
justify-content: space-around; justify-content: space-around;
width: 100%;
} }
.express-no-view { .express-no-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.city {
font-size: large;
font-weight: 500;
}
.user {
margin-top: 10px;
font-size: small;
color: gray;
}
.arrow { .arrow {
width: 40px; width: 40px;
height: 10px; height: 18px;
}
.city {
font-size: 20px;
margin-bottom: 10px;
} }
.sign { .sign {
font-size: small; color: gray;
margin-top: 10px;
color: red;
font-weight: 100;
} }
.express-icon-view { .express-icon-view {
width: 10%; width: 10%;
display: flex; display: flex;
flex-direction: row;
justify-content: space-around; justify-content: space-around;
} }
.line-view { .line-view {
height: 0.5px; height: 0.5px;
width: 95%; width: 95%;
@ -234,4 +164,5 @@
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save