优化前端地址
This commit is contained in:
闵宪瑞
parent
c8eda585cb
commit
392474f731
@ -1,169 +1,226 @@
|
|||||||
<!--用户详情-->
|
|
||||||
<template>
|
<template>
|
||||||
<el-tabs v-model="state.page.orderStatus" @tab-click="handleClick">
|
<div>
|
||||||
<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
|
<!--增、查交易记录的按钮-->
|
||||||
<el-table
|
<el-button type="primary" round @click="openAddDialog" size="small">添加</el-button>
|
||||||
:data="state.getList"
|
|
||||||
style="width: 100%"
|
<!--表格-->
|
||||||
>
|
<el-row>
|
||||||
<el-table-column prop="id" label="编号" />
|
<el-col :span="24">
|
||||||
<el-table-column prop="item.title" label="商品名称" />
|
<el-table v-loading="loading" :data="state.getList">
|
||||||
<el-table-column prop="price" label="图片" >
|
<!-- 列表结开始-->
|
||||||
<template #default="{ row }">
|
<el-table-column prop="recipientName" label="收货人" align="center" />
|
||||||
<img :src="row.item.image" style="width: 100px; height: 100px;">
|
<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>
|
</template>
|
||||||
</el-table-column>
|
</el-table>
|
||||||
<el-table-column prop="price" label="购买单价" />
|
<!-- 分页控件 -->
|
||||||
<el-table-column prop="quantity" label="购买数量" />
|
<el-pagination
|
||||||
<el-table-column prop="totalAmount" label="成交总价" />
|
v-if="state.query.total > 0"
|
||||||
<el-table-column prop="createdTime" label="购买时间" width="220" />
|
:current-page="state.query.page"
|
||||||
<el-table-column prop="addressDTO.city" label="收货地址" width="220" />
|
:page-size="state.query.limit"
|
||||||
<el-table-column label="操作" min-width="120">
|
:total="state.query.total"
|
||||||
<template #default="scope" >
|
background layout="prev, pager, next"
|
||||||
<el-button link type="primary" size="small" v-if="state.page.orderStatus == 0" @click="update(scope.row,1)">开始发货</el-button>
|
@current-change="handlePageChange"
|
||||||
<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-col>
|
||||||
<el-button link type="primary" size="small" v-if="state.page.orderStatus == 3" @click="del(scope.row.id)">删除订单</el-button>
|
</el-row>
|
||||||
</template>
|
<!-- 新增/编辑对话框 -->
|
||||||
</el-table-column>
|
<el-dialog v-model="state.dialogVisible" title="新增" width="50%">
|
||||||
</el-table>
|
<el-form
|
||||||
</el-tab-pane>
|
:model="state.formData"
|
||||||
</el-tabs>
|
ref="formRef"
|
||||||
|
label-width="100px"
|
||||||
<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-input v-model="state.orderForm.evaluate" :rows="4"
|
<!-- 表单开始===============================================================================================================================-->
|
||||||
type="textarea"/>
|
<el-form-item label="收货人" prop="recipientName" :rules="[{ required: true, message: '请输入收货人', trigger: 'blur' }]">
|
||||||
</el-form-item>
|
<el-input v-model="state.formData.recipientName"/>
|
||||||
<el-form-item
|
</el-form-item>
|
||||||
prop="score"
|
<el-form-item label="电话/手机" prop="phone" :rules="[{ required: true, message: '请输入电话/手机', trigger: 'blur' }]">
|
||||||
label="评分"
|
<el-input v-model="state.formData.phone"/>
|
||||||
>
|
</el-form-item>
|
||||||
<el-rate v-model="state.orderForm.score" />
|
<el-form-item label="所在地区" prop="city" :rules="[{ required: true, message: '请输入所在地区', trigger: 'blur' }]">
|
||||||
</el-form-item>
|
<!-- <el-input v-model.number="state.formData.city"/>-->
|
||||||
|
<el-cascader
|
||||||
|
style="width: 260px"
|
||||||
</el-form>
|
v-model="value"
|
||||||
<template #footer>
|
:options="state.options"
|
||||||
<div class="dialog-footer">
|
:props="props"
|
||||||
<el-button type="primary" @click="review(formRef)" >
|
@change="handleChange"
|
||||||
提 交
|
/>
|
||||||
</el-button>
|
</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>
|
</div>
|
||||||
</template>
|
</el-dialog>
|
||||||
</el-dialog>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<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 formRef = ref<FormInstance>()
|
||||||
const state = reactive({
|
const loading = ref(true)
|
||||||
getOrderStatus:[
|
const state = reactive(<any>{
|
||||||
{name:"未发货",status:0},
|
route:"api/address",
|
||||||
{name:"已发货",status:1},
|
dialogVisible:false,
|
||||||
{name:"未评价",status:2},
|
getList: [],//获取数据
|
||||||
{name:"已完成",status:3},
|
query:{
|
||||||
],
|
total: 0, // 总记录数
|
||||||
getList:[],
|
page: 1, // 当前页码
|
||||||
orderForm:{
|
limit: 5, // 每页显示的记录数
|
||||||
score: 0
|
title:"",
|
||||||
|
status:0,
|
||||||
},
|
},
|
||||||
page:{
|
formData:{},
|
||||||
page:1,
|
cateList:[],
|
||||||
limit:10,
|
options:[],
|
||||||
order:'desc',
|
})
|
||||||
orderStatus:0,
|
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
|
||||||
}
|
}
|
||||||
})
|
state.dialogVisible = true
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除订单
|
|
||||||
* @param id
|
|
||||||
*/
|
|
||||||
const del = (id:any) => {
|
|
||||||
frontRequest.delete(`/sys/order/${id}`).then(res =>{
|
|
||||||
toast.success("删除成功~")
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
// 编辑交易记录
|
||||||
/**
|
const edit = (row: any) => {
|
||||||
* 获取列表数据
|
state.formData = row
|
||||||
*/
|
state.dialogVisible = true
|
||||||
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;
|
const saveTransaction = async (formEl: FormInstance | undefined) => {
|
||||||
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) => {
|
|
||||||
if (!formEl) return
|
if (!formEl) return
|
||||||
formEl.validate((valid) => {
|
formEl.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
updateOrderItemApi(state.orderForm).then(res =>{
|
state.formData.city = state.formData.city.toString()
|
||||||
toast.success("修改成功~")
|
if (state.formData.id) {
|
||||||
dialogVisible.value = false
|
// 更新交易记录
|
||||||
getList()
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
<route lang="json">
|
<route lang="json">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user