From 392474f7316a80ddab360f187117c9939077d1d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=97=B5=E5=AE=AA=E7=91=9E?=
 <9198107+min-xianrui@user.noreply.gitee.com>
Date: Mon, 24 Feb 2025 15:49:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/pages/address/index.vue | 347 +++++++++++++++++++--------------
 1 file changed, 202 insertions(+), 145 deletions(-)

diff --git a/ui/src/pages/address/index.vue b/ui/src/pages/address/index.vue
index e0cb06f..ac5e7ce 100644
--- a/ui/src/pages/address/index.vue
+++ b/ui/src/pages/address/index.vue
@@ -1,169 +1,226 @@
-<!--用户详情-->
 <template>
-	<el-tabs v-model="state.page.orderStatus"  @tab-click="handleClick">
-		<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
-			<el-table
-				:data="state.getList"
-				style="width: 100%"
-			>
-				<el-table-column prop="id" label="编号" />
-				<el-table-column prop="item.title" label="商品名称"  />
-				<el-table-column prop="price" label="图片"  >
-					<template #default="{ row }">
-						<img :src="row.item.image"  style="width: 100px; height: 100px;">
+	<div>
+		<!--增、查交易记录的按钮-->
+		<el-button type="primary" round @click="openAddDialog" size="small">添加</el-button>
+
+		<!--表格-->
+		<el-row>
+			<el-col :span="24">
+				<el-table v-loading="loading"  :data="state.getList">
+					<!--					列表结开始-->
+					<el-table-column prop="recipientName" label="收货人" align="center" />
+					<el-table-column prop="phone" label="电话/手机" align="center" />
+					<el-table-column prop="city" label="所在地区" align="center" />
+					<el-table-column prop="address" label="详细地址" align="center" />
+					<!--列表结束-->
+					<el-table-column label="操作" align="center" >
+						<template #default="scope">
+
+							<el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
+						</template>
+					</el-table-column>
+					<template v-slot:empty>
+						<el-empty description="数据去外太空了~" />
 					</template>
-				</el-table-column>
-				<el-table-column prop="price" label="购买单价"  />
-				<el-table-column prop="quantity" label="购买数量" />
-				<el-table-column prop="totalAmount" label="成交总价" />
-				<el-table-column prop="createdTime" label="购买时间" width="220" />
-				<el-table-column prop="addressDTO.city" label="收货地址" width="220" />
-				<el-table-column  label="操作" min-width="120">
-					<template #default="scope" >
-						<el-button link type="primary" size="small" v-if="state.page.orderStatus == 0" @click="update(scope.row,1)">开始发货</el-button>
-						<el-button link type="primary" size="small" v-if="state.page.orderStatus == 1" @click="update(scope.row,2)">确认收货</el-button>
-						<el-button link type="primary" size="small" v-if="state.page.orderStatus == 2" @click="update(scope.row,3)">我要评价</el-button>
-						<el-button link type="primary" size="small" v-if="state.page.orderStatus == 3" @click="del(scope.row.id)">删除订单</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-tab-pane>
-	</el-tabs>
-
-	<el-dialog
-		v-model="dialogVisible"
-		title="我要评价"
-		width="500"
-	>
-		<el-form
-			ref="formRef"
-			style="max-width: 600px"
-			:model="state.orderForm"
-			label-width="auto"
-			label-position="top"
-		>
-			<el-form-item
-				prop="evaluate"
-				label="评论内容"
-				:rules="[
-        {
-          required: true,
-          message: '评论内容不能为空',
-          trigger: 'blur',
-        },
-      ]"
+				</el-table>
+				<!-- 分页控件 -->
+				<el-pagination
+					v-if="state.query.total > 0"
+					:current-page="state.query.page"
+					:page-size="state.query.limit"
+					:total="state.query.total"
+					background layout="prev, pager, next"
+					@current-change="handlePageChange"
+				/>
+			</el-col>
+		</el-row>
+		<!-- 新增/编辑对话框 -->
+		<el-dialog v-model="state.dialogVisible" title="新增" width="50%">
+			<el-form
+				:model="state.formData"
+				ref="formRef"
+				label-width="100px"
 			>
-				<el-input v-model="state.orderForm.evaluate"    :rows="4"
-									type="textarea"/>
-			</el-form-item>
-			<el-form-item
-				prop="score"
-				label="评分"
-			>
-				<el-rate v-model="state.orderForm.score" />
-			</el-form-item>
-
-
-		</el-form>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button type="primary"  @click="review(formRef)" >
-					提 交
-				</el-button>
+				<!--				表单开始===============================================================================================================================-->
+				<el-form-item label="收货人" prop="recipientName" :rules="[{ required: true, message: '请输入收货人', trigger: 'blur' }]">
+					<el-input v-model="state.formData.recipientName"/>
+				</el-form-item>
+				<el-form-item label="电话/手机" prop="phone" :rules="[{ required: true, message: '请输入电话/手机', trigger: 'blur' }]">
+					<el-input v-model="state.formData.phone"/>
+				</el-form-item>
+				<el-form-item label="所在地区" prop="city" :rules="[{ required: true, message: '请输入所在地区', trigger: 'blur' }]">
+<!--					<el-input v-model.number="state.formData.city"/>-->
+					<el-cascader
+						style="width: 260px"
+						v-model="value"
+						:options="state.options"
+						:props="props"
+						@change="handleChange"
+					/>
+				</el-form-item>
+				<el-form-item label="详细地址" prop="address" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
+					<el-input v-model="state.formData.address"/>
+				</el-form-item>
+				<!--表单结束===============================================================================================================================-->
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="state.dialogVisible = false">取消</el-button>
+				<el-button type="primary" @click="saveTransaction(formRef)">保存</el-button>
 			</div>
