服装租赁管理完成、时间段选择后有提示，修复了一些bug
This commit is contained in:
parent
2bd3a67a7d
commit
ddb1bbc7de
|
|
@ -1,23 +1,21 @@
|
|||
<template>
|
||||
<div class="calendar">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<span v-if="selectedDates.includes(data.day)" style="height: 1px;width: 1px">✔️</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
<el-drawer v-model="drawer" :title="'当前选择的日期是：' + periodObj.specificDate" :with-header="true" @open="drawerOpen" @closed="drawerClean">
|
||||
|
||||
<el-drawer v-model="drawer" :title="'当前选择的日期是：' + periodObj.specificDate" :with-header="true" @open="drawerOpen" @closed="drawerClean" direction="ltr">
|
||||
<div style="margin-bottom: 20px;">选择当天时间段和人数</div>
|
||||
<div class="timebox" v-for="(item,index) in periodObj.timePeriodAddRequestList" style="margin-bottom: 40px">
|
||||
<span>选择时间段</span>
|
||||
|
|
@ -61,17 +59,33 @@
|
|||
<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>
|
||||
<el-button type="success" round @click="emittValue" style="margin: 10px 0 10px 25px;">保存</el-button>
|
||||
</div>
|
||||
<!-- 展示已经选择的时间端 -->
|
||||
<el-card style="max-width: 450px" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>已选择的时间(日历状态:{{ calendarIsSave }})</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
:data="cardDateTree"
|
||||
default-expand-all
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref , onMounted , defineEmits} from 'vue'
|
||||
import { ElMessage } from 'element-plus';
|
||||
import emitter from "@/utils/emitter";
|
||||
import {WarnInfo} from "@/utils/messageInfo";
|
||||
|
||||
const cardDateTree : any= ref([]) //卡片里树组件变量
|
||||
const calendarIsSave = ref('未保存')
|
||||
const Selectdate = ref('')
|
||||
//日期1.20
|
||||
const selectedDates = ref<string[]>([]) //选中的日期
|
||||
const dateDrawerData : any = ref<{
|
||||
const dateDrawerData : any = ref<{
|
||||
visible: boolean
|
||||
timeDataList: { value1: string; value2: [Date, Date] }[] //数组类型
|
||||
}>({
|
||||
|
|
@ -102,6 +116,7 @@ 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
|
||||
|
|
@ -133,41 +148,64 @@ const addList =(index: number)=>{ //添加当前日期的时间段
|
|||
)
|
||||
timePickArr.value.push([])
|
||||
} else {
|
||||
ElMessage({
|
||||
type:'warning',
|
||||
message:'请填写完前一段日期后再添加,我知道测试想要干什么！'
|
||||
})
|
||||
WarnInfo('请填写完再添加')
|
||||
}
|
||||
// console.log(index,'--->',periodObj.value);
|
||||
}
|
||||
const subList =(index: number)=>{
|
||||
const subList =(index: number)=>{ //删除时间段人数
|
||||
if(index != 0) {
|
||||
periodObj.value.timePeriodAddRequestList.splice(index,1)
|
||||
}
|
||||
calendarIsSave.value = '未保存'
|
||||
//更新日期、时间段集合
|
||||
periodMap.set(periodObj.value.specificDate,periodObj.value)
|
||||
timePickMap.set(periodObj.value.specificDate,timePickArr.value)
|
||||
cardDateTree.value.splice(0,cardDateTree.value.length)
|
||||
periodMap.forEach(loopPeriodMap)
|
||||
}
|
||||
const saveTime =(index : number)=>{ //将开始时间和结束时间格式化存入periodObj中
|
||||
|
||||
const saveTime =(index : number)=>{ //将开始时间和结束时间格式化存入periodObj中
|
||||
try{
|
||||
periodObj.value.timePeriodAddRequestList[index].timeSlot = timePickArr.value[index][0]+'-'+timePickArr.value[index][1]
|
||||
} catch {
|
||||
periodObj.value.timePeriodAddRequestList[index].timeSlot = ''
|
||||
}
|
||||
}
|
||||
|
||||
const saveInfo =()=>{ //保存当前日期的时间和人数信息
|
||||
//时间段和人数判空
|
||||
if(!judgeNull(periodObj.value.timePeriodAddRequestList)) {
|
||||
ElMessage({
|
||||
type:'warning',
|
||||
message:'请填写完整时间段和人数！'
|
||||
})
|
||||
WarnInfo('请填写完整时间段和人数！')
|
||||
return;
|
||||
}
|
||||
isBook ? periodObj.value.isAvailable = 1 : periodObj.value.isAvailable = 0
|
||||
periodMap.set(periodObj.value.specificDate,periodObj.value)
|
||||
periodMap.set(periodObj.value.specificDate,periodObj.value) //作用于回显
|
||||
timePickMap.set(periodObj.value.specificDate,timePickArr.value)
|
||||
cardDateTree.value.splice(0,cardDateTree.value.length)
|
||||
drawer.value = false
|
||||
console.log('periodObj--->',periodObj.value);
|
||||
periodMap.forEach(loopPeriodMap)
|
||||
// console.log('选择的日期和时间段--->',periodObj.value)
|
||||
}
|
||||
|
||||
const loopPeriodMap = ( value: any,key: any,map: any ) => {
|
||||
// console.log('value---->', value , 'key---->', key)
|
||||
cardDateTree.value.push({
|
||||
label:key,
|
||||
children: dealTreeChildren(value.timePeriodAddRequestList)
|
||||
})
|
||||
}
|
||||
|
||||
const dealTreeChildren = ( arr : any ) => { //处理map集合中时间段和人数格式，最后返回给树
|
||||
let labelArrObj : any = []
|
||||
arr.forEach((item : any) => {
|
||||
labelArrObj.push({
|
||||
label: '时间：' + item.timeSlot + '，人数:' + item.minNumber + '-' + item.maxNumber,
|
||||
})
|
||||
})
|
||||
// console.log('value---->', arr)
|
||||
return labelArrObj;
|
||||
}
|
||||
|
||||
const drawerClean =()=>{ //清空对象
|
||||
periodObj.value = {
|
||||
specificDate: Selectdate.value,
|
||||
|
|
@ -188,7 +226,7 @@ const drawerOpen =()=>{ //抽屉打开时
|
|||
if(isTrue.value) {
|
||||
periodObj.value = periodMap.get(periodObj.value.specificDate)
|
||||
timePickArr.value= timePickMap.get(periodObj.value.specificDate)
|
||||
console.log('timePickArr--->',timePickArr.value);
|
||||
// console.log('timePickArr--->',timePickArr.value);
|
||||
}
|
||||
}
|
||||
const resetForm =()=>{ //重置表格
|
||||
|
|
@ -197,14 +235,22 @@ const resetForm =()=>{ //重置表格
|
|||
periodMap.delete(periodObj.value.specificDate)
|
||||
timePickMap.delete(periodObj.value.specificDate)
|
||||
}
|
||||
calendarIsSave.value = '未保存'
|
||||
cardDateTree.value.splice(0,cardDateTree.value.length)
|
||||
periodMap.forEach(loopPeriodMap)
|
||||
}
|
||||
const emittValue =()=>{ //点击保存后将值传给父组件
|
||||
appointmentDateAddRequestList.value.splice(0,appointmentDateAddRequestList.value.length) //防止用户狂点
|
||||
periodMap.forEach(mapFun)
|
||||
emit('calendar-Info',appointmentDateAddRequestList.value)
|
||||
if(appointmentDateAddRequestList.value.length === 0) {
|
||||
WarnInfo('请添加信息后再保存')
|
||||
return;
|
||||
}
|
||||
emitter.on('clear', () => {
|
||||
periodMap.clear()
|
||||
})
|
||||
calendarIsSave.value = '已保存'
|
||||
}
|
||||
const mapFun =(value:any ,key:any ,map:any)=>{ //遍历map的统一函数
|
||||
if(periodMap.has(key)) {
|
||||
|
|
@ -221,20 +267,14 @@ const judgeNull =(List : any)=>{ //时间段和人数统一判空方法
|
|||
}
|
||||
const minNum =(index : number)=>{ //最小人数不能大于最大人数
|
||||
if(periodObj.value.timePeriodAddRequestList[index].minNumber > periodObj.value.timePeriodAddRequestList[index].maxNumber && periodObj.value.timePeriodAddRequestList[index].maxNumber != 0) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '最小人数不能大于最大人数'
|
||||
})
|
||||
WarnInfo('最小人数不能大于最大人数')
|
||||
periodObj.value.timePeriodAddRequestList[index].minNumber = 0
|
||||
return;
|
||||
}
|
||||
}
|
||||
const maxNum =(index : number)=>{
|
||||
if(periodObj.value.timePeriodAddRequestList[index].maxNumber < periodObj.value.timePeriodAddRequestList[index].minNumber) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '最大人数不能小于最小人数'
|
||||
})
|
||||
WarnInfo('最大人数不能小于最小人数')
|
||||
periodObj.value.timePeriodAddRequestList[index].maxNumber = 0
|
||||
return;
|
||||
}
|
||||
|
|
@ -271,14 +311,20 @@ const handleDateClick = (date: any) => {
|
|||
|
||||
<style scoped>
|
||||
.calbox {
|
||||
width: 550px;
|
||||
height: 280px;
|
||||
width: 450px;
|
||||
height: 300px;
|
||||
font-size: 12px;
|
||||
--el-calendar-cell-width: 30px;
|
||||
}
|
||||
|
||||
.timebox {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-calendar__body) {
|
||||
padding: 12px 28px 12px 0px;
|
||||
}
|
||||
|
||||
.calendar-date-cell {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -286,6 +332,12 @@ const handleDateClick = (date: any) => {
|
|||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar{
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
|
||||
/*这是过去日期不能选中的样式，请勿删除*/
|
||||
.disabled {
|
||||
color: #dcdfe6;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
]" @click="handleDateClick(data.day)" class="calendar-date-cell">
|
||||
{{ data.day.split('-').slice(1).join('-') }}
|
||||
<!-- {{ data.isSelected ? '✔️' : '' }} -->
|
||||
<span v-if="selectedDates.includes(data.day)">✔️</span>
|
||||
<span v-if="selectedDates.includes(data.day)" style="height: 1px;width: 1px">✔️</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -43,13 +43,29 @@
|
|||
<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>
|
||||
<el-button type="success" round @click="emittValue" style="margin: 10px 0 10px 25px;">保存</el-button>
|
||||
<!-- 展示已经选择的时间端 -->
|
||||
<el-card style="max-width: 450px" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>已选择的时间(日历状态:{{ calendarIsSave }})</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
:data="cardDateTree"
|
||||
default-expand-all
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, defineEmits } from 'vue'
|
||||
import { ElMessage } from 'element-plus';
|
||||
import emitter from "@/utils/emitter";
|
||||
import {WarnInfo} from "@/utils/messageInfo";
|
||||
|
||||
const cardDateTree : any= ref([]) //卡片里树组件变量
|
||||
const calendarIsSave = ref('未保存')
|
||||
const Selectdate = ref('')
|
||||
const selectedDates = ref<string[]>([]) //选中的日期
|
||||
const dateDrawerData: any = ref<{
|
||||
|
|
@ -110,10 +126,7 @@ const addList = (index: number) => { //添加当前日期的时间段
|
|||
)
|
||||
timePickArr.value.push([])
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请填写完前一段日期后再添加'
|
||||
})
|
||||
WarnInfo('请填写完前一段日期后再添加')
|
||||
}
|
||||
// console.log(index,'--->',periodObj.value);
|
||||
}
|
||||
|
|
@ -121,30 +134,57 @@ const subList = (index: number) => {
|
|||
if (index != 0) {
|
||||
periodObj.value.bookingTimeAddRequestList.splice(index, 1)
|
||||
}
|
||||
calendarIsSave.value = '未保存'
|
||||
//更新日期、时间段集合
|
||||
periodMap.set(periodObj.value.specificDate,periodObj.value)
|
||||
timePickMap.set(periodObj.value.specificDate,timePickArr.value)
|
||||
cardDateTree.value.splice(0,cardDateTree.value.length)
|
||||
periodMap.forEach(loopPeriodMap)
|
||||
}
|
||||
const saveTime = (index: number) => { //将时间点存入periodObj对象中
|
||||
console.log('时间点数组--->',timePickArr.value);
|
||||
// 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: '请填写完整时间段和人数！'
|
||||
})
|
||||
WarnInfo('请填写完整时间段和人数！')
|
||||
return;
|
||||
}
|
||||
isBook ? periodObj.value.isAvailable = 1 : periodObj.value.isAvailable = 0
|
||||
periodMap.set(periodObj.value.specificDate, periodObj.value)
|
||||
timePickMap.set(periodObj.value.specificDate, timePickArr.value)
|
||||
cardDateTree.value.splice(0,cardDateTree.value.length)
|
||||
drawer.value = false
|
||||
console.log('periodObj--->', periodObj.value);
|
||||
periodMap.forEach(loopPeriodMap)
|
||||
// console.log('periodObj--->', periodObj.value);
|
||||
}
|
||||
|
||||
const loopPeriodMap = ( value: any,key: any,map: any ) => {
|
||||
console.log('value---->', value , 'key---->', key)
|
||||
cardDateTree.value.push({
|
||||
label:key,
|
||||
children: dealTreeChildren(value.bookingTimeAddRequestList)
|
||||
})
|
||||
}
|
||||
|
||||
const dealTreeChildren = ( arr : any ) => { //处理map集合中时间段和人数格式，最后返回给树
|
||||
// console.log('arr--->',arr)
|
||||
let labelArrObj : any = []
|
||||
arr.forEach((item : any) => {
|
||||
labelArrObj.push({
|
||||
label: '时间：' + item.timePoint
|
||||
})
|
||||
})
|
||||
// console.log('value---->', arr)
|
||||
return labelArrObj;
|
||||
}
|
||||
|
||||
const drawerClean = () => { //清空对象
|
||||
periodObj.value = {
|
||||
specificDate: Selectdate.value,
|
||||
|
|
@ -158,6 +198,7 @@ const drawerClean = () => { //清空对象
|
|||
timePickArr.value = []
|
||||
count.value = 0;
|
||||
}
|
||||
|
||||
const drawerOpen = () => { //抽屉打开时
|
||||
isTrue.value = periodMap.has(periodObj.value.specificDate) //判断之前有没有存过这个值
|
||||
if (isTrue.value) {
|
||||
|
|
@ -166,44 +207,59 @@ const drawerOpen = () => { //抽屉打开时
|
|||
console.log('timePickArr--->', timePickArr.value);
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => { //重置表格
|
||||
drawerClean() //视觉上先删除
|
||||
if (isTrue.value) { //存过的一律从map中清除
|
||||
periodMap.delete(periodObj.value.specificDate)
|
||||
timePickMap.delete(periodObj.value.specificDate)
|
||||
}
|
||||
calendarIsSave.value = '未保存'
|
||||
cardDateTree.value.splice(0,cardDateTree.value.length)
|
||||
periodMap.forEach(loopPeriodMap)
|
||||
}
|
||||
|
||||
const emittValue = () => { //点击保存后将值传给父组件
|
||||
appointmentDateAddRequestList.value.splice(0, appointmentDateAddRequestList.value.length) //防止用户狂点
|
||||
periodMap.forEach(mapFun)
|
||||
if(appointmentDateAddRequestList.value.length === 0) {
|
||||
WarnInfo('请添加信息后再保存')
|
||||
return;
|
||||
}
|
||||
emit('calendar-Info', appointmentDateAddRequestList.value)
|
||||
emitter.on('clear', () => { //清空日期map集合
|
||||
periodMap.clear()
|
||||
})
|
||||
calendarIsSave.value = '已保存'
|
||||
}
|
||||
|
||||
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);
|
||||
// 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)) {
|
||||
|
|
@ -226,8 +282,8 @@ const handleDateClick = (date: any) => {
|
|||
|
||||
<style scoped>
|
||||
.calbox {
|
||||
width: 550px;
|
||||
height: 280px;
|
||||
width: 450px;
|
||||
height: 300px;
|
||||
font-size: 12px;
|
||||
--el-calendar-cell-width: 30px;
|
||||
}
|
||||
|
|
@ -236,6 +292,10 @@ const handleDateClick = (date: any) => {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-calendar__body) {
|
||||
padding: 12px 28px 12px 0px;
|
||||
}
|
||||
|
||||
.calendar-date-cell {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -244,6 +304,7 @@ const handleDateClick = (date: any) => {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/*这是过去日期不能选中的样式，请勿删除*/
|
||||
.disabled {
|
||||
color: #dcdfe6;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div style="border: 1px solid #ccc">
|
||||
<Toolbar style="border-bottom: 1px solid #ccc; width: 400px;" :editor="editorRef" :defaultConfig="toolbarConfig"
|
||||
<Toolbar style="border-bottom: 1px solid #ccc; width: 410px;" :editor="editorRef" :defaultConfig="toolbarConfig"
|
||||
:mode="mode" />
|
||||
<Editor style="height: 500px; overflow-y: hidden; width: 400px;" v-model="valueHtml" :defaultConfig="editorConfig"
|
||||
<Editor style="height: 500px; overflow-y: hidden; width: 410px;" v-model="valueHtml" :defaultConfig="editorConfig"
|
||||
:mode="mode" @onChange="handleChange" @onCreated="handleCreated" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||||
import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits } from 'vue'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
import axios from "axios";
|
||||
import myAxios from "@/api/myAxios";
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef()
|
||||
|
|
|
|||
|
|
@ -241,6 +241,78 @@ export const constantRoute = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/outfitLeaseManage',
|
||||
redirect: '/AddOutfit',
|
||||
component: () => import("@/layout/Manage.vue"),
|
||||
meta: {
|
||||
title: '服装租赁管理',
|
||||
icon: '',
|
||||
hidden: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/AddOutfit',
|
||||
name: '添加租赁服装',
|
||||
component: () => import("@/views/OutfitLease/AddOutfit.vue"),
|
||||
meta: {
|
||||
title: '添加租赁服装',
|
||||
icon: 'Edit',
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/LeaseOutfitCenter',
|
||||
name: '租赁产品中心',
|
||||
component: () => import("@/views/OutfitLease/LeaseOutfitCenter.vue"),
|
||||
meta: {
|
||||
title: '租赁产品中心',
|
||||
icon: '',
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/OutfitType',
|
||||
name: '服装类别',
|
||||
component: () => import("@/views/OutfitLease/OutfitType.vue"),
|
||||
meta: {
|
||||
title: '服装类别管理',
|
||||
icon: '',
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/LeaseOutfitDetail/:id/:flag',
|
||||
name: '租赁服装详情',
|
||||
component: () => import("@/views/OutfitLease/LeaseOutfitDetail.vue"),
|
||||
meta: {
|
||||
title: '租赁服装详情',
|
||||
icon: '',
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/OutfitLeaseOrder',
|
||||
name: '租赁订单中心',
|
||||
component: () => import("@/views/OutfitLease/OutfitLeaseOrderCenter.vue"),
|
||||
meta: {
|
||||
title: '租赁订单中心',
|
||||
icon: '',
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/LeaseOrderDetail/:id',
|
||||
name: '租赁订单详情',
|
||||
component: () => import("@/views/OutfitLease/LeaseOrderDetail.vue"),
|
||||
meta: {
|
||||
title: '租赁订单详情',
|
||||
icon: '',
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
//活动资讯管理
|
||||
{
|
||||
path: '/activityMessage',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
//上传链接
|
||||
export const uploadUrl : string = 'http://localhost:9092/api/file/uploadFile'
|
||||
// export const uploadUrl = 'https://www.carboner.cn:8888/api/file/uploadFile'
|
||||
// export const uploadUrl : string= 'https://www.carboner.cn:8888/api/file/uploadFile'
|
||||
export const downloadUrl : string = 'https://www.carboner.cn:8888/api/file/downloadFile?objectKey='
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@
|
|||
:on-remove="handleRemove"
|
||||
:on-exceed="ExceedImg"
|
||||
limit="1"
|
||||
v-loading="loading"
|
||||
>
|
||||
v-loading="loading">
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<el-dialog v-model="dialogVisible">
|
||||
|
|
@ -45,7 +44,7 @@ const compressImage =(file: any)=> { //图片压缩方法
|
|||
new Compressor(file.file, {
|
||||
quality: 0.3, //压缩质量，越高文件越大
|
||||
success(result) {
|
||||
console.log('res--->',result)
|
||||
// console.log('res--->',result)
|
||||
// 压缩成功后的处理
|
||||
const compressedFile = new File([result], file.file.name, { type: result.type });
|
||||
// 可以在这里预览、上传或者做其他处理
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ const getTypeList = async () => { //获取类别列表作为可选项
|
|||
for(let key in res.data.data) {
|
||||
typeList.value.push(res.data.data[key].typeName)
|
||||
}
|
||||
console.log('typeList---->',typeList.value);
|
||||
// console.log('typeList---->',typeList.value);
|
||||
}
|
||||
//提交表单
|
||||
const onSubmit = async () => {
|
||||
|
|
@ -183,6 +183,8 @@ const addLabel = () => { //添加商品标签按钮的方法
|
|||
|
||||
const deleteLabel = () => { //删除标签的方法
|
||||
labelList.value.pop()
|
||||
addLabelList() //格式化标签
|
||||
// console.log('标签--->',labelList.value)
|
||||
}
|
||||
|
||||
const addLabelList = () => { //格式化商品标签
|
||||
|
|
@ -228,8 +230,10 @@ function encode64(text: string): string {
|
|||
overflow-y: auto;
|
||||
word-break: break-all;
|
||||
width: 400px;
|
||||
min-width: 400px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 900px;
|
||||
height: 800px;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,6 @@ const typeList: any = ref([])
|
|||
const labelList = ref([''])
|
||||
const isqualify : any = ref(false)
|
||||
const typeSelect : any = ref(false) //类别下拉选项栏的禁用状态
|
||||
const ImgArr: any = ref<UploadUserFile[]>([])
|
||||
const detailFrom : any = ref({
|
||||
name: '', //商品名称
|
||||
price: '', //商品价格
|
||||
|
|
@ -143,15 +142,8 @@ const getProductInfo = async () => { //商品信息
|
|||
previewImgUrl.value = res.data.data.goodImg
|
||||
detailFrom.value = res.data.data
|
||||
previewRichText.value = res.data.data.richText
|
||||
ImgArr.value.splice(0, ImgArr.value.length)
|
||||
detailFrom.value.festivalName = res.data.data.festivalName.substring(0,1)
|
||||
labelList.value = res.data.data.label.split(';')
|
||||
var tempArr = res.data.data.goodImg.split(';')
|
||||
tempArr.forEach((item: any) => {
|
||||
ImgArr.value.push({
|
||||
url: item
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,6 +197,7 @@ const addLabel = () => { //添加商品标签按钮的方法
|
|||
}
|
||||
const deleteLabel = () => { //删除标签的方法
|
||||
labelList.value.pop()
|
||||
addLabelList() //格式化商品标签
|
||||
}
|
||||
const addLabelList = () => { //格式化商品标签
|
||||
var string = ''
|
||||
|
|
|
|||
|
|
@ -44,27 +44,21 @@
|
|||
</el-table-column>
|
||||
<el-table-column prop="goodImg" label="商品图片">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<img :src="downloadUrl + scope.row.goodImg.split(';')[0]" 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="180">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.price }} 元
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="商品类型"></el-table-column>
|
||||
<el-table-column prop="inventory" label="商品数量"></el-table-column>
|
||||
<el-table-column label="商品状态">
|
||||
<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">
|
||||
|
|
@ -196,6 +190,7 @@ const ReviseOrView = (index: number, row: any, flag: number) => {
|
|||
}
|
||||
//下架商品
|
||||
const handleOff = async (index: number, row: any) => {
|
||||
// console.log('当前行--->',row)
|
||||
row.isShelves ? row.isShelves = 0 : row.isShelves = 1 //三元运算符 改变那一行的上架值
|
||||
editForm.value = row;
|
||||
const res = await myAxios.post('/goods/update', {...editForm.value})
|
||||
|
|
|
|||
|
|
@ -6,43 +6,39 @@
|
|||
</el-card>
|
||||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-card class="form-FormContainer" shadow="never">
|
||||
<el-form ref="resetFormData" :model="form" label-width="auto" size="large">
|
||||
<el-form-item label="添加写真展示图片">
|
||||
<el-form ref="resetFormData" :model="form" size="large">
|
||||
<el-form-item label="添加展示图片">
|
||||
<ImgSingleUpload @update:goodImgArr="form.goodImg = $event"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="服装名称" prop="name" style="width: 300px;" label-width="70px">
|
||||
<el-form-item label="服装名称" prop="name" style="width: 300px;">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price" label-width="70px">
|
||||
<div style="display: flex">
|
||||
<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>
|
||||
<!-- 拍摄场地：户外、室内、均可 -->
|
||||
<div class="kinds">
|
||||
<el-form-item label="拍摄场地" prop="type" style="width: 240px;" label-width="70px">
|
||||
<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="type" style="width: 240px;" label-width="80px">
|
||||
<el-form-item label="服装类别" style="width: 232px;" label-width="80">
|
||||
<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>
|
||||
</div>
|
||||
<div class="numberSelect">
|
||||
<el-form-item label="最小人数" prop="type" style="width: 240px;" label-width="70px">
|
||||
<el-select v-model="form.minNumber" @change="minNum()">
|
||||
<!-- 拍摄场地：户外、室内、均可 -->
|
||||
<div class="kinds">
|
||||
<el-form-item label="拍摄场地" 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="限定人数" style="width: 228px;" label-width="80">
|
||||
<el-select v-model="form.count">
|
||||
<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;" label-width="80px">
|
||||
<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>
|
||||
<el-form-item label="效果图" label-width="70px">
|
||||
|
||||
<el-form-item label="效果图">
|
||||
<richTextUtil @richTextContent="getRichTextInfo"/>
|
||||
</el-form-item>
|
||||
<div class="totalButton">
|
||||
|
|
@ -55,16 +51,18 @@
|
|||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<div class="diyConponent">
|
||||
<el-card class="form-RichTextContainer" shadow="never">
|
||||
<outfitCalendarUtil @calendar-info="getDateInfo"></outfitCalendarUtil>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, inject, toRaw } from 'vue';
|
||||
import { ElMessage, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import myAxios from "@/api/myAxios";
|
||||
import outfitCalendarUtil from '@/layout/components/outfitCalendarUtil.vue';
|
||||
import richTextUtil from '@/layout/components/richTextUtil.vue';
|
||||
|
|
@ -78,8 +76,7 @@ const form = ref({
|
|||
shotScene: '', //拍摄场地
|
||||
categoryName: '', //服装类别
|
||||
goodImg: '', //商品图片url
|
||||
minNumber: 0, //最小人数
|
||||
maxNumber: 0, //最大人数
|
||||
count: 0,
|
||||
richText: '',
|
||||
bookingDateAddRequestList: [] //预约时间点，是否可预约，人数范围
|
||||
})
|
||||
|
|
@ -87,8 +84,7 @@ const form = ref({
|
|||
const reload: any = inject("reload")
|
||||
const typeList = ref<String[]>([]) //服装类别数组
|
||||
const siteList = ref<String[]>(['室外','室内','均可']) //场地类型
|
||||
const minArr = ref<Number[]>([]) //最小人数数组
|
||||
const maxArr= ref<Number[]>([]) //最大人数数组
|
||||
const minArr = ref<Number[]>([]) //最人数数组
|
||||
const previewRichText = ref('') //预览富文本
|
||||
|
||||
|
||||
|
|
@ -96,7 +92,6 @@ onMounted(() => {
|
|||
getOutfitKind() //获取服装类别
|
||||
for(let i = 0;i <=50 ; i++) { //初始化人数选择的数组
|
||||
minArr.value[i] = 1+i
|
||||
maxArr.value[i] = 2+i
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -121,19 +116,18 @@ const onSubmit = async () => {
|
|||
})
|
||||
return; //空返回结束函数
|
||||
}
|
||||
console.log(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,
|
||||
count: form.value.count,
|
||||
shotScene: form.value.shotScene,
|
||||
categoryName: form.value.categoryName,
|
||||
introImg: form.value.goodImg,
|
||||
richText: form.value.richText,
|
||||
bookingDateAddRequestList: toRaw(form.value.bookingDateAddRequestList)
|
||||
})
|
||||
console.log(res.data);
|
||||
// console.log(res.data);
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
|
|
@ -163,7 +157,7 @@ function encode64(text: string): string {
|
|||
}
|
||||
|
||||
const getDateInfo = ( info:any )=>{ //日期组件传值
|
||||
console.log('info---->',info)
|
||||
// console.log('info---->',info)
|
||||
form.value.bookingDateAddRequestList = info
|
||||
}
|
||||
|
||||
|
|
@ -174,44 +168,27 @@ const getOutfitKind = async ()=> { //获取服装类别
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
const getInfo = (info: any) => { //富文本赋值
|
||||
// console.log('info', info)
|
||||
previewRichText.value = info
|
||||
form.value.richText = info
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.form-FormContainer {
|
||||
width: 600px;
|
||||
width: 540px;
|
||||
min-width: 540px;
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
.form-RichTextContainer {
|
||||
width: 550px;
|
||||
width: 460px;
|
||||
min-width: 460px;
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.diyConponent /deep/ .el-card__body {
|
||||
padding: 20px 0 10px 0 !important;
|
||||
}
|
||||
|
||||
.flexCard {
|
||||
|
|
@ -225,6 +202,7 @@ const getInfo = (info: any) => { //富文本赋值
|
|||
word-break: break-all;
|
||||
width: 400px;
|
||||
margin-right: 10px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.kinds {
|
||||
|
|
|
|||
|
|
@ -9,15 +9,14 @@
|
|||
<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">
|
||||
<el-table-column prop="id" label="序号" width="50">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="250"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
||||
<el-table-column prop="totalAmount" label="订单实付金额(元)"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态">
|
||||
<template #default="scope">
|
||||
{{ scope.row.orderStatus === '待发货' ? '待消费' : scope.row.orderStatus }}
|
||||
|
|
@ -62,7 +61,7 @@
|
|||
import { onMounted, ref } from "vue";
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
|
||||
import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import emitter from "@/utils/emitter";
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
|
|
@ -122,7 +121,16 @@ const showDetail = (row: any) => {
|
|||
})
|
||||
};
|
||||
const changeOrderStatus = async (row: any) => { //改变订单状态
|
||||
const res = await myAxios.post('',{})
|
||||
const res = await myAxios.post('/advanceOrder/update/orderStatus',{
|
||||
id: row.id,
|
||||
orderStatus: '交易完成'
|
||||
})
|
||||
if(res.data.code === 1) {
|
||||
await getOrderList()
|
||||
SuccessInfo('订单确认完成')
|
||||
} else {
|
||||
WarnInfo(res.data.message)
|
||||
}
|
||||
}
|
||||
const deleteOrder = async (row: any) => { //微信退款
|
||||
loading.value = true
|
||||
|
|
|
|||
|
|
@ -4,13 +4,9 @@
|
|||
</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.name" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="备注">
|
||||
<el-input v-model="typeForm.typeIntro" />
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<template #footer #default="{ row, $index }">
|
||||
<div class="dialog-footer">
|
||||
|
|
@ -30,7 +26,6 @@
|
|||
<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>
|
||||
|
|
@ -43,11 +38,11 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage, type UploadProps, type UploadUserFile} from 'element-plus';
|
||||
import { ElMessage, 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 loading = ref(false) //加载
|
||||
|
|
@ -115,9 +110,7 @@ const addOrUpdateType = async () => {
|
|||
if( flag.value === 1 ) {
|
||||
const res = await myAxios.post('/photoCategory/update',{
|
||||
id : typeForm.value.id,
|
||||
name: typeForm.value.name,
|
||||
// typeUrl: typeForm.value.typeUrl,
|
||||
// typeIntro: typeForm.value.typeIntro
|
||||
name: typeForm.value.name
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
//提交成功后，之间重置表格
|
||||
|
|
@ -136,8 +129,6 @@ const resetForm = () => {
|
|||
typeForm.value = {
|
||||
id: 0,
|
||||
name: '',
|
||||
// typeUrl: '',
|
||||
// typeIntro: ''
|
||||
}
|
||||
};
|
||||
const handleSelectionChange = (row: any) => {
|
||||
|
|
@ -145,27 +136,21 @@ const handleSelectionChange = (row: any) => {
|
|||
}
|
||||
//编辑
|
||||
const editShowForm = (index: number, row: any) => {
|
||||
// typeImg.value.splice(0,typeImg.value.length) //先删除原先的
|
||||
// typeImg.value.push({
|
||||
// url: row.typeUrl
|
||||
// })
|
||||
dialogVisible.value = true
|
||||
typeForm.value = JSON.parse(JSON.stringify(row))
|
||||
flag.value = 1
|
||||
console.log('本行--->',row)
|
||||
// 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: '删除成功',
|
||||
})
|
||||
}
|
||||
getTypeList()
|
||||
await getTypeList()
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<!-- 修改前请注释以前的 -->
|
||||
<!-- 搜索 -->
|
||||
<div class="table_page">
|
||||
<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>
|
||||
|
|
@ -14,31 +15,27 @@
|
|||
</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 style="display: flex; justify-content: center; align-items: center; position: absolute; right: 40px;">-->
|
||||
<!-- <el-form-item label="摄影服务" prop="type" style="width: 240px; margin-top: 20px; margin-right: 20px">-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <span style="font-size: 16px; line-height: 36px">摄影服务</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- <el-select v-model="value1" placeholder="选择摄影编号" @change="(event: any) => loadForm1(event)" :disabled="typeSelect" size="large">-->
|
||||
<!-- <el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="妆造服务" prop="type" style="width: 240px; margin-top: 20px; margin-right: 20px">-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <span style="font-size: 16px; line-height: 36px">妆造服务</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- <el-select v-model="value2" placeholder="选择妆造编号" @change="(event: any) => loadForm2(event)" :disabled="typeSelect" size="large">-->
|
||||
<!-- <el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<div style="display: flex; justify-content: center; align-items: center; position: absolute; right: 40px;">
|
||||
<el-form-item label="摄影服务" prop="type" style="width: 240px; margin-top: 20px; margin-right: 20px">
|
||||
<template #label>
|
||||
<span style="font-size: 16px; line-height: 36px">摄影服务</span>
|
||||
</template>
|
||||
<el-select v-model="value1" placeholder="选择摄影编号" @change="(event: any) => loadForm1(event)" :disabled="typeSelect" size="large">
|
||||
<el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="妆造服务" prop="type" style="width: 240px; margin-top: 20px; margin-right: 20px">
|
||||
<template #label>
|
||||
<span style="font-size: 16px; line-height: 36px">妆造服务</span>
|
||||
</template>
|
||||
<el-select v-model="value2" placeholder="选择妆造编号" @change="(event: any) => loadForm2(event)" :disabled="typeSelect" size="large">
|
||||
<el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-button class="ml-5" type="primary" @click="editSpecialProducts" :disabled="isBtnShow1" style="height: 30px;">编辑</el-button>
|
||||
<el-button type="success" @click="saveSpecialProducts" :disabled="isBtnShow2" style="height:30px">保存</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <el-button class="ml-5" type="primary" @click="editSpecialProducts" :disabled="isBtnShow1" style="height: 30px;">编辑</el-button>-->
|
||||
<!-- <el-button type="success" @click="saveSpecialProducts" :disabled="isBtnShow2" style="height:30px">保存</el-button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div style="margin: 15px 0">
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
|
|
@ -143,6 +140,7 @@
|
|||
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间段抽屉 -->
|
||||
<el-drawer v-model="drawer" :title="'当前日期：'+drawerDate.specificDate + ' 服装名称：' + outfitName" direction="ltr"
|
||||
@closed="closedDrawer">
|
||||
|
|
@ -170,7 +168,7 @@
|
|||
<el-button type="success" @click="addList">{{ addbtnText }}</el-button>
|
||||
</el-drawer>
|
||||
<!-- 添加日期弹窗 -->
|
||||
<el-dialog v-model="addDateVisible" title="添加日期" width="800">
|
||||
<el-dialog v-model="addDateVisible" title="添加日期" width="500">
|
||||
<outfitCalendarUtil @calendar-info="handleCalendarInfo"></outfitCalendarUtil>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
|
|
@ -338,7 +336,7 @@ const onSearch = (data : String)=>{ //搜索按钮方法
|
|||
searchParams.value.current = 1
|
||||
getOutfitList()
|
||||
}
|
||||
//批量删除服装信息
|
||||
//批量删除服装信息
|
||||
const delBatch = async ()=>{
|
||||
console.log(idList.value);
|
||||
const res = await myAxios.post('/photoProducts/delBatch',{
|
||||
|
|
@ -602,7 +600,8 @@ const loadForm2 = (value: any) => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.headerBg {
|
||||
background-color: #eee !important;
|
||||
.table_page {
|
||||
min-width: 1000px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,43 +6,37 @@
|
|||
</el-card>
|
||||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-card class="form-FormContainer" shadow="never" >
|
||||
<el-form ref="resetFormData" :model="form" label-width="auto" size="large" :disabled="disabledRichText">
|
||||
<el-form ref="resetFormData" :model="form" size="large" :disabled="disabledRichText">
|
||||
<el-form-item label="添加写真展示图片">
|
||||
<PreviewSingleImgUpload :ImgUrlList="form.introImg" @update:goodImgArr="form.introImg = $event"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="服装名称" prop="name" style="width: 300px;" label-width="70px">
|
||||
<el-form-item label="服装名称" prop="name" style="width: 300px;">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price" label-width="70px">
|
||||
<div class="kinds">
|
||||
<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>
|
||||
<!-- 拍摄场地：户外、室内、均可 -->
|
||||
<div class="kinds">
|
||||
<el-form-item label="拍摄场地" prop="type" style="width: 240px;" label-width="70px">
|
||||
<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="type" style="width: 240px;" label-width="80px">
|
||||
<el-form-item label="服装类别" style="width: 232px;" label-width="80px">
|
||||
<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>
|
||||
</div>
|
||||
<div class="numberSelect">
|
||||
<el-form-item label="最小人数" prop="type" style="width: 240px;" label-width="70px">
|
||||
<el-select v-model="form.minNumber" @change="minNum()">
|
||||
<el-form-item label="拍摄场地" 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="type" style="width: 228px;" label-width="80px">
|
||||
<el-select v-model="form.count" @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;" label-width="80px">
|
||||
<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>
|
||||
<el-form-item label="效果图" label-width="70px" v-loading="loading">
|
||||
<el-form-item label="效果图" v-loading="loading">
|
||||
<richTextUtil @richTextContent="getInfo" v-model:disableRich="disabledRichText" v-model:context="previewRichText"/>
|
||||
</el-form-item>
|
||||
<div class="totalButton">
|
||||
|
|
@ -135,8 +129,7 @@ const onSubmit = async () => {
|
|||
id: form.value.id,
|
||||
name: form.value.name,
|
||||
price: form.value.price,
|
||||
minNumber: form.value.minNumber,
|
||||
maxNumber: form.value.maxNumber,
|
||||
count: form.value.count,
|
||||
shotScene: form.value.shotScene,
|
||||
categoryName: form.value.categoryName,
|
||||
introImg: form.value.introImg,
|
||||
|
|
@ -191,7 +184,7 @@ const maxNum =()=>{
|
|||
}
|
||||
|
||||
const getInfo = (info: any) => { //富文本赋值
|
||||
console.log('info', info)
|
||||
// console.log('info', info)
|
||||
previewRichText.value = info
|
||||
form.value.richText = encode64(info)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,20 +33,20 @@
|
|||
</div>
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell-title">订单编号</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄地点</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄日期</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄时间</el-col>
|
||||
<el-col :span="4" class="table-cell-title">妆造服务</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄服务</el-col>
|
||||
<el-col :span="4.8" class="table-cell-title">订单编号</el-col>
|
||||
<el-col :span="4.8" class="table-cell-title">拍摄地点</el-col>
|
||||
<el-col :span="4.8" class="table-cell-title">拍摄日期</el-col>
|
||||
<el-col :span="4.8" class="table-cell-title">拍摄时间</el-col>
|
||||
<el-col :span="4.8" class="table-cell-title">妆造服务</el-col>
|
||||
<!-- <el-col :span="4" class="table-cell-title">拍摄服务</el-col>-->
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.orderNumber }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.isIndoors ? '室内' : '室外' }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.specificDate }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.timePoint }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.isMakeup ? '带妆造' : '不带妆造' }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.isPhotography ? '是' : '否' }}</el-col>
|
||||
<el-col :span="4.8" class="table-cell">{{ orderObj.orderNumber }}</el-col>
|
||||
<el-col :span="4.8" class="table-cell">{{ orderObj.isIndoors ? '室内' : '室外' }}</el-col>
|
||||
<el-col :span="4.8" class="table-cell">{{ orderObj.specificDate }}</el-col>
|
||||
<el-col :span="4.8" class="table-cell">{{ orderObj.timePoint }}</el-col>
|
||||
<el-col :span="4.8" class="table-cell">{{ orderObj.isMakeup ? '带妆造' : '不带妆造' }}</el-col>
|
||||
<!-- <el-col :span="4" class="table-cell">{{ orderObj.isPhotography ? '是' : '否' }}</el-col>-->
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
|
|
@ -141,6 +141,7 @@ const refund = async () => { //退款方法
|
|||
width: 80%;
|
||||
padding: 20px 20px 20px 20px;
|
||||
margin: 20px auto;
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.operate-container {
|
||||
|
|
@ -173,6 +174,7 @@ const refund = async () => { //退款方法
|
|||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
|
|
@ -185,6 +187,7 @@ const refund = async () => { //退款方法
|
|||
color: #606266;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.table-cell-product {
|
||||
|
|
|
|||
165
src/views/OutfitLease/AddOutfit.vue
Normal file
165
src/views/OutfitLease/AddOutfit.vue
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<div class="flexCard">
|
||||
<el-card class="richTextPreview" shadow="never">
|
||||
<div class="titleText">移动端预览</div>
|
||||
<p v-html="previewRichText"></p>
|
||||
</el-card>
|
||||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-card class="form-container" shadow="never" >
|
||||
<div class="form">
|
||||
<el-form ref="resetFormData" :model="form" size="large" >
|
||||
<div>
|
||||
<el-form-item label="服装图片">
|
||||
<ImgSingleUpload @update:goodImgArr="form.image = $event"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="服装名称">
|
||||
<el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="服装类别" prop="type" style="width: 240px;">
|
||||
<el-select v-model="form.categoryId" placeholder="请选择" >
|
||||
<el-option v-for="item in typeList" :key="item" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁天数">
|
||||
<el-input-number v-model="form.period" min="0" :precision="0" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁价格">
|
||||
<el-input-number v-model="form.price" min="0" :precision="2" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="服装效果图">
|
||||
<richTextUtil @richTextContent="getInfo"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否上架">
|
||||
<el-checkbox v-model="form.isShelves" label="上架" size="large" />
|
||||
</el-form-item>
|
||||
<div class="btnBox">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="saveBtn">保存</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, inject } from 'vue';
|
||||
import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
|
||||
import ImgSingleUpload from "@/utils/imgUpload/ImgSingleUpload.vue";
|
||||
import richTextUtil from '@/layout/components/richTextUtil.vue';
|
||||
|
||||
const resetFormData = ref()
|
||||
const reload: any = inject("reload") //导入组件刷新
|
||||
const form : any = ref({ //添加实体类商品的表单
|
||||
name: '',
|
||||
categoryId: '',
|
||||
price: 0,
|
||||
period: 0,
|
||||
image: '',
|
||||
richText: '',
|
||||
isShelves: false
|
||||
})
|
||||
const typeList : any = ref([])
|
||||
const previewRichText : any = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
getOutfitType()
|
||||
})
|
||||
|
||||
const getOutfitType = async () => {
|
||||
const res= await myAxios.post('/clothesCategory/list/web')
|
||||
// console.log(res.data)
|
||||
if(res.data.code === 1) {
|
||||
typeList.value = res.data.data
|
||||
}
|
||||
}
|
||||
|
||||
//提交表单
|
||||
const onSubmit = async () => {
|
||||
// console.log('表单--->',form.value)
|
||||
const values = Object.values(form.value );
|
||||
// 使用some()方法来检查是否有任何值为空
|
||||
if (values.some((value: any) => value === null || value === undefined || value === '') || form.value.period === 0 || form.value.price === 0) {
|
||||
WarnInfo('请检查表单数据是否完整填写')
|
||||
return; //空返回结束函数
|
||||
}
|
||||
const res = await myAxios.post('/clothes/add', {
|
||||
name: form.value.name,
|
||||
categoryId: form.value.categoryId,
|
||||
price: form.value.price,
|
||||
period: form.value.period,
|
||||
image: form.value.image,
|
||||
richText: form.value.richText,
|
||||
isShelves: form.value.isShelves ? 1 : 0
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('提交成功')
|
||||
form.value = {}
|
||||
reload() //上传完后重置表单
|
||||
} else {
|
||||
WarnInfo('服务错误')
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//清除表单
|
||||
const resetForm = () => {
|
||||
resetFormData.value.resetFields()
|
||||
}
|
||||
|
||||
const getInfo = (info: any) => { //富文本赋值
|
||||
// console.log('info', info)
|
||||
previewRichText.value = info
|
||||
form.value.richText = encode64(info)
|
||||
}
|
||||
|
||||
function encode64(text: string): string {
|
||||
return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flexCard {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.richTextPreview {
|
||||
height: 80vh;
|
||||
overflow-y: auto;
|
||||
word-break: break-all;
|
||||
width: 400px;
|
||||
margin-right: 10px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 700px;
|
||||
/*margin: 0 auto;*/
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
.form {
|
||||
/* width: 500px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
219
src/views/OutfitLease/LeaseOrderDetail.vue
Normal file
219
src/views/OutfitLease/LeaseOrderDetail.vue
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<div class="detail-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="operate-container">
|
||||
<i class="el-icon-warning color-danger" style="margin: 10px 10px 0 20px"><el-icon><WarnTriangleFilled /></el-icon></i>
|
||||
<span class="color-danger">当前订单状态：{{ orderObj.orderStatus }}</span>
|
||||
<div class="operate-button-container" v-show="orderObj.orderStatus === '待支付'">
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要取消订单吗？" @confirm="cancelOrder" 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>
|
||||
<div class="operate-button-container" v-show="orderObj.orderStatus === '待发货'">
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="refund" 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>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-icon><List /></el-icon>
|
||||
<span class="font-small">基本信息</span>
|
||||
</div>
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="8" class="table-cell-title">订单编号</el-col>
|
||||
<el-col :span="8" class="table-cell-title">租赁天数</el-col>
|
||||
<el-col :span="8" class="table-cell-title">取货时间</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8" class="table-cell">{{ orderObj.orderNumber }}</el-col>
|
||||
<el-col :span="8" class="table-cell">{{ orderObj.rentDays }}</el-col>
|
||||
<el-col :span="8" class="table-cell">{{ orderObj.pickupTime }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-icon><List /></el-icon>
|
||||
<span class="font-small">收货人信息</span>
|
||||
</div>
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="12" class="table-cell-title">联系人</el-col>
|
||||
<el-col :span="12" class="table-cell-title">手机号码</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="table-cell">{{ contactsSnapshot.name }}</el-col>
|
||||
<el-col :span="12" class="table-cell">{{ contactsSnapshot.phone }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-icon><List /></el-icon>
|
||||
<span class="font-small">服装信息</span>
|
||||
</div>
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="6" class="table-cell-title">服装图片</el-col>
|
||||
<el-col :span="6" class="table-cell-title">服装名</el-col>
|
||||
<el-col :span="6" class="table-cell-title">服装类别</el-col>
|
||||
<el-col :span="6" class="table-cell-title">服装价格</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6" class="table-cell-product"><img :src="downloadUrl + clothesSnapshot.image"
|
||||
style="height: 70px; width: 70px;" alt=""></el-col>
|
||||
<el-col :span="6" class="table-cell-product">{{ clothesSnapshot.name }}</el-col>
|
||||
<el-col :span="6" class="table-cell-product">{{ categoryName }}</el-col>
|
||||
<el-col :span="6" class="table-cell-product">{{ clothesSnapshot.price }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="float: right;margin: 20px">
|
||||
合计：<span class="color-danger">￥{{ totalAmount }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onBeforeMount, onMounted, ref} from "vue";
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
|
||||
import { useRoute } from "vue-router";
|
||||
import { downloadUrl } from '@/utils/formatImgUpload'
|
||||
|
||||
const route = useRoute();
|
||||
const orderObj: any = ref({}) //订单对象
|
||||
const orderStatus = ref<String>() //订单状态
|
||||
const contactsSnapshot: any = ref({}) //联系人快照
|
||||
const clothesSnapshot: any = ref({}) //商品快照
|
||||
const totalAmount: any = ref(0) //订单总价
|
||||
const categoryName = ref('') //显示的服装类别
|
||||
|
||||
onBeforeMount(()=>{
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getOrderItem()
|
||||
})
|
||||
|
||||
const getClothesType = async () => { //获取服装类别信息
|
||||
const res = await myAxios.post('/clothesCategory/list/web')
|
||||
if(res.data.code === 1) {
|
||||
res.data.data.forEach((item : any) => {
|
||||
if(item.id === orderObj.value.clothesSnapshot.categoryId) {
|
||||
categoryName.value = item.name
|
||||
console.log('name--->',item)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getOrderItem = async () => { //获取订单详情
|
||||
const oid = route.params.id //传递订单id
|
||||
const res = await myAxios.post('/clothesRent/list', { id: oid })
|
||||
// console.log('后端传来的值---->',res.data.data)
|
||||
if (res.data.code === 1) {
|
||||
orderObj.value = res.data.data.records[0];
|
||||
orderStatus.value = res.data.data.records[0].orderStatus
|
||||
contactsSnapshot.value = res.data.data.records[0].contactsSnapshot
|
||||
clothesSnapshot.value = res.data.data.records[0].clothesSnapshot
|
||||
totalAmount.value = res.data.data.records[0].totalAmount
|
||||
await getClothesType()
|
||||
}
|
||||
console.log('orderObj.value', orderObj.value)
|
||||
}
|
||||
const cancelOrder = async () => { //取消订单方法
|
||||
const res = await myAxios.post('/advanceOrder/cancel/id', { id: route.params.id })
|
||||
console.log(res);
|
||||
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('退款成功')
|
||||
getOrderItem()
|
||||
}
|
||||
}
|
||||
const refund = async () => { //退款方法
|
||||
const res = await myAxios.post('/wechat/refund/photo/create', { id: route.params.id })
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('退款成功')
|
||||
getOrderItem()
|
||||
} else {
|
||||
ErrorInfo('退款失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
width: 80%;
|
||||
padding: 20px 20px 20px 20px;
|
||||
margin: 20px auto;
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.operate-container {
|
||||
background: #F2F6FC;
|
||||
height: 80px;
|
||||
margin: -20px -20px 0;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.color-danger {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.operate-button-container {
|
||||
float: right;
|
||||
margin-right: 20px
|
||||
}
|
||||
|
||||
.table-layout {
|
||||
margin-top: 20px;
|
||||
border-left: 1px solid #DCDFE6;
|
||||
border-top: 1px solid #DCDFE6;
|
||||
}
|
||||
|
||||
.table-cell-title {
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
background: #F2F6FC;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.table-cell-product {
|
||||
height: 100px;
|
||||
line-height: 80px;
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
279
src/views/OutfitLease/LeaseOutfitCenter.vue
Normal file
279
src/views/OutfitLease/LeaseOutfitCenter.vue
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
<template>
|
||||
<!-- 修改前请注释以前的 -->
|
||||
<!-- 搜索 -->
|
||||
<div class="table_page">
|
||||
<div>
|
||||
<el-input style="width: 240px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入服装名称" size="default"
|
||||
v-model="outfitName"></el-input>
|
||||
<el-button type="primary" @click="onSearch(outfitName)" style="margin-right: 10px;" size="default">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-select v-model="outfitType" @change="(event: any) => searchByType(event)" placeholder="服装类别"
|
||||
style="width: 240px; margin-right: 10px;" size="default" :clearable="true">
|
||||
<!-- <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"/>-->
|
||||
</el-select>
|
||||
<el-select v-model="state" placeholder="服装状态" @change="(event: any) => searchByState(event)" size="default"
|
||||
style="width: 240px; margin-right: 10px;">
|
||||
<el-option label="已上架" value="1"/>
|
||||
<el-option label="已下架" value="0"/>
|
||||
</el-select>
|
||||
<el-button type="warning" @click="reset" size="default">重置</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' }">
|
||||
<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="downloadUrl + scope.row.image" 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="180">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.price }} 元
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="categoryId" label="服装类别">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ outfitTypeMap.get(scope.row.categoryId) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="period" label="可租赁天数"></el-table-column>
|
||||
<el-table-column label="是否上架">
|
||||
<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.row , 0)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button size="small" @click="ReviseOrView(scope.row, 1)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleOff(scope.$index, 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {ref, onMounted, inject, onBeforeMount} from 'vue';
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { useRouter } from "vue-router";
|
||||
import {downloadUrl} from '@/utils/formatImgUpload'
|
||||
import {WarnInfo} from "@/utils/messageInfo";
|
||||
|
||||
const router = useRouter(); //路由
|
||||
const total = ref(0); //总页数
|
||||
const idList = ref<Number[]>([]);
|
||||
const searchParams: any = ref({ //封装分页
|
||||
current: 1, //当前页码
|
||||
pageSize: 5, //每页显示条数
|
||||
sortField: "id", //根据ID分类
|
||||
sortOrder: "descend" //降序
|
||||
})
|
||||
const outfitName = ref('');
|
||||
const state = ref(''); //根据商品上架状态select栏
|
||||
const tableData: any = ref([]); //实体类商品表格
|
||||
const reload: any = inject("reload") //页面重新刷新
|
||||
const typeList: any = ref([
|
||||
{
|
||||
value: '',
|
||||
label: ''
|
||||
}
|
||||
])
|
||||
const outfitType = ref('') //商品类别
|
||||
const outfitTypeMap = new Map()
|
||||
|
||||
onBeforeMount(()=>{
|
||||
getOutfitList()
|
||||
getTypeList()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// console.log('map--->',outfitTypeMap)
|
||||
})
|
||||
const getOutfitList = async () => {
|
||||
try {
|
||||
const res = await myAxios.post('/clothes/list/page', {...searchParams.value});
|
||||
console.log('res--->', res.data)
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data.records;
|
||||
total.value = parseInt(res.data.data.total) //总数据量，用于分页
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '获取数据失败',
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage({
|
||||
message: '发生错误',
|
||||
});
|
||||
}
|
||||
}
|
||||
const getTypeList = async () => {
|
||||
const res = await myAxios.post('/clothesCategory/list/web', {}) //获取商品列表
|
||||
// console.log('类别--->',res.data)
|
||||
for (let key in res.data.data) { //循环赋值
|
||||
typeList.value[key] = {
|
||||
value: res.data.data[key].id,
|
||||
label: res.data.data[key].name
|
||||
}
|
||||
outfitTypeMap.set(res.data.data[key].id, res.data.data[key].name);
|
||||
}
|
||||
}
|
||||
|
||||
const searchByType = (event: any) => { //通过类别搜索
|
||||
searchParams.value.type = event
|
||||
searchParams.value.current = 1
|
||||
getOutfitList()
|
||||
}
|
||||
|
||||
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('/clothes/delete', {id: index})
|
||||
// console.log(res)
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
await getOutfitList()
|
||||
} else {
|
||||
WarnInfo(res.data.message)
|
||||
}
|
||||
await getTypeList()
|
||||
}
|
||||
//详情或编辑
|
||||
const ReviseOrView = (row: any, flag: number) => {
|
||||
router.push({
|
||||
name: '租赁服装详情',
|
||||
params: {
|
||||
id: row.id,
|
||||
flag: flag
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//下架服装
|
||||
const handleOff = async (index: number, row: any) => {
|
||||
// console.log('此商品--->',row)
|
||||
row.isShelves ? row.isShelves = 0 : row.isShelves = 1 //三元运算符 改变那一行的上架值
|
||||
const res = await myAxios.post('/clothes/shelves', {id: row.id})
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//处理行数大小变化
|
||||
const handleSizeChange = (newSize: any) => {
|
||||
searchParams.value.pageSize = newSize //新的页面数
|
||||
getOutfitList()
|
||||
}
|
||||
//处理当前表格变化
|
||||
const handleCurrentChange = (Current: any) => {
|
||||
searchParams.value.current = Current
|
||||
getOutfitList()
|
||||
}
|
||||
//重置按钮
|
||||
const reset = () => {
|
||||
reload()
|
||||
};
|
||||
|
||||
//批量删除
|
||||
const delBatch = async () => {
|
||||
console.log(idList.value);
|
||||
const res = await myAxios.post('/clothes/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 onSearch = (value: string) => {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table_page {
|
||||
min-width: 1000px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
181
src/views/OutfitLease/LeaseOutfitDetail.vue
Normal file
181
src/views/OutfitLease/LeaseOutfitDetail.vue
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<div class="flexCard">
|
||||
<el-card class="richTextPreview" shadow="never">
|
||||
<div class="titleText">移动端预览</div>
|
||||
<p v-html="previewRichText"></p>
|
||||
</el-card>
|
||||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-card class="form-container" shadow="never" >
|
||||
<div class="form">
|
||||
<el-form ref="resetFormData" :model="form" size="large" :disabled="disabledRichText">
|
||||
<div>
|
||||
<el-form-item label="服装图片">
|
||||
<PreviewSingleImgUpload :ImgUrlList="form.image" @update:goodImgArr="form.image = $event"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="服装名称">
|
||||
<el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="服装类别" prop="type" style="width: 240px;">
|
||||
<el-select v-model="form.categoryId" placeholder="请选择" >
|
||||
<el-option v-for="item in typeList" :key="item" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁天数">
|
||||
<el-input-number v-model="form.period" min="0" :precision="0" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁价格">
|
||||
<el-input-number v-model="form.price" min="0" :precision="2" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="服装效果图" v-loading="loading">
|
||||
<richTextUtil @richTextContent="getInfo" v-model:disableRich="disabledRichText" v-model:context="previewRichText"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否上架">
|
||||
<el-checkbox v-model="form.isShelves" label="上架" size="large" />
|
||||
</el-form-item>
|
||||
<div class="btnBox">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="saveBtn">保存</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, onMounted, inject, onBeforeMount} from 'vue';
|
||||
import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
|
||||
import richTextUtil from '@/layout/components/richTextUtil.vue';
|
||||
import PreviewSingleImgUpload from "@/utils/imgUpload/PreviewSingleImgUpload.vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
const resetFormData = ref()
|
||||
const form : any = ref({})
|
||||
const typeList : any = ref([])
|
||||
const previewRichText : any = ref('')
|
||||
const disabledRichText = ref(false)
|
||||
const route = useRoute(); //路由
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
|
||||
onBeforeMount(()=> {
|
||||
if(route.params.flag === '0') {
|
||||
disabledRichText.value = true
|
||||
}
|
||||
getLeaseOutfitInfo()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getOutfitType()
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},1500)
|
||||
})
|
||||
|
||||
const getLeaseOutfitInfo = async () => { //获取服装信息
|
||||
const res = await myAxios.post('/clothes/query/id',{ id: route.params.id })
|
||||
// console.log('服装详细信息--->',res.data.data)
|
||||
if(res.data.code === 1) {
|
||||
form.value = res.data.data
|
||||
previewRichText.value = res.data.data.richText
|
||||
res.data.data.isShelves ? form.value.isShelves = true : form.value.isShelves = false
|
||||
}
|
||||
}
|
||||
|
||||
const getOutfitType = async () => {
|
||||
const res= await myAxios.post('/clothesCategory/list/web')
|
||||
// console.log(res.data)
|
||||
if(res.data.code === 1) {
|
||||
typeList.value = res.data.data
|
||||
}
|
||||
}
|
||||
|
||||
//提交表单
|
||||
const onSubmit = async () => {
|
||||
console.log('表单--->',form.value)
|
||||
const values = Object.values(form.value );
|
||||
// 使用some()方法来检查是否有任何值为空
|
||||
if (values.some((value: any) => value === null || value === undefined || value === '') || form.value.period === 0 || form.value.price === 0) {
|
||||
WarnInfo('请检查表单数据是否完整填写')
|
||||
return; //空返回结束函数
|
||||
}
|
||||
const res = await myAxios.post('/clothes/update', {
|
||||
id: form.value.id,
|
||||
name: form.value.name,
|
||||
categoryId: form.value.categoryId,
|
||||
price: form.value.price,
|
||||
period: form.value.period,
|
||||
image: form.value.image,
|
||||
richText: form.value.richText,
|
||||
isShelves: form.value.isShelves ? 1 : 0
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('提交成功')
|
||||
await router.replace('/LeaseOutfitCenter')
|
||||
} else {
|
||||
WarnInfo('服务错误')
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//清除表单
|
||||
const resetForm = () => {
|
||||
resetFormData.value.resetFields()
|
||||
}
|
||||
|
||||
const getInfo = (info: any) => { //富文本赋值
|
||||
// console.log('info', info)
|
||||
previewRichText.value = info
|
||||
form.value.richText = encode64(info)
|
||||
}
|
||||
|
||||
function encode64(text: string): string {
|
||||
return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flexCard {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.richTextPreview {
|
||||
height: 80vh;
|
||||
overflow-y: auto;
|
||||
word-break: break-all;
|
||||
width: 400px;
|
||||
margin-right: 10px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 700px;
|
||||
/*margin: 0 auto;*/
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
.form {
|
||||
/* width: 500px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
208
src/views/OutfitLease/OutfitLeaseOrderCenter.vue
Normal file
208
src/views/OutfitLease/OutfitLeaseOrderCenter.vue
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<div class="mianContent">
|
||||
<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>
|
||||
<!-- 数据展示层 -->
|
||||
<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 prop="id" label="序号" width="50">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="250"></el-table-column>
|
||||
<el-table-column prop="" label="租赁天数">
|
||||
<template #default="scope">
|
||||
{{ scope.row.clothesSnapshot.period }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="用户名">
|
||||
<template #default="scope">
|
||||
{{ scope.row.contactsSnapshot.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="联系电话" width="150">
|
||||
<template #default="scope">
|
||||
{{ scope.row.contactsSnapshot.phone }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="totalAmount" label="订单实付金额(元)" width="180"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态">
|
||||
<template #default="scope">
|
||||
{{ scope.row.orderStatus === '待发货' ? '待取货' : '已取货' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="260px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180 v-if="['待支付'].includes(scope.row.orderStatus)">
|
||||
<template #reference>
|
||||
<el-button size="small" type="primary" plain>取消订单</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="服装是否移交客户？" @confirm="changeOrderStatus(scope.row,'待收货')" width=180 v-if="['待发货'].includes(scope.row.orderStatus)">
|
||||
<template #reference>
|
||||
<el-button size="small" type="primary" plain>用户已取货</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="租赁是否完成？" @confirm="changeOrderStatus(scope.row,'交易完成')" width=180 v-if="['待收货'].includes(scope.row.orderStatus)">
|
||||
<template #reference>
|
||||
<el-button size="small" type="primary" plain>租赁完成</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger" plain>退款</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import emitter from "@/utils/emitter";
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
const orderNumber = ref('')
|
||||
const searchParams: any = ref({ //封装分页
|
||||
current: 1, //当前页码
|
||||
pageSize: 5, //每页显示条数
|
||||
sortField: "id", //根据ID分类
|
||||
sortOrder: "descend", //降序
|
||||
orderType: 'service'
|
||||
})
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
onMounted(() => {
|
||||
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 () => {
|
||||
try {
|
||||
searchParams.value.orderNumber = orderNumber.value
|
||||
const res = await myAxios.post('/clothesRent/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 showDetail = (row: any) => {
|
||||
router.push({ //不会将参数显示到地址栏中,这么做要修改routes中对应的path
|
||||
name: '租赁订单详情',
|
||||
params: {
|
||||
id: row.id
|
||||
}
|
||||
})
|
||||
};
|
||||
const changeOrderStatus = async (row: any, msg : string) => { //改变订单状态
|
||||
const res = await myAxios.post('/clothesRent/update/orderStatus',{
|
||||
id: row.id,
|
||||
orderStatus: msg
|
||||
})
|
||||
if(res.data.code === 1) {
|
||||
await getOrderList()
|
||||
SuccessInfo('更新成功')
|
||||
} else {
|
||||
WarnInfo(res.data.message)
|
||||
}
|
||||
}
|
||||
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 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;
|
||||
/* 设置字体 */
|
||||
}
|
||||
|
||||
.mianContent {
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
}
|
||||
</style>
|
||||
153
src/views/OutfitLease/OutfitType.vue
Normal file
153
src/views/OutfitLease/OutfitType.vue
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<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="类别名" size="large">
|
||||
<el-input v-model="typeForm.name" />
|
||||
</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="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>
|
||||
<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 { ElMessage } from 'element-plus';
|
||||
import { ErrorInfo, SuccessInfo } from '@/utils/messageInfo';
|
||||
import { onMounted, ref } from 'vue'
|
||||
import myAxios from '@/api/myAxios';
|
||||
const selectedItems = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const loading = ref(false) //加载
|
||||
|
||||
//表单数据
|
||||
const typeForm = ref({
|
||||
id: 0,
|
||||
name: ''
|
||||
})
|
||||
//表格数据
|
||||
const tableData = ref([])
|
||||
const flag = ref(0)
|
||||
onMounted(() => {
|
||||
getTypeList()
|
||||
})
|
||||
//获取服装类别列表
|
||||
const getTypeList = async () => {
|
||||
const res = await myAxios.post('/clothesCategory/list/web')
|
||||
// console.log(res.data.data)
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data
|
||||
} else {
|
||||
ElMessage.error('获取类别列表失败，请检查服务')
|
||||
}
|
||||
}
|
||||
//新增类别
|
||||
const showForm = async () => {
|
||||
resetForm()
|
||||
dialogVisible.value = true;
|
||||
flag.value = 0
|
||||
}
|
||||
//取消
|
||||
const cancel = () => {
|
||||
dialogVisible.value = false
|
||||
resetForm()
|
||||
}
|
||||
//新增类别
|
||||
const addOrUpdateType = async () => {
|
||||
if (typeForm.value.name?.indexOf(' ') !== -1 ||
|
||||
typeForm.value.name == '' ) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '不能为空格/空字符串'
|
||||
})
|
||||
return
|
||||
}
|
||||
//取消展示表单
|
||||
dialogVisible.value = false;
|
||||
if (flag.value === 0) {
|
||||
const res = await myAxios.post('/clothesCategory/add', {
|
||||
name: typeForm.value.name
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
//提交成功后，之间重置表格
|
||||
resetForm()
|
||||
SuccessInfo('添加成功')
|
||||
} else {
|
||||
ElMessage.error('提交失败')
|
||||
}
|
||||
}
|
||||
if( flag.value === 1 ) {
|
||||
const res = await myAxios.post('/clothesCategory/update',{
|
||||
id : typeForm.value.id,
|
||||
name: typeForm.value.name
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
//提交成功后，之间重置表格
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功'
|
||||
})
|
||||
} else {
|
||||
ElMessage.error('更新失败')
|
||||
}
|
||||
}
|
||||
getTypeList()
|
||||
}
|
||||
//重置表单
|
||||
const resetForm = () => {
|
||||
typeForm.value = {
|
||||
id: 0,
|
||||
name: ''
|
||||
}
|
||||
};
|
||||
const handleSelectionChange = (row: any) => {
|
||||
selectedItems.value = JSON.parse(JSON.stringify(row))
|
||||
}
|
||||
//编辑
|
||||
const editShowForm = (index: number, row: any) => {
|
||||
dialogVisible.value = true
|
||||
typeForm.value = JSON.parse(JSON.stringify(row))
|
||||
flag.value = 1
|
||||
// console.log('本行--->',row)
|
||||
}
|
||||
//删除类别 请求体里只传id即可
|
||||
const Delete_type = async (index: number) => {
|
||||
const res = await myAxios.post('/clothesCategory/delete', { id: index })
|
||||
// console.log(res)
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
}
|
||||
await getTypeList()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-card class="form-FormContainer" shadow="never">
|
||||
<el-form ref="resetFormData" :model="form" size="large">
|
||||
<el-form-item label="添加课程展示图片" label-width="auto">
|
||||
<el-form-item label="课程展示图片" label-width="auto">
|
||||
<ImgSingleUpload @update:goodImgArr="form.goodImg = $event"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="体验课名称" prop="name" style="width: 250px" >
|
||||
|
|
@ -36,10 +36,11 @@
|
|||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<div class="diyConponent">
|
||||
<el-card class="form-RichTextContainer" shadow="never">
|
||||
<calendarUtil @calendar-info="getDateInfo"></calendarUtil>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -131,18 +132,25 @@ const getDateInfo =(info: any)=> {
|
|||
<style scoped>
|
||||
|
||||
.form-FormContainer {
|
||||
width: 600px;
|
||||
width: 540px;
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
min-width: 600px;
|
||||
min-width: 540px;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
.form-RichTextContainer {
|
||||
width: 550px;
|
||||
min-width: 550px;
|
||||
width: 460px;
|
||||
min-width: 460px;
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.diyConponent /deep/ .el-card__body {
|
||||
padding: 20px 0 10px 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.flexCard {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
<el-dialog
|
||||
v-model="addDateVisible"
|
||||
title="添加日期"
|
||||
width="800"
|
||||
width="500"
|
||||
>
|
||||
<calendarUtil @calendar-info="handleCalendarInfo"></calendarUtil>
|
||||
<template #footer>
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage , type UploadProps , genFileId ,type UploadRawFile } from 'element-plus';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {ref, onMounted, inject} from 'vue';
|
||||
import myAxios from "@/api/myAxios";
|
||||
import calendarUtil from '@/layout/components/calendarUtil.vue';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user