From 748b0784a0ce911fc8347abb23c0b51a95d922d4 Mon Sep 17 00:00:00 2001
From: cxy <1276771477@qq.com>
Date: Sat, 23 Nov 2024 22:05:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E6=94=B9=EF=BC=8C=E8=BF=98=E8=A6=81?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/View/express/ExpressForm.vue | 327 ++++++++----------
 frontend/src/View/express/ExpressList.vue | 387 +++++++++-------------
 2 files changed, 302 insertions(+), 412 deletions(-)

diff --git a/frontend/src/View/express/ExpressForm.vue b/frontend/src/View/express/ExpressForm.vue
index 556398f..f8cae45 100644
--- a/frontend/src/View/express/ExpressForm.vue
+++ b/frontend/src/View/express/ExpressForm.vue
@@ -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>
\ No newline at end of file
+
+<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>
diff --git a/frontend/src/View/express/ExpressList.vue b/frontend/src/View/express/ExpressList.vue
index 6861b48..64842ea 100644
--- a/frontend/src/View/express/ExpressList.vue
+++ b/frontend/src/View/express/ExpressList.vue
@@ -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>
\ No newline at end of file