-		</template>
-	</el-dialog>
-
-
+		</el-dialog>
+	</div>
 </template>
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { FormInstance, TabsPaneContext } from 'element-plus'
-
+// 记录数据
+import type {FormInstance, TabsPaneContext} from 'element-plus'
 const formRef = ref<FormInstance>()
-const state = reactive({
-	getOrderStatus:[
-		{name:"未发货",status:0},
-		{name:"已发货",status:1},
-		{name:"未评价",status:2},
-		{name:"已完成",status:3},
-	],
-	getList:[],
-	orderForm:{
-		score: 0
+const loading = ref(true)
+const state = reactive(<any>{
+	route:"api/address",
+	dialogVisible:false,
+	getList: [],//获取数据
+	query:{
+		total: 0, // 总记录数
+		page: 1, // 当前页码
+		limit: 5, // 每页显示的记录数
+		title:"",
+		status:0,
 	},
-	page:{
-		page:1,
-		limit:10,
-		order:'desc',
-		orderStatus:0,
+	formData:{},
+	cateList:[],
+	options:[],
+})
+const value = ref('')
+const props = {
+	expandTrigger: 'hover' as const,
+}
+
+/**
+ * 转成列表
+ * @param value
+ */
+const handleChange = (value:any) => {
+	const labels = getLabelsFromValue(value, state.options);
+	state.formData.city = labels
+
+}
+
+// 递归查找 label
+const getLabelsFromValue = (value:any, options:any) => {
+	const labels:any = [];
+	const findLabels = (value:any, options:any) => {
+		for (const item of options) {
+			if (item.value === value[0]) {
+				labels.push(item.label);
+				if (value.length > 1 && item.children) {
+					findLabels(value.slice(1), item.children);
+				}
+				break;
+			}
+		}
+	};
+	findLabels(value, options);
+	return labels;
+};
+
+
+// 获取交易记录
+const init = () => {
+	frontRequest.get(`${state.route}/page`, {
+		params: state.query
+	}).then((res:any) => {
+		state.getList = res.data.list
+		state.query.total = res.data.total
+	}).finally(() => {
+		loading.value = false
+	})
+
+}
+// 新增交易记录
+const openAddDialog = () => {
+	state.formData = {
+		sort:1
 	}
-})
-
-const dialogVisible = ref(false)
-
-
-/**
- * 删除订单
- * @param id
- */
-const del = (id:any) => {
-	frontRequest.delete(`/sys/order/${id}`).then(res =>{
-		toast.success("删除成功~")
-		getList()
-	})
+	state.dialogVisible = true
 }
-
-/**
- * 获取列表数据
- */
-function getList() {
-	adminRequest.get("/sys/order/page",{	params: state.page}).then(res =>{
-		state.getList = res.data.list;
-
-	})
+// 编辑交易记录
+const edit = (row: any) => {
+	state.formData = row
+	state.dialogVisible = true
 }
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-	const selectedStatus = state.getOrderStatus[tab.index].status;
-	state.page.orderStatus = selectedStatus;
-	getList()
-}
-
-const update = (data:any,status:number) => {
-	// if(status === 4){
-	// 	dialogVisible.value = true
-	// 	state.orderForm = {...data,evaluate:''}
-	// 	state.orderForm.status = 4
-	// 	return
-	// }
-	data.orderStatus = status
-	adminRequest.put("/sys/order",data).then(() =>{
-		toast.success("修改成功~")
-		getList()
-	})
-}
-
-onMounted(()=>{
-	getList()
-})
-const review = (formEl: FormInstance | undefined) => {
+// 保存记录
+const saveTransaction = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return
 	formEl.validate((valid) => {
 		if (valid) {
-			updateOrderItemApi(state.orderForm).then(res =>{
-				toast.success("修改成功~")
-				dialogVisible.value = false
-				getList()
-			})
+			state.formData.city = state.formData.city.toString()
+			if (state.formData.id) {
+				// 更新交易记录
+				frontRequest.put(`${state.route}`, state.formData).then(() =>{
+					init()
+					state.dialogVisible = false
+					ElMessage.success("提交成功~")
+				})
+			} else {
+				// 新增交易记录
+				frontRequest.post(`${state.route}`, state.formData).then(() =>{
+					init()
+					state.dialogVisible = false
+					ElMessage.success("提交成功~")
+				})
+			}
 		}
 	})
 }
+// 删除交易记录
+const del = async (id: number) => {
+	try {
+		await frontRequest.delete(`${state.route}/${id}`)
+		init()
+		ElMessage.success("删除成功~")
+	} catch (error) {
+		ElMessage.error("删除失败~")
+	}
+}
 
+// 页码改变时的处理函数
+const handlePageChange = (page: number) => {
+	state.query.page = page
+	init()
+}
 
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+	// 根据 tab 的 name 属性更新状态
+	const selectedStatus = state.getStatus[tab.index].status;
+	state.query.status = selectedStatus;
+	init();
+};
+
+// 页面加载时获取交易记录
+onMounted(() => {
+	init()
+	frontRequest.get(`/api/area/tree`).then((res:any) => {
+		console.log(res)
+		state.options = res.data
+	})
+})
 </script>
-
-
 <style scoped>
+.dialog-footer {
+	text-align: right;
+}
+:deep(.el-upload) {
+	border: 1px dashed var(--el-border-color);
+	border-radius: 6px;
+	cursor: pointer;
+	position: relative;
+	overflow: hidden;
+	transition: var(--el-transition-duration-fast);
+}
+
+:deep(.el-upload:hover) {
+	border-color: var(--el-color-primary);
+}
 
 </style>
 <route lang="json">