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

小改，还要改

Browse Source
master
cxy 8 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> <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";
name: '', const store = expressStore();
phone: '', const sendType = ref(0); // 默认选择自行联系快递员
region: '', const form = reactive({
address: '', "express_no": "SF1234567890",
company: '' "senderName": "",
}, "senderCity": "",
receiverForm: { "receiverName": "",
name: '', "receiverCity": "",
phone: '', "s_datetime": " 2024-11-11 11:11:11"
region: '', })
address: '', const confirmOrder =() => {
company: '' store.add(form);
}, ElMessage({
deliveryMethod: 1, message: '下单成功！',
rules: { type:'success'
name: [{ })
required: true, }
message: '姓名不能为空',
trigger: 'blur'
}], // 清空表单
phone: [{ const resetForm = () => {
required: true, form.value = {
message: '联系电话不能为空', name: '',
trigger: 'blur' phone: '',
}], address: {
region: [{ region: '',
required: true, detail: ''
message: '省市区不能为空',
trigger: 'blur'
}],
address: [{
required: true,
message: '详细地址不能为空',
trigger: 'blur'
}]
}
};
}, },
methods: { company: ''
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 { <style scoped>
color: red; .send-btn {
margin-right: 5px; border-radius: 100%;
} padding: 10px;
background-color: black;
.send-btn { color: white;
border-radius: 100%; }
padding: 10px;
background-color: black; .receive-btn {
color: white; background-color: red;
} color: white;
}
.receive-btn {
background-color: red; .btn {
color: white; background-color: white;
} }
.btn { .send-container {
background-color: white; width: 100%;
} display: flex;
flex-direction: row;
.send-container { align-items: center;
width: 100%; justify-content: space-between;
display: flex; }
flex-direction: row;
align-items: center; .panel {
justify-content: space-between; display: flex;
} flex-direction: column;
background-color: white;
.panel { justify-content: center;
display: flex; align-items: flex-start;
flex-direction: column; }
background-color: white;
justify-content: center; .send-panel {
align-items: flex-start; margin-top: 10px;
} padding: 10px;
width: 100%;
.send-panel { line-height: 40px;
margin-top: 10px; }
padding: 10px;
width: 100%; .send-panel1 {
line-height: 40px; width: 40%;
} align-items: center;
}
.send-panel1 {
width: 40%; .receiver-btn {
align-items: center; background-color:black;
} color: white;
border-radius: 100%;
.form { padding: 10px;
width: 80%; }
margin-top: 10px;
} .form {
width: 80%;
.arrow { margin-top: 10px;
max-width: 100%; }
vertical-align: middle;
height: 10px; .arrow {
} width: 40px;
height: 10px;
.send-label { }
font-weight: 600;
} .send-label {
font-weight: 600;
.confirm-btn { }
background-color: royalblue;
color: white; .confirm-btn {
} background-color: royalblue;
</style> color: white;
}
</style>

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

@ -1,237 +1,168 @@
<template> <template>
<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)"> </el-row>
<Edit /> </el-row>
</el-icon> <el-row class="line-view"></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">
</el-row> <span>确定删除这条快递记录吗？</span>
<template #footer>
<el-dialog v-model="dialogVisible" title="提示" width="500"> <div class="dialog-footer">
<span>确定删除此快递信息吗？</span> <el-button @click=" dialogVisible = false">取 消</el-button>
<template #footer> <el-button type="primary" @click=" deleteByIndexConfirm()">确 定</el-button>
<div class="dialog-footer"> </div>
<el-button @click="dialogVisible = false">取消</el-button> </template>
<el-button type="primary" @click="deleteByIndexConfirm()"> </el-dialog>
确定
</el-button> <el-dialog v-model=" dialogFormVisible" title="修改快递信息" width=" 500">
</div> <el-form :model=" form">
</template> <el-form-item label=" 寄送城市" :label-width=" formLabelWidth">
</el-dialog> <el-input v-model=" form.senderCity" autocomplete="off"></el-input>
</el-form-item>
<el-dialog v-model="dialogFormVisible" title="编辑快递表单" width="500"> <el-form-item label=" 寄送人" :label-width=" formLabelWidth">
<el-form :model="form"> <el-input v-model=" form.senderName" autocomplete="off"></el-input>
<el-form-item label="寄件城市" :label-width="formLabelWidth"> </el-form-item>
<el-input v-model="form.senderCity" autocomplete="off" /> <el-form-item label=" 收件城市" :label-width=" formLabelWidth">
</el-form-item> <el-input v-model=" form.receiverCity" autocomplete="off"></el-input>
<el-form-item label="寄件人" :label-width="formLabelWidth"> </el-form-item>
<el-input v-model="form.senderName" autocomplete="off" /> <el-form-item label=" 收件人" :label-width=" formLabelWidth">
</el-form-item> <el-input v-model=" form.receiverName" autocomplete="off"></el-input>
<el-form-item label="收件城市" :label-width="formLabelWidth"> </el-form-item>
<el-input v-model="form.receiveCity" autocomplete="off" /> </el-form>
</el-form-item> <template #footer>
<el-form-item label="收件人" :label-width="formLabelWidth"> <div class="dialog-footer">
<el-input v-model="form.receiveName" autocomplete="off" /> <el-button @click=" dialogFormVisible = false">取 消</el-button>
</el-form-item> <el-button type="primary" @click=" modifyConfirm()">确 定</el-button>
</el-form> </div>
<template #footer> </template>
<div class="dialog-footer"> </el-dialog>
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="modifyConfirm()">
确定
</el-button>
</div>
</template>
</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(() => {
})
}
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> </script>
<style> <style>
.page { .page {
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; justify-content: flex-start;
flex-direction: row; width: 100%;
justify-content: flex-start; margin-left: 20px;
padding: 20px; color: gray;
color: gray; font-size: 12px;
} }
.top-time {
.top-time { margin-left: 120px;
margin-left: 180px; }
} .express-view {
display: flex;
.express-view { flex-flow: row;
display: flex; justify-content: space-around;
width: 100%; width: 100%;
justify-content: space-around; }
} .express-no-view {
display: flex;
.express-no-view { flex-direction: column;
display: flex; }
flex-direction: column; .arrow {
} width: 40px;
height: 18px;
.city { }
font-size: large; .city {
font-weight: 500; font-size: 20px;
} margin-bottom: 10px;
}
.user { .sign {
margin-top: 10px; color: gray;
font-size: small; }
color: gray; .express-icon-view {
} width: 10%;
display: flex;
.arrow { flex-direction: row;
width: 40px; justify-content: space-around;
height: 10px; }
} .line-view {
height: 0.5px;
.sign { width: 95%;
font-size: small; background-color: lightgray;
margin-top: 10px; margin-top: 20px;
color: red; margin-bottom: 20px;
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> </style>
Write Preview
Loading…
Cancel
Save