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

Merge remote-tracking branch 'origin/master'

Browse Source 
# Conflicts:
#	frontend/src/View/express/ExpressForm.vue
#	frontend/src/View/express/ExpressList.vue
master
cxy 8 months ago
parent c3036268dd 9fbe6af81c
commit 74dccc232b
2 changed files with 412 additions and 302 deletions
Show Stats Download Patch File Download Diff File

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

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

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

@ -1,168 +1,237 @@
<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.receiverCity}}}</el-text> <el-text class="city">{{item.receiveCity}}</el-text>
<el-text class="user">{{item.receiverName}}}</el-text> <el-text class="user">{{item.receiveName}}</el-text>
</el-row> </el-row>
<el-row class="express-icon-view"> <el-row class="express-icon-view">
<el-icon @click=" deleteByIndex(index)"><Delete /></el-icon> <el-icon @click="deleteByIndex(index)">
<el-icon @click=" modify(item,index)"><Edit /></el-icon> <Delete />
</el-row> </el-icon>
</el-row> <el-icon @click="modify(item,index)">
</el-row> <Edit />
<el-row class="line-view"></el-row> </el-icon>
</el-row> </el-row>
<el-row class="line-view"></el-row>
<el-dialog v-model=" dialogVisible" title="警告" width=" 500" :before-close="handleClose"> </el-row>
<span>确定删除这条快递记录吗？</span> </el-row>
<template #footer>
<div class="dialog-footer"> <el-dialog v-model="dialogVisible" title="提示" width="500">
<el-button @click=" dialogVisible = false">取 消</el-button> <span>确定删除此快递信息吗？</span>
<el-button type="primary" @click=" deleteByIndexConfirm()">确 定</el-button> <template #footer>
</div> <div class="dialog-footer">
</template> <el-button @click="dialogVisible = false">取消</el-button>
</el-dialog> <el-button type="primary" @click="deleteByIndexConfirm()">
确定
<el-dialog v-model=" dialogFormVisible" title="修改快递信息" width=" 500"> </el-button>
<el-form :model=" form"> </div>
<el-form-item label=" 寄送城市" :label-width=" formLabelWidth"> </template>
<el-input v-model=" form.senderCity" autocomplete="off"></el-input> </el-dialog>
</el-form-item>
<el-form-item label=" 寄送人" :label-width=" formLabelWidth"> <el-dialog v-model="dialogFormVisible" title="编辑快递表单" width="500">
<el-input v-model=" form.senderName" autocomplete="off"></el-input> <el-form :model="form">
</el-form-item> <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.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.senderName" autocomplete="off" />
<el-input v-model=" form.receiverName" autocomplete="off"></el-input> </el-form-item>
</el-form-item> <el-form-item label="收件城市" :label-width="formLabelWidth">
</el-form> <el-input v-model="form.receiveCity" autocomplete="off" />
<template #footer> </el-form-item>
<div class="dialog-footer"> <el-form-item label="收件人" :label-width="formLabelWidth">
<el-button @click=" dialogFormVisible = false">取 消</el-button> <el-input v-model="form.receiveName" autocomplete="off" />
<el-button type="primary" @click=" modifyConfirm()">确 定</el-button> </el-form-item>
</div> </el-form>
</template> <template #footer>
</el-dialog> <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> </template>
<script lang="ts"setup>
import { Delete, Edit } from '@element-plus/icons-vue' <script setup>
import { reactive, ref } from 'vue' import {
import { ElMessage } from "element-plus"; Delete,
import { expressStore } from '@/stores/express.js' Edit
const store = expressStore() } from '@element-plus/icons-vue'
const { expressList } = reactive(store) import {
const dialogVisible = ref(false) reactive,
const handleClose = (done: () => void) => { ref
ElMessage.confirm('确认关闭？').then(() => { } from 'vue';
done() import {
}).catch(() => { ElMessageBox
} from 'element-plus';
})
} const expressList = reactive([{
"express_no": "SF123456789",
let formIndex = -1 "senderCity": "深圳市",
const deleteByIndex = (index) => { "senderName": "叶先生1",
dialogVisible.value = true "receiveCity": "福州市",
formIndex = index "receiveName": "林先生",
} "s_datetime": "2024-11-11 11:31:00"
},
const deleteByIndexConfirm = () => { {
dialogVisible.value = false "express_no": "SF123456789",
store.deleteByIndex(formIndex) "senderCity": "深圳市",
} "senderName": "叶先生2",
const dialogFormVisible = ref(false) "receiveCity": "福州市",
const modify = (item, index) => { "receiveName": "林先生",
dialogFormVisible.value = true "s_datetime": "2024-11-11 11:31:00"
form.senderCity = item.senderCity },
form.senderName = item.senderName {
form.receiverCity = item.receiverCity "express_no": "SF123456789",
form.receiverName = item.receiverName "senderCity": "深圳市",
formIndex = index "senderName": "叶先生3",
} "receiveCity": "福州市",
"receiveName": "林先生",
const modifyConfirm = () => { "s_datetime": "2024-11-11 11:31:00"
dialogFormVisible.value = false },
let item = expressList[formIndex] {
store.modify(form,formIndex) "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%;
height: 100vh; background-color: white;
line-height: 20px; line-height: 20px;
} }
.block-view {
width: 100%; .block-view {
display: flex; width: 100%;
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
} }
.top {
display: flex; .top {
justify-content: flex-start; display: flex;
width: 100%; flex-direction: row;
margin-left: 20px; justify-content: flex-start;
color: gray; padding: 20px;
font-size: 12px; color: gray;
} }
.top-time {
margin-left: 120px; .top-time {
} margin-left: 180px;
.express-view { }
display: flex;
flex-flow: row; .express-view {
justify-content: space-around; display: flex;
width: 100%; width: 100%;
} justify-content: space-around;
.express-no-view { }
display: flex;
flex-direction: column; .express-no-view {
} display: flex;
.arrow { flex-direction: column;
width: 40px; }
height: 18px;
} .city {
.city { font-size: large;
font-size: 20px; font-weight: 500;
margin-bottom: 10px; }
}
.sign { .user {
color: gray; margin-top: 10px;
} font-size: small;
.express-icon-view { color: gray;
width: 10%; }
display: flex;
flex-direction: row; .arrow {
justify-content: space-around; width: 40px;
} height: 10px;
.line-view { }
height: 0.5px;
width: 95%; .sign {
background-color: lightgray; font-size: small;
margin-top: 20px; margin-top: 10px;
margin-bottom: 20px; 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> </style>
Write Preview
Loading…
Cancel
Save