优化前端地址
This commit is contained in:
闵宪瑞
parent
c8eda585cb
commit
392474f731
@ -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>
|
||||
<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 v-slot:empty>
|
||||
<el-empty description="数据去外太空了~" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="我要评价"
|
||||
width="500"
|
||||
>
|
||||
<!-- 分页控件 -->
|
||||
<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"
|
||||
style="max-width: 600px"
|
||||
:model="state.orderForm"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item
|
||||
prop="evaluate"
|
||||
label="评论内容"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '评论内容不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="state.orderForm.evaluate" :rows="4"
|
||||
type="textarea"/>
|
||||
<!-- 表单开始===============================================================================================================================-->
|
||||
<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
|
||||
prop="score"
|
||||
label="评分"
|
||||
>
|
||||
<el-rate v-model="state.orderForm.score" />
|
||||
<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>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="review(formRef)" >
|
||||
提 交
|
||||
</el-button>
|
||||
<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>
|
||||
|
||||
|
||||
</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);
|
||||
}
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
findLabels(value, options);
|
||||
return labels;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 删除订单
|
||||
* @param id
|
||||
*/
|
||||
const del = (id:any) => {
|
||||
frontRequest.delete(`/sys/order/${id}`).then(res =>{
|
||||
toast.success("删除成功~")
|
||||
getList()
|
||||
// 获取交易记录
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取列表数据
|
||||
*/
|
||||
function getList() {
|
||||
adminRequest.get("/sys/order/page",{ params: state.page}).then(res =>{
|
||||
state.getList = res.data.list;
|
||||
|
||||
})
|
||||
}
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
const selectedStatus = state.getOrderStatus[tab.index].status;
|
||||
state.page.orderStatus = selectedStatus;
|
||||
getList()
|
||||
// 新增交易记录
|
||||
const openAddDialog = () => {
|
||||
state.formData = {
|
||||
sort:1
|
||||
}
|
||||
state.dialogVisible = true
|
||||
}
|
||||
|
||||
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()
|
||||
})
|
||||
// 编辑交易记录
|
||||
const edit = (row: any) => {
|
||||
state.formData = row
|
||||
state.dialogVisible = true
|
||||
}
|
||||
|
||||
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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user