204 lines
7.1 KiB
Vue
204 lines
7.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="订单状态"
|
|
v-model="name"></el-input>
|
|
<el-button class="ml-5" type="primary" @click="Search(name)" style="height: 25px;">搜索</el-button>
|
|
<el-button type="warning" @click="reset" style="height:25px">重置</el-button>
|
|
</div>
|
|
<!-- <div style="margin: 15px 0">-->
|
|
<!-- <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"-->
|
|
<!-- title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>-->
|
|
<!-- <template #reference>-->
|
|
<!-- <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">-->
|
|
<!-- <Remove />-->
|
|
<!-- </el-icon></el-button>-->
|
|
<!-- </template>-->
|
|
<!-- </el-popconfirm>-->
|
|
<!-- </div>-->
|
|
<!-- 数据展示-->
|
|
<el-table :data="orders" border style="width: 100%;margin: 15px 0" :header-cell-style="{ 'text-align': 'center' }"
|
|
@selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
|
|
<!-- <el-table-column type="selection" width="55"></el-table-column>-->
|
|
<el-table-column prop="id" label="序号" width="50"></el-table-column>
|
|
<el-table-column prop="type" label="类别" ></el-table-column>
|
|
<el-table-column prop="clothesType" label="类型"></el-table-column>
|
|
<el-table-column prop="specificDate" label="日期"></el-table-column>
|
|
<el-table-column prop="timeSlot" label="时间"></el-table-column>
|
|
<el-table-column prop="createTime" label="下单时间"></el-table-column>
|
|
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
|
<el-table-column label="购买客户" width="50">
|
|
<el-table-column label="姓名" prop="contactsSnapshot.name" />
|
|
<el-table-column label="联系方式" prop="contactsSnapshot.phone" />
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200">
|
|
<template #default="scope">
|
|
<el-button type="success" @click="editShow(scope.$index, scope.row,0)">订单详情</el-button>
|
|
<el-button type="success" @click="editShow(scope.$index, scope.row,1)">状态修改</el-button>
|
|
<!-- <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"-->
|
|
<!-- title="是否确认删除" @confirm="Delete(scope.row.id)" width=180>-->
|
|
<!-- <template #reference>-->
|
|
<!-- <el-button style="height: 25px" class="ml-5" type="danger">删除</el-button>-->
|
|
<!-- </template>-->
|
|
<!-- </el-popconfirm>-->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-config-provider style="padding: 10px 0" :locale="zhCn">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
|
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total" />
|
|
|
|
</el-config-provider>
|
|
<!-- 弹窗-->
|
|
<el-dialog v-model="dialogVisible" title="" width="500">
|
|
<el-form :model="order" label-width="auto" style="max-width: 600px" :disabled="disabled">
|
|
|
|
<el-form-item label="订单编号" >
|
|
<el-input v-model="order.id" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="类型">
|
|
<el-input v-model="order.clothesType" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="定金">
|
|
<el-input v-model="order.deposit" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="拍摄日期">
|
|
<el-input v-model="order.specificDate" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="拍摄时间段">
|
|
<el-input v-model="order.timeSlot" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="室内拍摄">
|
|
<el-input v-model="order.isIndoors" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="妆造">
|
|
<el-input v-model="order.isMakeup" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="摄影">
|
|
<el-input v-model="order.isPhotography" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="用户id">
|
|
<el-input v-model="order.userId" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="订单状态">
|
|
<el-input v-model="order.orderStatus"/>
|
|
</el-form-item>
|
|
<el-form-item label="创建时间">
|
|
<el-input v-model="order.createTime" disabled/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer #default="{ row, $index }">
|
|
<div class="dialog-footer">
|
|
<el-button @click="cancel">取消</el-button>
|
|
<el-button type="primary" @click="addType">
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref,onMounted,inject } from 'vue'
|
|
import myAxios from "@/api/myAxios";
|
|
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
|
import {ElMessage, genFileId, type UploadProps, type UploadRawFile} from "element-plus";
|
|
const orders = ref([{}])
|
|
const name = ref('')
|
|
|
|
onMounted(()=>{
|
|
getList()
|
|
})
|
|
//获取订单
|
|
const total = ref(0)
|
|
const getList = async () => {
|
|
const res = await myAxios.post('/advanceOrder/list',{...searchParams.value})
|
|
|
|
if (res.data.code === 1) {
|
|
orders.value = res.data.data.records
|
|
total.value = res.data.data.total
|
|
}else {
|
|
ElMessage({
|
|
message:res.data.message
|
|
})
|
|
return
|
|
}
|
|
}
|
|
const handleSelectionChange = (val:any)=>{
|
|
console.log(val)
|
|
}
|
|
//弹窗
|
|
const dialogVisible = ref(false)
|
|
const disabled = ref(true)
|
|
const order = ref({
|
|
id:0,
|
|
type:'',
|
|
clothesType:'',
|
|
deposit:'',
|
|
specificDate:'',
|
|
timeSlot:'',
|
|
isIndoors:0,
|
|
isMakeup:0,
|
|
isPhotography:0,
|
|
userId:0,
|
|
orderStatus:'',
|
|
createTime:''
|
|
})
|
|
const title = ref('')
|
|
const editShow = (index: number, row: any,flag:number) => {
|
|
flag ? (title.value= "修改订单",disabled.value = false): (title.value= "订单详情·",disabled.value = true)
|
|
dialogVisible.value = true
|
|
order.value = row
|
|
}
|
|
const cancel = () => {
|
|
dialogVisible.value = false
|
|
}
|
|
const addType =async () => {
|
|
dialogVisible.value = false
|
|
const res = await myAxios.post('/advanceOrder/update',{
|
|
id:order.value.id,
|
|
orderStatus:order.value.orderStatus
|
|
})
|
|
if(res.data.code === 1 ) {
|
|
ElMessage({
|
|
type: 'success',
|
|
message:'更新成功'
|
|
})
|
|
}else{
|
|
ElMessage.error(res.data.message)
|
|
}
|
|
}
|
|
//搜索
|
|
const Search = (data:any)=>{
|
|
searchParams.value.orderStatus = data
|
|
// searchParams.value.id = data
|
|
// searchParams.value.type = data
|
|
searchParams.value.current = 1
|
|
getList()
|
|
}
|
|
//重置
|
|
const reload : any = inject("reload")
|
|
const reset = ()=>{
|
|
reload()
|
|
}
|
|
//分页
|
|
const searchParams: any = ref({
|
|
current: 1,
|
|
pageSize: 5,
|
|
sortField: "id",
|
|
sortOrder: "descend"
|
|
})
|
|
const handleSizeChange = (newSize: any) => {
|
|
searchParams.value.pageSize = newSize
|
|
getList()
|
|
}
|
|
const handleCurrentChange = (Current: any) => {
|
|
searchParams.value.current = Current
|
|
getList()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |