admin1/jiangchengfeiyi-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

写真预约添加服装、类别、日期组件完成

Browse Source
This commit is contained in:
yuanteng 2025-03-02 11:29:54 +08:00
parent 148c327370
commit 53f2651c99
18 changed files with 1875 additions and 1233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/layout/components/Aside.vue
View File

@ -73,8 +73,35 @@
<span slot="title">服务类商品中心</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="4">
<template #title>
<el-icon><HomeFilled/></el-icon>
<span>写真预约管理</span>
</template>
<el-menu-item index="/AddCostumes">
<el-icon><Menu /></el-icon>
<span slot="title">添加服装</span>
</el-menu-item>
<el-menu-item index="/ClothingGrade">
<el-icon><Menu /></el-icon>
<span slot="title">服装类别</span>
</el-menu-item>
<el-menu-item index="/ManagementCenter">
<el-icon><Menu /></el-icon>
<span slot="title">写真管理中心</span>
</el-menu-item>
<el-menu-item index="/AppointmentOrder">
<el-icon><Menu /></el-icon>
<span slot="title">预约订单</span>
</el-menu-item>
<el-menu-item index="/PendingOutfitOrder">
<el-icon><Menu /></el-icon>
<span slot="title">写真预约待处理订单</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="5">
<template #title>
<el-icon><HomeFilled /></el-icon>
<span>优惠券管理</span>
@ -89,7 +116,7 @@
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="5">
<el-sub-menu index="6">
<template #title>
<el-icon><HomeFilled/></el-icon>
<span>商品订单管理</span>
@ -110,44 +137,6 @@
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="6">
<template #title>
<el-icon><HomeFilled/></el-icon>
<span>写真预约管理</span>
</template>
<el-menu-item index="/ClothingGrade">
<el-icon><Menu /></el-icon>
<span slot="title">服装等级管理</span>
</el-menu-item>
<el-menu-item index="/CostumeDetails">
<el-icon><Menu /></el-icon>
<span slot="title">服装详情</span>
</el-menu-item>
<el-menu-item index="/AddCostumes">
<el-icon><Menu /></el-icon>
<span slot="title">添加服装</span>
</el-menu-item>
<el-menu-item index="/AppointmentOrder">
<el-icon><Menu /></el-icon>
<span slot="title">预约订单</span>
</el-menu-item>
<el-menu-item index="/ReservationInstructions">
<el-icon><Menu /></el-icon>
<span slot="title">预约须知</span>
</el-menu-item>
<el-menu-item index="/CostExplanation">
<el-icon><Menu /></el-icon>
<span slot="title">费用说明</span>
</el-menu-item>
<el-menu-item index="/timeManagement">
<el-icon><Menu /></el-icon>
<span slot="title">时间管理</span>
</el-menu-item>
<el-menu-item index="/TimeCenter">
<el-icon><Menu /></el-icon>
<span slot="title">预约时间中心</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="7">

84
src/layout/components/Header.vue
View File

@ -1,87 +1,3 @@
<!--<template>-->
<!-- <div style=" height: 70px; width: 1248px; display: flex;-->
<!-- justify-content: space-between; align-items: center;">-->
<!-- <div style=" display: flex; justify-content: center;-->
<!-- align-items: center; margin-left: 10px">-->
<!-- <el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px"><Expand/></el-icon>-->
<!-- <el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px"><Fold /></el-icon>-->
<!-- <el-breadcrumb separator="/">-->
<!-- <el-breadcrumb-item :to="{ path: currentPath}">{{ strArr[0] }}</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item><a :href="currentPath">{{ strArr[1] }}</a></el-breadcrumb-item>-->
<!-- </el-breadcrumb>-->
<!-- </div>-->
<!-- <div :style="{display: 'flex', justifyContent:'center', alignItems: 'center', marginRight: offset + 'px'}">-->
<!-- <el-avatar style="margin-right: 10px">-->
<!-- <img src="../assets/admin.jpg" alt="">-->
<!-- </el-avatar>-->
<!-- <el-dropdown style="cursor: pointer;" size="default">-->
<!-- <span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">-->
<!-- <span>{{ currentUser.username }}</span><el-icon class="el-icon&#45;&#45;right"><arrow-down /></el-icon>-->
<!-- </span>-->
<!-- <template #dropdown>-->
<!-- <el-dropdown-menu>-->
<!-- <el-dropdown-item @click="$router.push('/manage/person')">个人信息</el-dropdown-item>-->
<!-- <el-dropdown-item @click="logout">退出登录</el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </template>-->
<!-- </el-dropdown>-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<!--<script setup lang="ts">-->
<!--import {computed, onMounted, ref} from 'vue'-->
<!--import emitter from '@/utils/emitter'-->
<!--import { useRouter} from 'vue-router';-->
<!--import { ElMessage } from 'element-plus';-->
<!--import { pathInfo } from '@/store/pathInfo'-->
<!--const pathStore = pathInfo()-->
<!--const strArr = computed(() => pathStore.currentPathName.split('/'))-->
<!--const currentPath = computed(() => pathStore.currentPath)-->
<!--const router = useRouter()-->
<!--const offset = ref(20)-->
<!--const showLog = ref(false)-->
<!--const currentUser = ref('')-->
<!--onMounted(() => {-->
<!-- currentUser.value = JSON.parse(localStorage.getItem('user'))-->
<!--})-->
<!--const changeState = () => {-->
<!-- showLog.value = !showLog.value-->
<!-- emitter.emit('Aside', showLog.value)-->
<!-- if(showLog.value){-->
<!-- offset.value = -116-->
<!-- }else{-->
<!-- offset.value = 20-->
<!-- }-->
<!--}-->
<!--const logout = () => {-->
<!-- ElMessage({-->
<!-- message: '退出成功',-->
<!-- type: 'success'-->
<!-- })-->
<!-- router.push('/login')-->
<!-- localStorage.removeItem('user')-->
<!--}-->
<!--</script>-->
<!--<style scoped>-->
<!--:deep(.el-tooltip__trigger:focus-visible) {-->
<!-- outline: unset;-->
<!--}-->
<!--</style>-->
<template>
<div style=" height: 70px; width: 1248px; display: flex;
justify-content: space-between; align-items: center;">

30
src/layout/components/calendarUtil.vue
View File

@ -2,7 +2,8 @@
<el-calendar :disabled-date="disabledDate" class="calbox">
<template #date-cell="{ data }">
<div @click="dateForm(data)">
<p :class="[
<p
:class="[
selectedDates.includes(data.day)? 'is-selected' : '',
isFutureDate(data.day)? '' : 'disabled'
]"
@ -10,7 +11,8 @@
class="calendar-date-cell"
>
{{ data.day.split('-').slice(1).join('-') }}
{{ data.isSelected ? '✔️' : '' }}
<!-- {{ data.isSelected ? '✔️' : '' }} -->
<span v-if="selectedDates.includes(data.day)">✔️</span>
</p>
</div>
</template>
@ -107,9 +109,14 @@ onMounted(()=>{
}
})
const dateForm =(object : any)=>{ //赋值当前日期和弹出抽屉
Selectdate.value = object.day
periodObj.value.specificDate = object.day
drawer.value = true
const nowClick = new Date(object.date).toISOString().split('T')[0] //格式化时间 年-月-日
if(isFutureDate(nowClick)) {
Selectdate.value = object.day
periodObj.value.specificDate = object.day
drawer.value = true
} else {
return;
}
}
const closeForm =()=>{ //缺重置表单
drawer.value = false
@ -238,7 +245,7 @@ const disabledDate = (date: any) => { //判断日期是否是今天
return dateString < todayString
}
const isFutureDate = (date: any) => { //禁用之前的
const today = new Date().toISOString().split('T')[0]
const today = new Date().toISOString().split('T')[0]
return date >= today
}
const handleDateClick = (date: any) => {
@ -271,4 +278,15 @@ const handleDateClick = (date: any) => {
.timebox {
margin-bottom: 20px;
}
.calendar-date-cell {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.disabled {
color: #dcdfe6;
pointer-events: none;
}
</style>

251
src/layout/components/outfitCalendarUtil.vue Normal file
View File

@ -0,0 +1,251 @@
<template>
<el-calendar :disabled-date="disabledDate" class="calbox">
<template #date-cell="{ data }">
<div @click="dateForm(data)">
<p :class="[
selectedDates.includes(data.day) ? 'is-selected' : '',
isFutureDate(data.day) ? '' : 'disabled'
]" @click="handleDateClick(data.day)" class="calendar-date-cell">
{{ data.day.split('-').slice(1).join('-') }}
<!-- {{ data.isSelected ? '✔️' : '' }} -->
<span v-if="selectedDates.includes(data.day)">✔️</span>
</p>
</div>
</template>
</el-calendar>
<el-drawer v-model="drawer" :title="'当前选择的日期是：' + periodObj.specificDate" :with-header="true" @open="drawerOpen"
@closed="drawerClean">
<div style="margin-bottom: 20px;">选择当天时间点</div>
<div class="timebox" v-for="(item, index) in periodObj.bookingTimeAddRequestList" style="margin-bottom: 40px">
<span>选择时间点</span>
<el-time-select
v-model="timePickArr[index]"
format='HH:mm'
style="width: 240px"
start="07:00"
step="00:05" end="20:00"
placeholder="选择时间点"
value-format="HH:mm"
:style="{ width: '236px', marginLeft: '20px' }"
@change="saveTime(index)"
/>
<el-button circle @click="addList(index)"><el-icon>
<Plus />
</el-icon></el-button>
<el-button circle @click="subList(index)" v-if="index > 0"><el-icon>
<Minus />
</el-icon></el-button>
</div>
<div style="display: flex; align-items: center">
<el-checkbox v-model="isBook" label="可否预约" size="large" style="margin-right: 15px" />
<el-button type="success" round @click="saveInfo">保存</el-button>
<el-button type="danger" round @click="closeForm">取消</el-button>
<el-button type="primary" round @click="resetForm">重置</el-button>
</div>
</el-drawer>
<el-button type="success" round @click="emittValue" style="margin: 50px 0 0 50px;">保存</el-button>
</template>
<script setup lang="ts">
import { ref, onMounted, defineEmits } from 'vue'
import { ElMessage } from 'element-plus';
import emitter from "@/utils/emitter";
const Selectdate = ref('')
const selectedDates = ref<string[]>([]) //选中的日期
const dateDrawerData: any = ref<{
visible: boolean
timeDataList: { value1: string; value2: [Date, Date] }[] //数组类型
}>({
visible: false, // 设定一个初始值
timeDataList: [] // 设定一个初始值
})
const drawer = ref(false)
const periodObj: any = ref(
{
specificDate: '',
isAvailable: 0,
bookingTimeAddRequestList: [
{
timePoint: ''
}
]
}
)
const periodMap = new Map() //将点击保存的数据存入map，也为后续遍历出来做准备
const timePickMap = new Map() //暂存每次的时间段
const count = ref(0) //计数君
const timePickArr: any = ref([])
const minArr: any = ref([])
const maxArr: any = ref([])
const isTrue = ref(false) //判断当前键是否有值
const isBook = ref(true)
const appointmentDateAddRequestList: any = ref([]) //传给后端的预约时间
const emit = defineEmits(['calendar-Info'])
onMounted(() => {
for (let i = 0; i <= 50; i++) { //初始化人数选择的数组
minArr.value[i] = 5 + i
maxArr.value[i] = 6 + i
}
})
const dateForm = (object: any) => { //赋值当前日期和弹出抽屉
const nowClick = new Date(object.date).toISOString().split('T')[0] //格式化时间 年-月-日
if (isFutureDate(nowClick)) {
Selectdate.value = object.day
periodObj.value.specificDate = object.day
drawer.value = true
} else {
return;
}
}
const closeForm = () => { //缺重置表单
drawer.value = false
}
const addList = (index: number) => { //添加当前日期的时间段
count.value += 1
if (count.value <= 15 && judgeNull(periodObj.value.bookingTimeAddRequestList)) {
periodObj.value.bookingTimeAddRequestList.push(
{
timePoint: ''
}
)
timePickArr.value.push([])
} else {
ElMessage({
type: 'warning',
message: '请填写完前一段日期后再添加'
})
}
// console.log(index,'--->',periodObj.value);
}
const subList = (index: number) => {
if (index != 0) {
periodObj.value.bookingTimeAddRequestList.splice(index, 1)
}
}
const saveTime = (index: number) => { //将时间点存入periodObj对象中
console.log('时间点数组--->',timePickArr.value);
try {
periodObj.value.bookingTimeAddRequestList[index].timePoint = timePickArr.value[index]
} catch {
periodObj.value.bookingTimeAddRequestList[index].timePoint = ''
}
}
const saveInfo = () => { //保存当前日期的时间和人数信息
//时间段和人数判空
if (!judgeNull(periodObj.value.bookingTimeAddRequestList)) {
ElMessage({
type: 'warning',
message: '请填写完整时间段和人数！'
})
return;
}
isBook ? periodObj.value.isAvailable = 1 : periodObj.value.isAvailable = 0
periodMap.set(periodObj.value.specificDate, periodObj.value)
timePickMap.set(periodObj.value.specificDate, timePickArr.value)
drawer.value = false
console.log('periodObj--->', periodObj.value);
}
const drawerClean = () => { //清空对象
periodObj.value = {
specificDate: Selectdate.value,
isAvailable: 0,
bookingTimeAddRequestList: [
{
timePoint: ''
}
]
}
timePickArr.value = []
count.value = 0;
}
const drawerOpen = () => { //抽屉打开时
isTrue.value = periodMap.has(periodObj.value.specificDate) //判断之前有没有存过这个值
if (isTrue.value) {
periodObj.value = periodMap.get(periodObj.value.specificDate)
timePickArr.value = timePickMap.get(periodObj.value.specificDate)
console.log('timePickArr--->', timePickArr.value);
}
}
const resetForm = () => { //重置表格
drawerClean() //视觉上先删除
if (isTrue.value) { //存过的一律从map中清除
periodMap.delete(periodObj.value.specificDate)
timePickMap.delete(periodObj.value.specificDate)
}
}
const emittValue = () => { //点击保存后将值传给父组件
appointmentDateAddRequestList.value.splice(0, appointmentDateAddRequestList.value.length) //防止用户狂点
periodMap.forEach(mapFun)
emit('calendar-Info', appointmentDateAddRequestList.value)
emitter.on('clear', () => { //清空日期map集合
periodMap.clear()
})
}
const mapFun = (value: any, key: any, map: any) => { //遍历map的统一函数
if (periodMap.has(key)) {
appointmentDateAddRequestList.value.push(value)
}
console.log(appointmentDateAddRequestList.value);
}
const judgeNull = (List: any) => { //时间段和人数统一判空方法
console.log('List--->', List);
if (List.some((item: any) => item.timePoint === '')) {
return false;
}
return true;
}
const disabledDate = (date: any) => { //判断日期是否是今天
const today = new Date()
const dateString = date.toISOString().split('T')[0]
const todayString = today.toISOString().split('T')[0]
return dateString < todayString
}
const isFutureDate = (date: any) => { //禁用之前的
const today = new Date().toISOString().split('T')[0]
return date >= today
}
const handleDateClick = (date: any) => {
const dateStr = date
if (isFutureDate(dateStr)) {
if (selectedDates.value.includes(dateStr)) {
selectedDates.value = selectedDates.value.filter(d => d !== dateStr)
} else {
selectedDates.value.push(dateStr)
if (!dateDrawerData.value[dateStr]) {
dateDrawerData.value[dateStr] = {
visible: true,
timeDataList: []
}
} else {
dateDrawerData.value[dateStr].visible = true;
}
}
}
}
</script>
<style scoped>
.calbox {
width: 550px;
height: 280px;
font-size: 12px;
--el-calendar-cell-width: 30px;
}
.timebox {
margin-bottom: 20px;
}
.calendar-date-cell {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.disabled {
color: #dcdfe6;
pointer-events: none;
}
</style>

29
src/router/routes.ts
View File

@ -86,40 +86,25 @@ export const routes = [
component: ()=> import("../views/CostumeAppointments/ClothingGrade.vue")
},
{
path: '/CostumeDetails',
path: '/ManagementCenter',
name: '服装详情管理',
component: ()=> import("../views/CostumeAppointments/CostumeDetails.vue")
component: ()=> import("../views/CostumeAppointments/ManagementCenter.vue")
},
{
path: '/AppointmentOrder',
name: '写真预约订单管理',
component: ()=> import("../views/CostumeAppointments/AppointmentOrder.vue")
},
{
path: '/PendingOutfitOrder',
name: '待处理写真预约订单',
component: ()=> import("../views/CostumeAppointments/PendingOutfitOrder.vue")
},
{
path: '/AddCostumes',
name: '添加服装',
component: ()=> import("../views/CostumeAppointments/AddCostumes.vue")
},
{
path: '/ReservationInstructions',
name: '预约须知',
component: ()=> import("../views/CostumeAppointments/ReservationInstructions.vue")
},
{
path: '/CostExplanation',
name: '费用说明',
component: ()=> import("../views/CostumeAppointments/CostExplanation.vue")
},
{
path: '/timeManagement',
name: '时间管理',
component: ()=> import("../views/CostumeAppointments/timeManagement.vue")
},
{
path: '/TimeCenter',
name: '预约时间中心',
component: ()=> import("../views/CostumeAppointments/TimeCenter.vue")
},
{
path: '/refund',
name:'退款管理',

2
src/views/Commodity/AddProduct.vue
View File

@ -32,7 +32,7 @@
<el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
</el-form-item>
<el-form-item label="产品价格" prop="price">
<el-input-number v-model="form.price" min="0.01" :precision="2" :step="0.5" />
<el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
<p>元</p>
</el-form-item>
</div>

11
src/views/Commodity/MerchandiseCenter.vue
View File

@ -26,7 +26,7 @@
</div>
<!-- 数据展示 -->
<el-table :data="tableData" border stripe header-cell-class-name="headerBg"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange" @select="selectChange"
:header-cell-style="{ 'text-align': 'center' }">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="商品编号" width="80">
@ -183,7 +183,7 @@ import myAxios from "@/api/myAxios";
import { handleChange, removePic, handleRemove,Exceed_ProductImg, ImgArr ,editForm} from '@/utils/entityProduct/picUpload';
// import { handleChange, handleRemove, form, Exceed_ProductImg } from '@/utils/entityProduct/picUpload';
const total = ref(0); //总页数
const idList = ref([]);
const idList = ref<Number[]>([]);
const searchParams: any = ref({ //封装分页
current: 1, //当前页码
pageSize: 5, //每页显示条数
@ -348,6 +348,13 @@ const delBatch = async ()=>{
}
}
const handleSelectionChange =()=>{}
const selectChange =(selection: any, row : any)=> { //selction是对象数组，row是当前行对象
idList.value.splice(0,idList.value.length) //删掉
selection.forEach((item: any)=> {
idList.value.push(item.id)
})
// console.log('idList--->',idList.value);
}
</script>
<style scoped>

339
src/views/CostumeAppointments/AddCostumes.vue
View File

@ -1,112 +1,164 @@
<template>
<div>
<el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
<el-form-item label="添加服装图片">
<el-upload
ref="uploadProductImg"
action="#"
list-type="picture-card"
:auto-upload="false"
multiple="true"
:on-remove="handleRemove"
@change="(event: any) => handleChange(event, 0)"
:on-exceed="Exceed_ProductImg"
limit="1" >
<el-icon>
<Plus />
</el-icon>
</el-upload>
<div class="totalBox">
<div class="fromBox">
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
<el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px;" size="large">
<div class="totalPicture">
<div>
<el-form-item label="添加写真展示图片">
<!-- 下面的event的作用,传入当前事件对象 -->
<el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
:on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)"
:on-exceed="Exceed_ProductImg" limit="1">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
<!-- 添加图文描述-->
<div>
<el-form-item label="添加服装详情图">
<el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
limit="1" :on-remove="handleRemove">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
</div>
<div class="NamePrice">
<div class="name">
<el-form-item label="体验课名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
</div>
<div class="price">
<el-form-item label="价格" prop="price">
<el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
<p>元</p>
</el-form-item>
<el-form-item label="添加效果图">
<el-upload
ref="uploadProductDetail"
action="#"
list-type="picture-card"
:auto-upload="false"
multiple="true"
:on-change="(event: any) => handleChange(event, 1)"
:on-exceed="Exceed_ProductDetail"
limit="1"
:on-remove="handleRemove"
>
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="服装名称" prop="name">
<el-input v-model="form.name" maxlength="30" placeholder="30字以内"/>
</el-form-item>
<el-form-item label="服装价格（元）" prop="price">
<el-input v-model="form.price" />
</el-form-item>
<el-form-item label="服装类别" prop="clothesType">
<el-select v-model="clothesType.value" placeholder="请选择" @change="(event:any) => loadForm(event)">
<el-option v-for="item in clothesType" :key="item.value" :label="item.label" :value="item.values" />
</div>
</div>
<!-- 拍摄场地：户外、室内、均可 -->
<div class="kinds">
<el-form-item label="拍摄场地" prop="type" style="width: 240px;">
<el-select v-model="form.shotScene" placeholder="请选择" @change="(event: any) => loadScene(event)" >
<el-option v-for="item in siteList" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="服装详情" prop="intro">
<el-input v-model="form.intro" maxlength="300" placeholder="300字以内"/>
<el-form-item label="服装类别" prop="type" style="width: 240px;">
<el-select v-model="form.categoryName" placeholder="请选择" @change="(event: any) => loadCategory(event)" >
<el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="numberSelect">
<el-form-item label="最小人数" prop="type" style="width: 240px;">
<el-select v-model="form.minNumber" @change="minNum()">
<el-option v-for="item in minArr" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="最大人数" prop="type" style="width: 240px;">
<el-select v-model="form.maxNumber" @change="maxNum()">
<el-option v-for="item in maxArr" :label="item" :value="item" />
</el-select>
</el-form-item>
</div>
<div class="totalButton">
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item>
</div>
</el-form>
</div>
<div>
<!-- <appointTime @time-Info="getInfo"></appointTime> -->
<outfitCalendarUtil @calendar-info="getInfo"></outfitCalendarUtil>
</div>
</div>
</template>
<script setup lang="ts">
import {Plus} from "@element-plus/icons-vue";
import {ElMessage, genFileId, type UploadProps, type UploadRawFile} from "element-plus";
import { ref, onMounted, inject, toRaw, effect } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, type UploadFile, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
import myAxios from "@/api/myAxios";
import {inject, ref ,onMounted} from "vue";
const fileSimple = ref()
const uploadProductImg : any = ref()
const uploadProductDetail : any = ref()
import outfitCalendarUtil from '@/layout/components/outfitCalendarUtil.vue';
const fileSimple = ref() //单个文件
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
const resetFormData = ref()
const form = ref({
name:'',
image:'',
effectImg:'',
intro:'',
price:'',
clothesType:''
name: '', //服装名字
price: '', //商品价格
shotScene: '', //拍摄场地
categoryName: '', //服装类别
goodImg: '', //商品图片url
detailImg: '', //图文详情url
minNumber: 0, //最小人数
maxNumber: 0, //最大人数
effectImg: [""], //写真效果图 暂时不用
bookingDateAddRequestList: [] //预约时间点，是否可预约，人数范围
})
const clothesType: any = ref([
{
values: '',
label: ''
//导入组件刷新
const reload: any = inject("reload")
const uploadProductImg: any = ref() //图片上传的ref绑定
const uploadProductDetail: any = ref() //图片上传的ref绑定
const typeList = ref<String[]>([]) //服装类别数组
const siteList = ref<String[]>(['室外','室内','均可']) //场地类型
const minArr = ref<Number[]>([]) //最小人数数组
const maxArr= ref<Number[]>([]) //最大人数数组
onMounted(() => {
getOutfitKind() //获取服装类别
for(let i = 0;i <=50 ; i++) { //初始化人数选择的数组
minArr.value[i] = 5+i
maxArr.value[i] = 6+i
}
])
onMounted(()=>{
getGrade()
})
const getGrade = async ()=>{
const res = await myAxios.post('/clothesGrade/list',{})
for(let i in res.data.data){
clothesType.value[i] = {
values: res.data.data[i].clothesType,
label:res.data.data[i].clothesType,
}
}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
}
const loadForm = (value: any) => {
form.value.clothesType = value
//将 服装类别 赋值到表格里
const loadCategory = (value: any) => {
form.value.categoryName = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
}
const reload : any = inject("reload")
const onSubmit = async () => {
const values = Object.values(form.value);
if (values.some(value => value === null || value === undefined || value === '')) {
//将 商品类别 赋值到表格里
const loadScene = (value: any) => {
form.value.shotScene = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
}
//提交表单
const onSubmit = async () => {
const values : any = Object.values(form.value);
// 使用some()方法来检查是否有任何值为空
console.log(form.value.bookingDateAddRequestList)
if (values.some((value:any) => value === null || value === undefined || value === '' || value === 0) || form.value.bookingDateAddRequestList.length == 0) {
ElMessage({
type:'warning',
message:'请检查表单数据是否完整填写'
type: 'warning',
message: '请检查表单数据是否完整填写'
})
return;
return; //空返回结束函数
}
const res = await myAxios.post('/clothesInfo/add', { ...form.value })
console.log(form.value);
const res = await myAxios.post('/photoProducts/add', {
name: form.value.name,
price: form.value.price,
minNumber: form.value.minNumber,
maxNumber: form.value.maxNumber,
shotScene: form.value.shotScene,
categoryName: form.value.categoryName,
introImg: form.value.goodImg,
detailImg: form.value.detailImg,
effectImg: toRaw(form.value.effectImg),
bookingDateAddRequestList: toRaw(form.value.bookingDateAddRequestList)
})
console.log(res.data);
if (res.data.code === 1) {
ElMessage({
type: 'success',
@ -118,18 +170,12 @@ const onSubmit = async () => {
return;
}
}
const resetFormData = ref()
const resetForm = () =>{
resetFormData.value.resetFields()
}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
}
//图片上传请求 此请求只要选择了图片，就会默认上传
const handleChange = async (file: any, flag: number) => {
fileSimple.value = file
let formData = new FormData()
formData.append("file", fileSimple.value.raw)
const res = await myAxios({
let formData = new FormData() //这一步很重要 创建一个FormData对象
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
url: '/file/upload/server/not_login',
method: 'post',
headers: {
@ -137,13 +183,19 @@ const handleChange = async (file: any, flag: number) => {
},
data: {
biz: "test",
// 取出formData对象中的file
file: formData.get("file")
}
})
if (res.data.code === 1) {
flag ? form.value.effectImg = res.data.data : form.value.image = res.data.data
//三元运算 当flag为0时，赋值给商品图片 flag为1时，赋值给详情图片
flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
}
}
//清除表单
const resetForm = () => {
resetFormData.value.resetFields()
}
const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片
uploadProductImg.value!.clearFiles()
const file = files[0] as UploadRawFile
@ -156,9 +208,92 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => { //覆盖商
file.uid = genFileId()
uploadProductDetail.value!.handleStart(file)
}
const getInfo =(info:any)=>{
console.log('info-->',info);
// timeInfo.value = info
form.value.bookingDateAddRequestList = info
}
const getOutfitKind = async ()=> { //获取服装类别
const res = await myAxios.post('/photoCategory/list',{})
for(let key in res.data.data) {
typeList.value.push(res.data.data[key].name)
}
}
const minNum =()=>{ //最小人数不能大于最大人数
if(form.value.minNumber > form.value.maxNumber && form.value.maxNumber != 0) {
ElMessage({
type: 'warning',
message: '最小人数不能大于最大人数'
})
form.value.minNumber = 0
return;
}
}
const maxNum =()=>{
if(form.value.maxNumber < form.value.minNumber) {
ElMessage({
type: 'warning',
message: '最大人数不能小于最小人数'
})
form.value.maxNumber = 0
return;
}
}
</script>
<style scoped>
.totalBox {
display: flex;
}
.fromBox {
width: 700px;
height: 750px;
}
.totalPicture {
display: flex;
}
.NamePrice {
display: flex;
}
.kinds {
display: flex;
}
.totalButton {
display: flex;
justify-content: space-evenly;
/* 盒子里面水平分隔开 */
}
.midBox {
display: flex;
}
.date-picker {
flex: 0.3;
/* 日期选择区域占据左边 */
display: inline-block;
margin-bottom: 10px;
}
.father {
display: flex;
justify-content: space-around;
align-items: center;
border: 1px solid red;
}
.box {
margin-bottom: 20px;
/* 每个日期或时间段之间的间距 */
border: 1px solid yellow;
}
.inner {
margin-bottom: 10px;
border: 1px solid orange;
}
.numberSelect {
display: flex;
}
</style>

382
src/views/CostumeAppointments/AppointmentOrder.vue
View File

@ -1,204 +1,244 @@
<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 style="margin-bottom: 20px">
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search" placeholder="请输入订单编号"
v-model="orderNumber"></el-input>
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
<el-button type="warning" @click="reset" style="height:30px">重置</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 v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
<!-- <el-table-column type="selection" width="55" fixed="left"></el-table-column> -->
<el-table-column prop="id" label="订单序号" width="80">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
<!-- <el-table-column prop="userName" label="用户名" width="120"></el-table-column> -->
<el-table-column label="所购买的商品" width="150">
<el-table-column label="展开" type="expand" width="150">
<template #default="props">
<el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
<el-table-column label="商品名称" prop="goodSnapshot.name" width="200"/>
<el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
<template #default="scope">
<div>
<img :src="scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
</div>
</template>
</el-table-column>
<el-table-column label="类别" prop="goodSnapshot.type" width="200"/>
<el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
<!-- <el-table-column label="是否是限定商品" prop="goodSnapshot.festivalOrder" width="150"/>-->
<el-table-column label="数量" prop="quantity" width="200"/>
<el-table-column label="总价" prop="itemTotalAmount" width="200"/>
<el-table-column label="预约日期" prop="reservationDate" width="200"></el-table-column>
<el-table-column label="预约时间段" prop="timeSlot" width="200"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="联系人信息" width="180">
<el-table-column prop="contactsSnapshot.name" label="姓名" />
<el-table-column prop="contactsSnapshot.phone" label="手机号" width="180"/>
</el-table-column>
<!-- <el-table-column label="优惠券信息" width="50">-->
<!-- <el-table-column prop="couponSnapshot.name" label="优惠卷名称" />-->
<!-- <el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" /> -->
<!-- </el-table-column>-->
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
<el-table-column label="操作" width="220px" fixed="right">
<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>-->
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
详情
</el-button>
<!-- <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="openShipmentDialog(scope.row.id)" > &lt;!&ndash; @click="deliverGoods(scope.row)"&ndash;&gt;-->
<!-- 发货-->
<!-- </el-button>-->
<!-- <el-button :disabled="!['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>-->
<!-- 取消订单-->
<!-- </el-button>-->
<el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="danger" plain>
退款
</el-button>
</template>
</el-table-column>
</el-table>
<el-config-provider style="padding: 10px 0" :locale="zhCn">
<!-- 分页器 -->
<div style="padding: 10px 0">
<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" />
</div>
<!-- 弹窗-->
<el-dialog title="订单详情信息" v-model="DialogVisible" width="60%">
<el-form label-width="100px" size="default" :model="editForm" :disabled="disabled">
<div style="display: flex">
<el-form-item label="订单编号" style="width: 400px">
<el-input v-model="editForm.orderNumber" autocomplete="off"></el-input>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="联系人姓名" style="width: 300px">
<el-input v-model="editForm.contactsSnapshot.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" style="width: 300px">
<el-input v-model="editForm.contactsSnapshot.phone" autocomplete="off"></el-input>
</el-form-item>
</div>
<!-- 这里的商品明细就不放图片了 -->
<div style="display: flex">
<el-form-item label="订单总金额" style="width: 250px">
<el-input v-model="totalAmount" autocomplete="off"></el-input>
</el-form-item>
</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="优惠价格" style="width: 250px">
<el-input v-model="editForm.couponSnapshot.conditionAmount" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="订单编号" >
<el-input v-model="order.id" disabled/>
</div>
<el-form-item label="订单实付金额" style="width: 250px">
<el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
</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 label="订单状态" style="width: 250px">
<el-input v-model="editForm.orderStatus" autocomplete="off"></el-input>
</el-form-item>
<div style="display: flex">
<el-form-item label="下单时间" style="width: 300px;">
<el-input v-model="editForm.createTime" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="更新时间" style="width: 300px;">-->
<!-- <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
<!-- </el-form-item>-->
</div>
</el-form>
<template #footer #default="{ row, $index }">
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="addType">
确定
</el-button>
<el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
<el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref,onMounted,inject } from 'vue'
<script lang="ts" setup>
import { onMounted, ref } 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:''
})
import { ElMessage } from "element-plus";
import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
import emitter from "@/utils/emitter";
const tableData: any = ref([]); //表单展示数据
const total = ref(0);
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 disabled = ref(true)
const editForm: any = ref({});//编辑表单
const shipment:any = ref({
trackingNumber: null
})//物流单号
const DialogVisible = ref(false); //详情展示
const orderNumber = ref('')
const searchParams: any = ref({ //封装分页
current: 1, //当前页码
pageSize: 5, //每页显示条数
sortField: "id", //根据ID分类
sortOrder: "descend", //降序
orderType: 'service'
})
const loading = ref(false)
onMounted(() => {
getOrderList() //页面加载获取订单列表
})
const handleSizeChange = (newSize: any) => {
searchParams.value.pageSize = newSize
getList()
searchParams.value.pageSize = newSize //新的页面数
getOrderList()
}
const handleCurrentChange = (Current: any) => {
searchParams.value.current = Current
getList()
getOrderList()
}
const handleSelectionChange = (row: any) => {
// id.value = JSON.parse(JSON.stringify(row));
}
//获取写真预约订单列表
const getOrderList = async () => {
try {
searchParams.value.orderNumber = orderNumber.value
const res = await myAxios.post('/advanceOrder/list', { ...searchParams.value });
console.log('订单信息--->', res.data.data);
if (res.data.code === 1) {
tableData.value = res.data.data.records;
total.value = parseInt(res.data.data.total)
console.log('表单信息--->', tableData.value);
} else {
ElMessage({
message: '获取数据失败',
});
}
} catch (error) {
ElMessage({
message: '发生错误',
});
}
}
const totalAmount = ref(0)
const couponAmount = ref(0)
//查看订单详情
const showDetail = (index: number, row: any) => {
title.value = "订单详情"
DialogVisible.value = true;
if (row.couponSnapshot !== null) {
couponAmount.value = row.couponSnapshot.conditionAmount;
}
totalAmount.value = row.totalAmount + couponAmount.value;
editForm.value = row;
console.log('editForm--->',editForm.value);
};
const deleteOrder = async (row : any) => { //微信退款
loading.value = true
console.log('row-->',row)
const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //传入订单号取消订单并退款
console.log(res)
setTimeout(()=>{
if(res.data.code === 1) {
SuccessInfo('退款成功')
getOrderList()
loading.value = false
}
},10000)
}
const reset = () => { //重置搜索框
orderNumber.value = ''
};
const load = () => {
getOrderList()
} //搜索的方法
const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取消)
console.log('点击的这一行--->',row);
const res = await myAxios.post('/order/cancel/id',{ id: row.id })
if(res.data.code === 1) {
getOrderList()
SuccessInfo('取消订单成功')
} else {
ErrorInfo('请求错误')
}
}
</script>
<style scoped>
<style lang="scss" scoped>
/* 使用 ::v-deep 来修改表头的对齐方式 */
::v-deep .el-table__header th {
text-align: center; /* 表头居中 */
font-size: 14px; /* 设置字体大小 */
font-weight: bold; /* 设置字体加粗 */
font-family: 'Arial', sans-serif; /* 设置字体 */
}
</style>

316
src/views/CostumeAppointments/ClothingGrade.vue
View File

@ -1,223 +1,179 @@
<template>
<div style="margin-bottom: 10px;">
<el-button type="success" @click="add">添加等级</el-button>
</div>
<el-table :data="orders" border stripe header-cell-class-name="headerBg"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
:header-cell-style="{ 'text-align': 'center' }">
<el-table-column prop="id" label="序号" width="50"></el-table-column>
<el-table-column prop="image" label="图片">
<template #default="scope">
<div>
<img :src="scope.row.image" alt="" style="height: 50px;">
</div>
</template>
</el-table-column>
<el-table-column prop="clothesType" label="等级" ></el-table-column>
<el-table-column prop="minPrice" label="最低价（元）" ></el-table-column>
<el-table-column prop="maxPrice" label="最高价（元）" ></el-table-column>
<el-table-column prop="brief" label="简介" ></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button type="success" @click="change(scope.$index, scope.row)">修改等级</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-dialog v-model="dialogVisible" title="服装等级" width="500">
<el-form :model="order" label-width="auto" style="max-width: 600px">
<el-form-item label="添加类别图片">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
multiple="true"
:on-remove="handleRemove"
@change="(event: any) => handleChange(event)"
limit="1" >
<el-icon>
<Plus />
</el-icon>
</el-upload>
<div style="margin-bottom: 10px;">
<el-button type="success" @click="showForm">添加类别</el-button>
</div>
<el-dialog v-model="dialogVisible" title="服装类别" width="500">
<el-form :model="typeForm" label-width="auto" style="max-width: 600px" v-loading="loading">
<el-form-item label="类别名">
<el-input v-model="typeForm.typeName" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="order.clothesType"/>
</el-form-item>
<el-form-item label="最低价(元)">
<el-input v-model="order.minPrice" />
</el-form-item>
<el-form-item label="最高价(元)">
<el-input v-model="order.maxPrice"/>
</el-form-item>
<el-form-item label="简介">
<el-input v-model="order.brief" maxlength="30" placeholder="30字以内"/>
</el-form-item>
</el-form>
<!-- <el-form-item label="备注">
<el-input v-model="typeForm.typeIntro" />
</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 type="primary" @click="addOrUpdateType" >
提交
</el-button>
</div>
</template>
</el-dialog>
<!-- 数据展示层 -->
<el-table :data="tableData" border style="width: 100%;" :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="类别编号"></el-table-column>
<el-table-column prop="name" label="类别名称"></el-table-column>
<el-table-column prop="operation" label="操作">
<template #default="scope">
<el-button type="success" @click="editShowForm(scope.$index, scope.row)">修改类别</el-button>
<!-- scope.$index是当前行 第一行为0 -->
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
title="是否确认删除" @confirm="Delete_type(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>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue'
import myAxios from "@/api/myAxios";
import {ElMessage, type UploadProps} from "element-plus";
onMounted(()=>{
getOrder()
import { ElMessage, type UploadProps, type UploadUserFile} from 'element-plus';
import { ErrorInfo, SuccessInfo } from '@/utils/messageInfo';
import { onMounted, ref } from 'vue'
import myAxios from '@/api/myAxios';
const fileSimple = ref() //单个文件
const selectedItems = ref([])
const dialogVisible = ref(false)
// const submitable = ref(true) //提交按钮禁用状态
const loading = ref(false) //加载
const typeImg: any = ref<UploadUserFile[]>([]) //商品类别图片
// const imgMap = new Map() //商品类别的map集合
//表单数据
const typeForm = ref({
id: 0,
typeName: '',
// typeIntro: ''
})
const total = ref(0)
const orders = ref([{}])
const flag = ref(0)//请求类型
const dialogVisible = ref(false)//弹窗
const selectedItems = ref([])
const getOrder = async ()=>{
const res = await myAxios.post('/clothesGrade/list')
console.log(res)
//表格数据
const tableData = ref([])
//旗帜 表示点击添加类别(0) 和 点击修改类别两个状态(1)，因为我们共用一个表格
const flag = ref(0)
const typeList = ref([])
//老套路 页面加载必须获取类别列表
onMounted(() => {
getTypeList()
})
//获取类别列表
const getTypeList = async () => {
const res = await myAxios.post('/photoCategory/list')
console.log(res.data.data)
if (res.data.code === 1) {
orders.value = res.data.data
total.value = parseInt(res.data.data.total)
}else {
ElMessage({
message:'获取数据失败',
})
return
tableData.value = res.data.data
} else {
ElMessage.error('获取类别列表失败，请检查服务')
}
}
//添加
const add = async () => {
dialogVisible.value = true
//新增类别
const showForm = async () => {
resetForm()
typeImg.value.splice(0,typeImg.value.length)
dialogVisible.value = true;
flag.value = 0
}
//取消
const cancel = () => {
dialogVisible.value = false
restOrder()
resetForm()
}
//修改
const change = async (index:number, row: any) => {
order.value = row
dialogVisible.value = true
flag.value = 1
}
//提交
const addType = async () => {
if(
order.value.clothesType == ''||
order.value.image ==''||
order.value.brief == ''||
order.value.minPrice == 0||
order.value.maxPrice == 0) {
ElMessage({
type:'warning',
message:'内容不能为空'
})
return
}
dialogVisible.value = false
if(flag.value === 0){
const res =await myAxios.post('/clothesGrade/add',{
clothesType:order.value.clothesType,
image:order.value.image,
minPrice:order.value.minPrice,
maxPrice:order.value.maxPrice,
brief:order.value.brief,
//新增类别 很繁杂 不知道怎么改 只能不断判空
const addOrUpdateType = async () => {
//判空(*后期引入对象判空)
if (typeForm.value.typeName?.indexOf(' ') !== -1 ||
typeForm.value.typeName == '' ) {
ElMessage({
type: 'warning',
message: '不能为空格/空字符串'
})
if(res.data.code === 1) {
restOrder()
}else {
ElMessage.error(res.data.message)
return
}
//取消展示表单
dialogVisible.value = false;
if (flag.value === 0) {
const res = await myAxios.post('/photoCategory/add', {
//对齐后端请求体
name: typeForm.value.typeName,
// typeUrl: typeForm.value.typeUrl,
// typeIntro: typeForm.value.typeIntro
})
if (res.data.code === 1) {
//提交成功后，之间重置表格
resetForm()
SuccessInfo('添加成功')
} else {
ElMessage.error('提交失败')
}
}
if(flag.value === 1){
const res = await myAxios.post('/clothesGrade/update',{
clothesType:order.value.clothesType,
image:order.value.image,
minPrice:order.value.minPrice,
maxPrice:order.value.maxPrice,
brief:order.value.brief,
id:order.value.id
if( flag.value === 1 ) {
const res = await myAxios.post('/photoCategory/update',{
id : typeForm.value.id,
name: typeForm.value.typeName,
// typeUrl: typeForm.value.typeUrl,
// typeIntro: typeForm.value.typeIntro
})
if(res.data.code === 1) {
if (res.data.code === 1) {
//提交成功后，之间重置表格
ElMessage({
type:'success',
message:'更新成功'
type: 'success',
message: '更新成功'
})
}else {
ElMessage.error(res.data.message)
} else {
ElMessage.error('更新失败')
}
}
getOrder()
getTypeList()
}
//重置
const restOrder = ()=>{
order.value = {
image:'',
clothesType:'',
minPrice:0,
maxPrice:0,
brief:'',
id:0
//重置表单
const resetForm = () => {
typeForm.value = {
id: 0,
typeName: '',
// typeUrl: '',
// typeIntro: ''
}
}
const order=ref({
image:'',
clothesType:'',
minPrice:0,
maxPrice:0,
brief:'',
id:0
})
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
}
};
const handleSelectionChange = (row: any) => {
selectedItems.value = JSON.parse(JSON.stringify(row))
}
//删除
const Delete= async (index: number) => {
const res = await myAxios.post('/clothesGrade/delete',{ id : index })
if(res.data.code === 1) {
//编辑
const editShowForm = (index: number, row: any) => {
// typeImg.value.splice(0,typeImg.value.length) //先删除原先的
// typeImg.value.push({
// url: row.typeUrl
// })
dialogVisible.value = true
typeForm.value = row
flag.value = 1
console.log('本行--->',row)
}
//删除类别 请求体里只传id即可
const Delete_type = async (index: number) => {
console.log(typeof index)
const res = await myAxios.post('/photoCategory/delete', { id: index })
console.log(res)
if (res.data.code === 1) {
ElMessage({
type: 'success',
message:"删除成功"
message: '删除成功',
})
}
getOrder()
getTypeList()
}
const fileSimple = ref()
const handleChange = async (file: any) => {
fileSimple.value = file
let formData = new FormData()
formData.append("file", fileSimple.value.raw)
const res = await myAxios({
url: '/file/upload/server/not_login',
method: 'post',
headers: {
'content-Type': 'multipart/form-data'
},
data: {
biz: "test",
file: formData.get("file")
}
})
if ( res.data.code === 1) {
order.value.image = res.data.data
}
}
</script>
<style scoped>
</style>
<style scoped></style>

37
src/views/CostumeAppointments/CostExplanation.vue
View File

@ -1,37 +0,0 @@
<template>
<div>
<span style="float: left;">费用说明：</span>
<el-input
v-model="textarea"
style="width: 500px; float: left;"
:rows="2"
type="textarea"
autosize
placeholder="费用说明"
/>
</div>
<button @click="dy" style="display: inline-block">打印</button>
<el-button type="primary" @click="onSubmit" style="margin-left: 10px">提交</el-button>
<el-button type="primary" @click="resetForm" style="margin-left: 10px">重置</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const textarea = ref('')
const dy =()=>{
console.log(textarea.value)
}
//提交
const onSubmit=()=>{
}
//重置
const resetForm=()=>{
textarea.value = ''
}
</script>
<style>
</style>

298
src/views/CostumeAppointments/CostumeDetails.vue
View File

@ -1,298 +0,0 @@
<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="name" label="服装名称" ></el-table-column>
<el-table-column prop="clothesType" label="类型"></el-table-column>
<el-table-column prop="price" label="价格（元）"></el-table-column>
<el-table-column prop="image" label="类别图片" width="200">
<template #default="scope"><img :src="scope.row.image" alt="" style="height: 50px;"></template>
</el-table-column>
<el-table-column prop="image" label="效果图片" width="200">
<template #default="scope"><img :src="scope.row.effectImg" alt="" style="height: 50px;"></template>
</el-table-column>
<el-table-column label="操作" width="250px">
<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="服装图片">
<div v-if="order.image">
<img :src="order.image" class="thumbnail" style="width: 100px; height: 100px;" />
</div>
<el-upload
ref="uploadProductImg"
action="#"
list-type="picture-card"
:auto-upload="false"
multiple="true"
:on-remove="handleRemove"
:on-exceed="Exceed_ProductImg"
limit="1" >
<el-icon>
<Plus/>
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="商品图文">
<div v-if="order.effectImg">
<img :src="order.effectImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
</div>
<el-upload
ref="uploadProductDetail"
action="#"
list-type="picture-card"
:auto-upload="false"
multiple="true"
:on-remove="handleRemove"
:on-exceed="Exceed_ProductDetail"
limit="1" >
<el-icon>
<Plus/>
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="order.name" maxlength="25" placeholder="25字以内"/>
</el-form-item>
<el-form-item label="类型" prop="clothesType">
<el-select v-model="order.clothesType" @change="(event: any) => loadForm(event)">
<el-option v-for="item in clothesType" :key="item.value" :label="item.label" :value="item.values" />
</el-select>
</el-form-item>
<el-form-item label="价格(元)">
<el-input v-model="order.price"/>
</el-form-item>
<el-form-item label="详情">
<el-input v-model="order.intro"/>
</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="saveEdit">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import {ref, onMounted,inject} from 'vue'
import myAxios from "@/api/myAxios";
import {ElMessage, genFileId, type UploadProps, type UploadRawFile} from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
onMounted(()=>{
getList()
getGrade()
})
const orders = ref([{}])
const total = ref(0)
const getList = async ()=>{
const res = await myAxios.post('/clothesInfo/list/page',{...searchParams.value})
console.log(res)
if (res.data.code === 1) {
orders.value = res.data.data.records;
total.value = parseInt(res.data.data.total)
}else {
ElMessage({
message:'获取数据失败',
})
return
}
}
const name = ref('')//跟据名搜索
const dialogVisible = ref(false)
const order=ref({
id:0,
name:'',
price:'',
effectImg:'',
image:'',
intro:'',
clothesType:''
})
const clothesType: any = ref([
{
values: '',
label: ''
}
])
const getGrade = async ()=>{
const res = await myAxios.post('/clothesGrade/list',{})
for(let i in res.data.data){
clothesType.value[i] = {
values: res.data.data[i].clothesType,
label:res.data.data[i].clothesType,
}
}
}
const loadForm = (value: any) => {
order.value.clothesType = value
}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
}
const cancel = () => {
dialogVisible.value = false
}
const title = ref('')
const disabled = ref(true)
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 Delete=async (index : number)=>{
const res = await myAxios.post('/clothesInfo/delete',{ id : index })
console.log(res)
if (res.data.code === 1) {
ElMessage({
type: 'success',
message:'删除成功'
})
}else {
ElMessage({
message:'删除失败'
})
}
getList()
}
const searchParams: any = ref({ //封装分页
current: 1, //当前页码
pageSize: 5, //每页显示条数
sortField: "id", //根据ID分类
sortOrder: "descend" //降序
})
const handleSizeChange = (newSize: any) => {
searchParams.value.pageSize = newSize
getList()
}
const handleCurrentChange = (Current: any) => {
searchParams.value.current = Current
getList()
}
//搜索
const Search = (data:String)=>{
searchParams.value.name = data
searchParams.value.current = 1
getList()
}
const reload : any = inject("reload")
const reset =()=>{
reload()
}
const handleSelectionChange = (val:any)=>{
console.log(val)
}
const fileSimple = ref()
const handleChange = async (file: any) => {
fileSimple.value = file
let formData = new FormData()
formData.append("file", fileSimple.value.raw)
const res = await myAxios({
url: '/file/upload/server/not_login',
method: 'post',
headers: {
'content-Type': 'multipart/form-data'
},
data: {
biz: "test",
file: formData.get("file")
}
})
if ( res.data.code === 1) {
order.value.image = res.data.data
}
}
//批量删除
const idList = ref([])
const delBatch = async ()=>{
console.log(idList.value);
const res = await myAxios.post('/clothesInfo/delete',{
id: idList.value
})
if(res.data.code === 1) {
ElMessage({
type: 'success',
message: '批量删除成功'
})
getList()
} else {
ElMessage.error('删除失败')
}
}
const editForm : any = ref({})
//提交
const saveEdit =async ()=>{
dialogVisible.value = false
const res = await myAxios.post('/clothesInfo/update',{...editForm.value})
if(res.data.code === 1) {
ElMessage({
type: 'success',
message:'更新成功'
})
}else{
ElMessage.error(res.data.message)
}
}
const uploadProductImg : any = ref()
const uploadProductDetail : any = ref()
const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => { //覆盖商品详情图片
uploadProductDetail.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
uploadProductDetail.value!.handleStart(file)
}
const Exceed_ProductImg: UploadProps['onExceed'] = (files , flag) => { //覆盖商品照片
uploadProductImg.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
uploadProductImg.value!.handleStart(file)
}
</script>
<style scoped>
</style>

645
src/views/CostumeAppointments/ManagementCenter.vue Normal file
View File

@ -0,0 +1,645 @@
<template>
<!-- 修改前请注释以前的 -->
<!-- 搜索 -->
<div style="display: flex; align-items: center">
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入课程名称"
v-model="productName"></el-input>
<div>
<el-form-item label="" style="width: 200px; margin: 3px 10px 0 0;display: inline-block;">
<el-select size="default" v-model="state" placeholder="商品状态" @change="(event: any) => searchByState(event)">
<el-option label="已上架" value="1" />
<el-option label="已下架" value="0" />
</el-select>
</el-form-item>
</div>
<el-button class="ml-5" type="primary" @click="onSearch(productName)" style="height: 30px;">搜索</el-button>
<el-button type="warning" @click="reset" style="height:30px">重置</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="tableData" border stripe header-cell-class-name="headerBg"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }"
@selection-change="handleSelectionChange"
@select="selectChange"
:header-cell-style="{ 'text-align': 'center' }"
default-expand-all>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="课程编号" width="80">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column prop="goodImg" label="课程图片">
<template #default="scope">
<div>
<img :src="scope.row.introImg" alt="" style="height: 50px;">
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="课程名称"></el-table-column>
<el-table-column prop="price" label="单次价格" width="100"></el-table-column>
<el-table-column label="展开时间段" type="expand" width="80">
<template #default="{ $index }">
<!-- 放后端传来的预约时间 -->
<el-table :data="appointmentDateArr[$index]" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }">
<el-table-column label="是否可预约" prop="isAvailable">
<template #default="{ row }">
{{ row.isAvailable == 1 ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column label="日期" prop="specificDate" />
<el-table-column label="操作">
<template v-slot="scope">
<el-button size="small" @click="updateDay(scope.row)">
<div v-if="scope.row.isAvailable == 1">取消预约</div>
<div v-if="scope.row.isAvailable == 0">启用预约</div>
</el-button>
<el-button size="small" type="primary" @click="addDate(scope.row)">
添加日期
</el-button>
<el-button size="small" @click="openDrawer($index,scope.row)">
编辑
</el-button>
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled"
icon-color="red" title="是否确认删除" @confirm="deleteDate(scope.row.id)" width=180>
<template #reference>
<el-button class="ml-5" type="danger"
v-if="tableData[$index].bookingDateVOList.length>1">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="商品状态" width="80">
<template #default="scope">
<div>
<span style="margin-left: 10px" v-if="scope.row.isShelves == 1">上架</span>
<span style="margin-left: 10px" v-if="scope.row.isShelves == 0">下架</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="250px">
<template #default="scope">
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
详情
</el-button>
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
编辑
</el-button>
<el-button size="small" @click="handleOff(scope.row)">
<div v-if="scope.row.isShelves == 1">下架 </div>
<div v-if="scope.row.isShelves == 0">上架 </div>
</el-button>
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
title="是否确认删除" @confirm="deleteProduct(scope.row.id)" width=180>
<template #reference>
<el-button class="ml-5" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<div style="padding: 10px 0">
<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" />
</div>
<!-- 编辑/详情表单 -->
<el-dialog v-model="DialogVisible" :title="title">
<el-form label-width="100px" :disabled="disabled">
<el-form-item label="商品编号">
<el-input v-model="editForm.id" disabled></el-input>
</el-form-item>
<el-form-item label="商品图片">
<div v-if="editForm.introImg">
<img :src="editForm.introImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
</div>
<el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
:on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)" :on-exceed="Exceed_ProductImg"
limit="1">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="商品价格">
<el-input v-model="editForm.price"></el-input>
</el-form-item>
<el-form-item label="服装类别" prop="type" style="width: 240px;">
<el-select v-model="editForm.categoryName" placeholder="请选择" @change="(event: any) => loadCategory(event)">
<el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="拍摄场地" prop="type" style="width: 240px;">
<el-select v-model="editForm.shotScene" placeholder="请选择" @change="(event: any) => loadScene(event)">
<el-option v-for="item in siteList" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="最小人数" prop="type">
<el-select v-model="editForm.minNumber" style="width: 120px;" @change="minNum()">
<el-option v-for="item in minArr" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="最大人数" prop="type">
<el-select v-model="editForm.maxNumber" style="width: 120px;" @change="maxNum()">
<el-option v-for="item in maxArr" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="商品图文">
<div v-if="editForm.detailImg">
<img :src="editForm.detailImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
</div>
<el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
:on-remove="handleRemove" @change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
limit="1">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
<el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
</span>
</template>
</el-dialog>
<!-- 时间段抽屉 -->
<el-drawer v-model="drawer" :title="'当前日期：'+drawerDate.specificDate + '&emsp;服装名称：' + outfitName" direction="ltr"
@closed="closedDrawer">
<div style="margin-bottom: 20px">选择当天时间段和人数</div>
<div v-for="(item,index) in drawerDate.bookingTimeVOList" style="margin-bottom: 40px">
<div style="margin-bottom: 15px"><span>时间点</span></div>
<div style="display: flex;">
<el-time-select v-model="timePickArr[index]"
format='HH:mm'
style="width: 240px"
start="07:00" step="00:05"
end="20:00" placeholder="选择时间点" value-format="HH:mm" :style="{ width: '200px' }"
@change="saveTime(index)"
:disabled="timeAbleArr[index]" />
<div style="margin-left:15px">
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
title="是否确认删除" @confirm="subList(item, index)" width=180>
<template #reference>
<el-button type="danger">删除</el-button>
</template>
</el-popconfirm>
</div>
</div>
</div>
<el-button type="success" @click="addList">{{ addbtnText }}</el-button>
</el-drawer>
<!-- 添加日期弹窗 -->
<el-dialog v-model="addDateVisible" title="添加日期" width="800">
<outfitCalendarUtil @calendar-info="handleCalendarInfo"></outfitCalendarUtil>
<template #footer>
<div class="dialog-footer">
<el-button @click="addDateVisible = false">取消</el-button>
<el-button type="primary" @click="submitDate()">
确认
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ElMessage , type UploadProps , genFileId ,type UploadRawFile } from 'element-plus';
import {ref, onMounted, inject, toRaw} from 'vue';
import myAxios from "@/api/myAxios";
import outfitCalendarUtil from '@/layout/components/outfitCalendarUtil.vue';
import emitter from "@/utils/emitter";
const total = ref(0); //总页数
const idList = ref<Number[]>([]); //用于批量删除
const searchParams: any = ref({ //封装分页
current: 1, //当前页码
pageSize: 5, //每页显示条数
sortField: "id", //根据ID分类
sortOrder: "descend" //降序
})
const tableData : any= ref([]);
const appointmentDateArr : any = ref([])
const disabled = ref(true)
const title = ref('') //表单名字
const productName = ref('');
const DialogVisible = ref(false);
const state = ref(''); //根据商品上架状态select栏
const editForm : any = ref({});
const reload : any = inject("reload") //页面重新刷新
const fileSimple = ref()
const uploadProductImg : any = ref() //图片上传的ref绑定
const uploadProductDetail : any = ref() //图片上传的ref绑定
//抽屉变量
const drawer = ref(false) //抽屉打开
const drawerDate : any = ref({}) //当前日期、时间段人数信息
const timePickArr : any = ref([]) //时间选择器
const minArr : any = ref([]) //最小人数数组
const maxArr : any = ref([]) //最大人数数组
const InfoArr : any = ref([]) //时间段人数信息数组
const addbtnText = ref('添加时间')
const timeAbleArr = ref( //禁用时间段组件
Array.from({ length: 15 },()=>(false))
)
const outfitName = ref('') //服装名称
const addDateVisible = ref(false) //添加日期弹窗
const typeList = ref<String[]>([]) //服装类别数组
const siteList = ref<String[]>(['室外','室内','均可']) //场地类型
onMounted(() => { //页面加载时获取商品列表和分类页表
getOutfitList()
getOutfitKind() //获取服装类别
for(let i = 0;i <=50 ; i++) { //初始化人数选择的数组
minArr.value[i] = 5+i
maxArr.value[i] = 6+i
}
})
const appointmentDateAddRequestList : any = ref([])
const handleCalendarInfo = (data:any) => { //写真工具组件传值
appointmentDateAddRequestList.value = data
console.log('handleCalendarInfo',data)
}
const getOutfitList = async () => {
try {
const res = await myAxios.post('/photoProducts/list/page', { ...searchParams.value });
console.log('服装列表--->',res.data);
// console.log('res--->',res.data)
if (res.data.code === 1) {
tableData.value = res.data.data.records;
total.value = parseInt(res.data.data.total) //总数据量，用于分页
appointmentDateArr.value.splice(0,total.value)
console.log('tableData--->',tableData.value);
tableData.value.forEach((val : any) => {
appointmentDateArr.value.push(val.bookingDateVOList)
})
console.log('时间--->',appointmentDateArr.value);
} else {
ElMessage({
message: '获取数据失败',
});
return;
}
} catch (error) {
ElMessage({
message: '发生错误',
});
}
}
const saveEdit = async () => { //编辑商品
const values : any = Object.values(editForm.value);
// 使用some()方法来检查是否有任何值为空
console.log(editForm.value.bookingDateAddRequestList)
if (values.some((value:any) => value === null || value === undefined || value === '' || value === 0) ) {
ElMessage({
type: 'warning',
message: '请检查表单数据是否完整填写'
})
return; //空返回结束函数
}
const res = await myAxios.post('/photoProducts/update',{...editForm.value})
if(res.data.code === 1) {
DialogVisible.value = false
ElMessage({
type: 'success',
message: '更新成功'
})
} else {
ElMessage({
type: 'error',
message: '请检查字段是否正确填写'
})
}
console.log('服装信息更新结果--->',res.data);
}
const searchByState = (event : any) => { //通过商品是否上架/下架搜索
searchParams.value.isShelves = event
searchParams.value.current = 1
getOutfitList()
}
//删除商品
const deleteProduct = async (index: number) => {
console.log(typeof index)
const res = await myAxios.post('/photoProducts/delete', { id: index })
console.log(res)
if (res.data.code === 1) {
ElMessage({
type: 'success',
message: '删除成功',
})
getOutfitList()
}
}
//详情或编辑
const ReviseOrView = (index: number, row: any , flag : number) => {
//flag值不同显示不同内容 disabled开启和关闭
flag ? (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
DialogVisible.value = true;
editForm.value = row;
// console.log('编辑商品--->',editForm.value);
};
const getOutfitKind = async ()=> { //获取服装类别
const res = await myAxios.post('/photoCategory/list',{})
for(let key in res.data.data) {
typeList.value.push(res.data.data[key].name)
}
}
//将 服装类别 赋值到表格里
const loadCategory = (value: any) => {
editForm.value.categoryName = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
}
//将 商品类别 赋值到表格里
const loadScene = (value: any) => {
editForm.value.shotScene = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
}
//下架商品(待优化，有问题，逻辑有问题)
const handleOff = async (row: any) => {
console.log(row.isShelves);
const res = await myAxios.post('/photoProducts/shelves',{id: row.id})
if(res.data.code === 1) {
ElMessage({
type:'success',
message:'更新成功'
})
}
getOutfitList()
}
//处理行数大小变化
const handleSizeChange = (newSize: any) => {
searchParams.value.pageSize = newSize //新的页面数
getOutfitList()
}
//处理当前表格变化
const handleCurrentChange = (Current: any) => {
searchParams.value.current = Current
getOutfitList()
}
//重置按钮
const reset = () => {
reload()
};
// 上传图片移除 --逻辑上移除
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
}
const Exceed_ProductImg: UploadProps['onExceed'] = (files , flag) => { //覆盖商品照片
uploadProductImg.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
uploadProductImg.value!.handleStart(file)
}
const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => { //覆盖商品详情图片
uploadProductDetail.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
uploadProductDetail.value!.handleStart(file)
}
// 图片上传请求 此请求只要选择了图片，就会默认上传
const handleChange = async (file: any, flag: number) => {
fileSimple.value = file
let formData = new FormData() //这一步很重要 创建一个FormData对象
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
url: '/file/upload/server/not_login',
method: 'post',
headers: {
'content-Type': 'multipart/form-data'
},
data: {
biz: "test",
file: formData.get("file") // 取出formData对象中的file
}
})
if (res.data.code === 1) {
//三元运算 当flag为0时，赋值给商品图片 flag为1时，赋值给详情图片
flag ? editForm.value.detailImg = res.data.data : editForm.value.goodImg = res.data.data
}
}
const onSearch = (data : String)=>{ //搜索按钮方法
searchParams.value.name = data
searchParams.value.current = 1
getOutfitList()
}
//批量删除服装信息
const delBatch = async ()=>{
console.log(idList.value);
const res = await myAxios.post('/photoProducts/delBatch',{
idList: idList.value
})
console.log(res.data);
if(res.data.code === 1) {
ElMessage({
type: 'success',
message: '批量删除成功'
})
getOutfitList()
} else {
ElMessage.error('删除失败')
}
}
const handleSelectionChange =()=>{} //当选择项发生变化时会触发该事件
const selectChange =(selection: any, row : any)=> { //selction是对象数组，row是当前行对象
idList.value.splice(0,idList.value.length) //删掉
selection.forEach((item: any)=> {
idList.value.push(item.id)
})
// console.log('idList--->',idList.value);
}
const openDrawer =(index : number,dateInfo : any)=>{ //抽屉打开方法
console.log('row-->',dateInfo);
outfitName.value = tableData.value[index].name
timePickArr.value.splice(0,timePickArr.value.length) //删除之前的时间段
drawerDate.value = dateInfo
InfoArr.value = dateInfo.bookingTimeVOList
console.log('抽屉中的时间信息---->',drawerDate.value);
dateInfo.bookingTimeVOList.forEach((item:any,index:number)=>{ //格式化时间段框，然后将时间段数组禁用，只修改人数
timeAbleArr.value[index] = true
timePickArr.value.push(item.timePoint)
})
drawer.value = true
}
const saveTime = (index: number) => { //将时间点存入抽屉中
console.log('时间点数组--->',timePickArr.value);
try {
drawerDate.value.bookingTimeVOList[index].timePoint = timePickArr.value[index]
} catch {
drawerDate.value.bookingTimeVOList[index].timePoint = ''
}
}
const addList = async ()=>{
let newIndex = drawerDate.value.bookingTimeVOList.length
console.log('drawerDate--->',drawerDate.value);
if(addbtnText.value === '添加时间') {
drawerDate.value.bookingTimeVOList.push({ //增加当前日期时间段
id: 0,
timePoint: ''
})
timePickArr.value.push([])
addbtnText.value = '保存时间'
} else { //当按钮文本为'保存时间'
addTimePoint(newIndex)
}
if(!judgeNull(drawerDate.value.bookingTimeVOList)) {
ElMessage({
type: 'warning',
message: '填写时间段和人数'
})
return;
}
addbtnText.value = '添加时间'
}
const addTimePoint = async (newIndex: number) => { //添加时间段方法
const res = await myAxios.post('/book/add/time',{
timePoint: drawerDate.value.bookingTimeVOList[newIndex-1].timePoint,
bookingDateId: drawerDate.value.id
})
console.log(res.data.data);
if(res.data.code === 1) {
drawerDate.value.bookingTimeVOList[newIndex-1].id = res.data.data
drawerDate.value.bookingTimeVOList.forEach((item: any,index: number)=>{
timeAbleArr.value[index] = true
})
ElMessage({
type: 'success',
message: '添加时间段成功'
})
} else {
ElMessage({
type: 'error',
message: '添加失败'
})
}
console.log(res.data);
}
const subList = async (item:any, index: number)=> {
console.log('item--->',item.id);
if (item.id !== 0) {
const res = await myAxios.post('/book/del/time/id', {
id: item.id,
})
if (res.data.code === 1) {
ElMessage({
type: 'success',
message: '删除成功'
})
} else {
ElMessage({
type: 'error',
message: '删除失败'
})
}
}
drawerDate.value.bookingTimeVOList.pop()
addbtnText.value = '添加时间'
}
const updateDay = async (row:any)=>{ //修改今天是否可以预约
const res = await myAxios.post('/book/update/status',{id: row.id})
if(res.data.code === 1) {
ElMessage({
type:'success',
message: '修改成功'
});
}
await getOutfitList()
}
const judgeNull =(List : any)=>{ //时间段和人数统一判空方法
console.log('List--->',List);
if (List.some((item:any) => item.timePoint=== '')) {
return false;
}
return true;
}
const closedDrawer =()=>{ //完全关闭抽屉触发
let newIndex = drawerDate.value.bookingTimeVOList.length
timeAbleArr.value.forEach((item: any ,index: number)=>{
timeAbleArr.value[index] = false
})
if(!judgeNull(drawerDate.value.bookingTimeVOList)) {
console.log('关闭抽屉的删除数组被激活');
drawerDate.value.bookingTimeVOList.splice(newIndex-1,1)
}
addbtnText.value = '添加时间'
}
const deleteDate = async (id: number)=>{ //删除当前日期方法
console.log(id)
const res = await myAxios.post('/appointmentDate/del/id',{id:id})
// console.log('res--->',res);
if(res.data.code === 1) {
getOutfitList()
ElMessage({
type: 'success',
message: '删除成功'
})
} else {
ElMessage({
type: 'info',
message: '请求失败'
})
}
}
let photoProductId = 0 //服装商品id
const addDate = ( obj : any ) => { //添加日期方法
console.log('obj--->',obj);
addDateVisible.value = true
photoProductId = obj.photoProductId
}
const submitDate = async ()=> { //提交日期方法
appointmentDateAddRequestList.value.forEach((item:any,index:number)=>{
Object.assign(item, {photoProductId : photoProductId}) //添加photoProductId到appointmentDateAddRequestList每一项中
})
console.log('预约---->',appointmentDateAddRequestList.value);
const res = await myAxios.post("/book/addBatch", appointmentDateAddRequestList.value)
console.log('添加日期返回的结果',res.data)
await getOutfitList();
addDateVisible.value = false
appointmentDateAddRequestList.value = []
emitter.emit('clear')
}
const minNum =()=>{ //最小人数不能大于最大人数
if(editForm.value.minNumber > editForm.value.maxNumber && editForm.value.maxNumber != 0) {
ElMessage({
type: 'warning',
message: '最小人数不能大于最大人数'
})
editForm.value.minNumber = 0
return;
}
}
const maxNum =()=>{
if(editForm.value.maxNumber < editForm.value.minNumber) {
ElMessage({
type: 'warning',
message: '最大人数不能小于最小人数'
})
editForm.value.maxNumber = 0
return;
}
}
</script>
<style scoped>
.headerBg {
background-color: #eee !important;
}
</style>

315
src/views/CostumeAppointments/PendingOutfitOrder.vue Normal file
View File

@ -0,0 +1,315 @@
<template>
<div style="margin-bottom: 20px;">
<div style="display: flex; justify-content: space-around; align-items: center">
<div>
<span>商品编号：</span><el-input style=" width: 150px; height: 30px; margin-right: 20px; font-size: 14px" suffix-icon="Search"
placeholder="请输入商品id" v-model="goodId"></el-input>
</div>
<div>
<DatePicker/>
</div>
<div>
<TimePicker/>
</div>
<div>
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
</div>
</div>
</div>
<!-- 数据展示层 -->
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
<el-table-column prop="id" label="待处理订单序号" width="80">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column prop="goodId" label="商品编号" width="100"></el-table-column>
<el-table-column prop="goodImg" label="商品图片" width="100">
<template #default="scope">
<div>
<img :src="scope.row.goodImg.split(';')[0]" alt="" style="height: 50px;">
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" width="120"></el-table-column>
<el-table-column prop="reservationDate" label="预约日期" width="200"></el-table-column>
<el-table-column prop="timeSlot" label="预约时间段" width="200"></el-table-column>
<el-table-column prop="isAvailable" label="是否可预约" width="200"></el-table-column>
<el-table-column prop="minNumber" label="最小预约人数" width="150"></el-table-column>
<el-table-column prop="currentNumber" label="当前预约人数" width="150"></el-table-column>
<el-table-column prop="maxNumber" label="最大预约人数" width="150"></el-table-column>
<el-table-column label="商品当前时间段的预约情况" width="300">
<el-table-column label="展开进行查看" type="expand" width="300">
<template #default="props">
<el-table :data="props.row.pendingServiceOrderVOList" border :row-style="{ height: '50px' }"
:cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
<el-table-column label="订单明细id" prop="orderItemId" width="200"/>
<el-table-column label="订单编号" prop="orderNumber" width="300"></el-table-column>
<el-table-column label="联系人姓名" prop="name" width="200"/>
<el-table-column label="联系人手机号" prop="phone" width="200" />
<el-table-column label="购买数量" prop="quantity" width="200"/>
<el-table-column label="预估支付金额" prop="itemTotalAmount" width="200"/>
<el-table-column label="订单明细状态" prop="orderItemStatus" width="200"></el-table-column>
<el-table-column label="操作" width="300px" fixed="right">
<template #default="scope">
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
详情
</el-button>
<el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" @click="refundOrder(scope.row)" type="danger" plain>
退款
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
</el-table-column>
</el-table>
<!-- 分页器 -->
<div style="padding: 10px 0">
<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" />
</div>
<!-- 弹窗-->
<el-dialog title="待处理订单详情信息" v-model="DialogVisible" width="60%">
<el-form label-width="100px" size="default" :model="editForm" :disabled="disabled">
<div style="display: flex">
<el-form-item label="订单明细编号" style="width: 350px">
<el-input v-model="editForm.orderItemId" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="订单编号" style="width: 350px">
<el-input v-model="editForm.orderNumber" autocomplete="off"></el-input>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="联系人姓名" style="width: 350px">
<el-input v-model="editForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="联系人手机号" style="width: 350px">
<el-input v-model="editForm.phone" autocomplete="off"></el-input>
</el-form-item>
</div>
<el-form-item label="预估支付金额" style="width: 250px">
<el-input v-model="editForm.itemTotalAmount" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="订单明细状态" style="width: 250px">
<el-input v-model="editForm.orderItemStatus" autocomplete="off"></el-input>
</el-form-item>
<!-- <div style="display: flex">-->
<!-- <el-form-item label="下单时间" style="width: 300px;">-->
<!-- <el-input v-model="editForm.createTime" autocomplete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="更新时间" style="width: 300px;">-->
<!-- <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- </div>-->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
<el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
</div>
</template>
</el-dialog>
<!-- 发货弹窗-->
<el-dialog title="发货" v-model="shipments" width="60%">
<el-form label-width="100px" size="default" >
<el-form-item label="快递单号" style="width: 300px;">
<el-input v-model="shipment.trackingNumber"></el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button style="height: 30px;" @click=" shipments = false">取消</el-button>
<el-button style="height: 30px" type="primary" @click="deliverGoods ">确认</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import myAxios from "@/api/myAxios";
import { ElMessage } from "element-plus";
import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
import DatePicker from "@/layout/components/DatePicker.vue";
import TimePicker from "@/layout/components/TimePicker.vue";
import emitter from "@/utils/emitter";
import {checkObjectProperties} from "@/layout/js/validUtils";
const tableData: any = ref([]); //表单展示数据
const total = ref(0);
const title = ref('')
const disabled = ref(true)
const editForm: any = ref({});//编辑表单
const shipment:any = ref({
trackingNumber: null
})//物流单号
const DialogVisible = ref(false); //详情展示
const shipments = ref(false)
const goodId = ref('')
const reservationDate = ref('')
const timeSlot = ref('')
const searchParams: any = ref({ //封装分页
current: 1, //当前页码
pageSize: 5, //每页显示条数
sortField: "id", //根据ID分类
sortOrder: "descend", //降序
goodId: goodId.value,
reservationDate: reservationDate.value,
timeSlot: timeSlot.value
})
const loading = ref(false)
onMounted(() => {
emitter.on('getReservationDate', (val:any) => {
reservationDate.value = val
searchParams.value.reservationDate = val
})
emitter.on('getTimeSlot', (val:any) => {
timeSlot.value = val
searchParams.value.timeSlot = val
})
getOrderList() //页面加载获取订单列表
})
const handleSizeChange = (newSize: any) => {
searchParams.value.pageSize = newSize //新的页面数
getOrderList()
}
const handleCurrentChange = (Current: any) => {
searchParams.value.current = Current
getOrderList()
}
const handleSelectionChange = (row: any) => {
// id.value = JSON.parse(JSON.stringify(row));
}
//获取待处理订单列表
const getOrderList = async () => {
console.log(searchParams.value)
try {
searchParams.value.goodId = goodId.value
const res = await myAxios.post('pending/list/advance/detail', { ...searchParams.value });
if (res.data.code === 1) {
tableData.value = res.data.data.records;
console.log(tableData.value)
tableData.value.forEach((item:any) => {
let total = 0;
for (var i = 0; i < item.pendingServiceOrderVOList.length; i ++ ) {
total += item.pendingServiceOrderVOList[i].quantity;
}
item.currentNumber = total
})
console.log('表单信息--->', tableData.value);
} else {
ElMessage({
message: '获取数据失败',
});
}
} catch (error) {
ElMessage({
message: '发生错误',
});
}
}
//查看订单详情
const showDetail = (index: number, row: any) => {
title.value = "订单详情"
DialogVisible.value = true;
editForm.value = row;
console.log('editForm--->',editForm.value);
};
//发货方法
const currentId = ref<number | null>(null);
const openShipmentDialog = (id: number) => {
shipments.value = true;
currentId.value = id;
}
const deliverGoods = async () => { //发货方法
if (currentId.value) {
const res = await myAxios.post('/order/update', {
id: currentId.value,
trackingNumber: shipment.value.trackingNumber
})
if (res.data.code === 1) {
ElMessage({
type: 'success',
message: '发货成功'
})
getOrderList();
}
} else {
ElMessage.error('更新失败，请检查字段')
}
shipments.value = false;
}
const refundOrder = async (row : any) => { //微信退款
loading.value = true
console.log('row-->',row)
const res = await myAxios.post('/wechat/refund/create', { id: row.orderItemId }) //传入订单号取消订单并退款
console.log(res)
setTimeout(()=>{
if(res.data.code === 1) {
SuccessInfo('退款成功')
getOrderList()
loading.value = false
}
},10000)
}
const reset = () => { //重置搜索框
goodId.value = ''
reservationDate.value = ''
timeSlot.value = ''
searchParams.value.goodId = ''
searchParams.value.reservationDate = ''
searchParams.value.timeSlot = ''
emitter.emit('clearReservationDate')
emitter.emit('clearTimeSlot')
getOrderList()
};
const load = () => {
getOrderList()
} //搜索的方法
const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取消)
console.log('点击的这一行--->',row);
const res = await myAxios.post('/order/cancel/id',{ id: row.id })
if(res.data.code === 1) {
getOrderList()
SuccessInfo('取消订单成功')
} else {
ErrorInfo('请求错误')
}
}
</script>
<style lang="scss" scoped>
/* 使用 ::v-deep 来修改表头的对齐方式 */
::v-deep .el-table__header th {
text-align: center; /* 表头居中 */
font-size: 14px; /* 设置字体大小 */
font-weight: bold; /* 设置字体加粗 */
font-family: 'Arial', sans-serif; /* 设置字体 */
}
</style>

36
src/views/CostumeAppointments/ReservationInstructions.vue
View File

@ -1,36 +0,0 @@
<template>
<div>
<span style="float: left;">预约须知：</span>
<el-input
v-model="textarea"
style="width: 500px; float: left;"
:rows="2"
type="textarea"
autosize
placeholder="预约须知"
/>
</div>
<button @click="dy" style="display: inline-block">打印</button>
<el-button type="primary" @click="onSubmit" style="margin-left: 10px">提交</el-button>
<el-button type="primary" @click="resetForm" style="margin-left: 10px">重置</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const textarea = ref('')
const dy =()=>{
console.log(textarea.value)
}
//提交
const onSubmit=()=>{
}
//重置
const resetForm=()=>{
textarea.value = ''
}
</script>
<style>
</style>

11
src/views/CostumeAppointments/TimeCenter.vue
View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
TimeCenter
</template>
<style scoped>
</style>

240
src/views/CostumeAppointments/timeManagement.vue
View File

@ -1,240 +0,0 @@
<template>
<!-- <div> -->
<!-- <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
<!-- <el-form-item label="服装类别" prop="type">-->
<!-- <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
<!-- <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.type" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="服装名称" prop="name">-->
<!-- <el-select v-model="nameList.value" placeholder="请选择" @change="(event: any) => loadName(event)">-->
<!-- <el-option v-for="item in nameList" :key="item.value" :label="item.label" :value="item.name" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-calendar :disabled-date="disabledDate" class="disabledDate">
<template #date-cell="{ data }">
<p
:class="[
selectedDates.includes(data.day)? 'is-selected' : '',
isFutureDate(data.day)? '' : 'disabled'
]"
@click="handleDateClick(data.day)"
class="calendar-date-cell"
>
{{ data.day.split('-').slice(1).join('-') }}
<span v-if="selectedDates.includes(data.day)">✔️</span>
</p>
</template>
</el-calendar> -->
<!--抽屉-->
<!-- <el-drawer
v-for="(drawerInfo, date) in dateDrawerData"
:key="date"
v-model="drawerInfo.visible"
title="{{ date.split('-').slice(1).join('-') }}的时间段设置"
:with-header="false"
>
<div style="margin-bottom: 10px">
<el-button @click="addTimePickers(date)">添加时间段</el-button>
<el-button @click="printSelectedTimePeriods(date)">保存</el-button>
</div>
<div v-for="(timeData, index) in drawerInfo.timeDataList" :key="index">
<el-time-picker v-model="timeData.value1" placeholder="设置时间段" format="HH:mm" />
<el-button @click="deleteTimePicker(index, date)">删除时间段</el-button>
</div>
</el-drawer>
</div>
<el-form-item>
<el-button type="primary" @click="onSubmit">上架</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item> -->
</template>
<script lang="ts" setup>
// import { ref, onMounted } from 'vue'
// import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
// import myAxios from "@/api/myAxios"
// const dateDrawerData = ref<{
// visible: boolean
// timeDataList: { value1: string; value2: [Date, Date] }[]
// }>({})
// const addTimePickers = (date: string) => {
// if (!dateDrawerData.value[date]) {
// dateDrawerData.value[date] = {
// visible: false,
// timeDataList: []
// }
// }
// dateDrawerData.value[date].timeDataList.push({
// value1: '',
// value2: [new Date(), new Date()]
// })
// }
// const deleteTimePicker = (index: number, date: string) => {
// if (dateDrawerData.value[date]) {
// dateDrawerData.value[date].timeDataList.splice(index, 1)
// }
// }
// const printSelectedTimePeriods = (date: string) => {
// if (dateDrawerData.value[date]) {
// const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
// return {
// time1: timeData.value1
// }
// })
// console.log(selectedTimePeriods);
// }
// }
// const selectedDates = ref<string[]>([])
// const disabledDate = (date: any) => {
// const today = new Date()
// const dateString = date.toISOString().split('T')[0]
// const todayString = today.toISOString().split('T')[0]
// return dateString < todayString
// }
// const isFutureDate = (date: any) => {
// const today = new Date().toISOString().split('T')[0]
// return date >= today
// }
// const handleDateClick = (date: any) => {
// const dateStr = date
// if (isFutureDate(dateStr)) {
// if (selectedDates.value.includes(dateStr)) {
// selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
// } else {
// selectedDates.value.push(dateStr)
// if (!dateDrawerData.value[dateStr]) {
// dateDrawerData.value[dateStr] = {
// visible: true,
// timeDataList: []
// }
// } else {
// dateDrawerData.value[dateStr].visible = true;
// }
// }
// }
// }
// onMounted(() => {
// getType();
// })
// const form = ref({
// type: '',
// name: ''
// })
// const typeList = ref<{ type: string; label: string }[]>([])
// const getType = async () => {
// const res = await myAxios.post('/clothesGrade/list', {})
// typeList.value = res.data.data.map((item: any) => ({
// type: item.clothesType,
// label: item.clothesType
// }))
// }
// const nameList = ref<{ name: string; label: string }[]>([])
// const loadType = (value: any) => {
// form.value.type = value
// getName()
// }
// const loadName = (value: any) => {
// form.value.name = value;
// }
// const getName = async () => {
// const selectedType = form.value.type;
// const res = await myAxios.post('/clothesInfo/list/page', {
// clothesType: selectedType
// })
// console.log(selectedType, '1111111111111');
// nameList.value = res.data.data.records.map((item: any) => ({
// name: item.name,
// label: item.name
// }))
// }
// //提交
// const onSubmit = () => {
// }
// //重置
// const resetForm = () => {
// }
</script>
<style scoped>
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
.example-basic .el-date-editor {
margin: 8px;
}
.calendar-date-cell {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.is-selected {
color: black;
border-radius: 50%;
}
.disabledDate{
width: 550px;
height: 280px;
font-size: 12px;
--el-calendar-cell-width: 30px;
}
.disabled {
color: #dcdfe6;
pointer-events: none;
}
.custom-calendar /deep/ .el-calendar-table .el-calendar-day{
height: 50px;
}
</style>

13
src/views/ServiceType/ProductCenter.vue
View File

@ -27,7 +27,7 @@
</div>
<!-- 数据展示 -->
<el-table :data="tableData" border stripe header-cell-class-name="headerBg"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange" @select="selectChange"
:header-cell-style="{ 'text-align': 'center' }" default-expand-all>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="课程编号" width="80">
@ -232,7 +232,7 @@ import myAxios from "@/api/myAxios";
import calendarUtil from '@/layout/components/calendarUtil.vue';
import emitter from "@/utils/emitter";
const total = ref(0); //总页数
const idList = ref([]); //用于批量删除
const idList = ref<Number[]>([]); //用于批量删除
const searchParams: any = ref({ //封装分页
current: 1, //当前页码
pageSize: 5, //每页显示条数
@ -277,7 +277,7 @@ onMounted(() => { //页面加载时获取商品列表和分类页表
}
})
const appointmentDateAddRequestList = ref({})
const appointmentDateAddRequestList : any = ref([])
const handleCalendarInfo = (data:any) => {
appointmentDateAddRequestList.value = data
@ -436,6 +436,13 @@ const delBatch = async ()=>{
}
}
const handleSelectionChange =()=>{}
const selectChange =(selection: any, row : any)=> { //selction是对象数组，row是当前行对象
idList.value.splice(0,idList.value.length) //删掉
selection.forEach((item: any)=> {
idList.value.push(item.id)
})
// console.log('idList--->',idList.value);
}
const openDrawer =(index : number,dateInfo : any)=>{ //抽屉打开方法
// console.log('row-->',dateInfo);
className.value = tableData.value[index].name