17 changed files with 487 additions and 24 deletions
@ -0,0 +1,240 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<el-dialog |
||||
|
v-model="showDialog" |
||||
|
title="课程安排" |
||||
|
width="50%" |
||||
|
class="diy-dialog-wrap" |
||||
|
:destroy-on-close="true" |
||||
|
> |
||||
|
<view class="detail-root"> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="student-list"> |
||||
|
<view |
||||
|
v-for="(stu, idx) in form.students" |
||||
|
:key="idx" |
||||
|
class="student-item" |
||||
|
> |
||||
|
<view class="avatar">{{ stu.name.charAt(0) }}</view> |
||||
|
<view class="info"> |
||||
|
<view class="name">{{ stu.name }}</view> |
||||
|
<view class="desc">{{ getStatusText(stu.status) }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view |
||||
|
v-for="n in form.courseInfo.available_capacity" |
||||
|
:key="'empty-' + n" |
||||
|
class="student-item empty" |
||||
|
@click="addStudent(n)" |
||||
|
> |
||||
|
<view class="avatar empty-avatar">+</view> |
||||
|
<view class="info"> |
||||
|
<view class="name">空位</view> |
||||
|
<view class="desc">点击添加学员</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</el-dialog> |
||||
|
|
||||
|
|
||||
|
<!-- 选择资源弹窗 --> |
||||
|
<el-dialog v-model="showResourceDialog" title="选择资源" width="30%" :destroy-on-close="true"> |
||||
|
<el-select v-model="selectedResourceId" placeholder="请选择资源" style="width: 100%;"> |
||||
|
<el-option |
||||
|
v-for="item in form.resourceList" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
|
||||
|
<template #footer> |
||||
|
<el-button @click="showResourceDialog = false">取消</el-button> |
||||
|
<el-button type="primary" @click="confirmAddStudent">确定</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref,reactive } from 'vue' |
||||
|
import { |
||||
|
scheduleList, |
||||
|
resourceList, |
||||
|
getCourseInfo, |
||||
|
addSchedule |
||||
|
} from '@/app/api/course_schedule' |
||||
|
|
||||
|
const showResourceDialog = ref(false) // 控制资源选择弹窗显示 |
||||
|
const selectedResourceId = ref(null) // 当前选择的资源ID |
||||
|
const pendingAddIndex = ref(null) // 点击的空位索引（可选） |
||||
|
|
||||
|
|
||||
|
|
||||
|
let showDialog = ref(false) |
||||
|
const loading = ref(false) |
||||
|
|
||||
|
|
||||
|
let form = reactive({ |
||||
|
course_id: 0, |
||||
|
resource_id: 0, |
||||
|
students:[], |
||||
|
resourceList:[], |
||||
|
courseInfo:[] |
||||
|
}) |
||||
|
|
||||
|
const setFormData = async (course_id='',resource_id='') => { |
||||
|
form.course_id = course_id |
||||
|
form.resource_id = resource_id |
||||
|
|
||||
|
init() |
||||
|
} |
||||
|
|
||||
|
const init = async () => { |
||||
|
const data = await getCourseInfo({id:form.course_id}); |
||||
|
|
||||
|
form.courseInfo = data.data |
||||
|
|
||||
|
const response = await scheduleList({schedule_id:form.course_id}); |
||||
|
|
||||
|
form.students = response.data |
||||
|
|
||||
|
const res = await resourceList({}); |
||||
|
|
||||
|
form.resourceList = res.data |
||||
|
|
||||
|
loading.value = false |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const addStudent = async (index) => { |
||||
|
pendingAddIndex.value = index |
||||
|
showResourceDialog.value = true |
||||
|
|
||||
|
} |
||||
|
|
||||
|
const confirmAddStudent = async () => { |
||||
|
|
||||
|
const data = { |
||||
|
'resources_id':selectedResourceId.value, |
||||
|
'person_type':'customer_resource', |
||||
|
'schedule_id':form.course_id, |
||||
|
'course_date':form.courseInfo.course_date, |
||||
|
'time_slot':form.courseInfo.time_slot |
||||
|
}; |
||||
|
|
||||
|
const response = await addSchedule(data); |
||||
|
|
||||
|
init(); |
||||
|
|
||||
|
showResourceDialog.value = false |
||||
|
} |
||||
|
|
||||
|
const getStatusText = (status) => { |
||||
|
const statusMap = { |
||||
|
0: '待上课', |
||||
|
1: '已上课', |
||||
|
2: '请假', |
||||
|
} |
||||
|
return statusMap[status] || status |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
showDialog, |
||||
|
setFormData |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.detail-root { |
||||
|
// background: #232323; |
||||
|
min-height: 100vh; |
||||
|
// padding-bottom: 30px; |
||||
|
} |
||||
|
.header { |
||||
|
padding: 40px 30px 20px 30px; |
||||
|
.title { |
||||
|
color: #fff; |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.date { |
||||
|
color: #29d3b4; |
||||
|
font-size: 26px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
.section { |
||||
|
margin: 30px; |
||||
|
background: #434544; |
||||
|
border-radius: 16px; |
||||
|
// padding: 30px 20px; |
||||
|
} |
||||
|
.section-title { |
||||
|
color: #ffd86b; |
||||
|
font-size: 28px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.student-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
.student-item { |
||||
|
background: #333; |
||||
|
border-radius: 12px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 18px 24px; |
||||
|
min-width: 260px; |
||||
|
|
||||
|
.avatar { |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
border-radius: 50%; |
||||
|
background: #29d3b4; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 32px; |
||||
|
margin-right: 18px; |
||||
|
} |
||||
|
.info { |
||||
|
.name { |
||||
|
color: #fff; |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
.desc { |
||||
|
color: #bdbdbd; |
||||
|
font-size: 22px; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
} |
||||
|
&.empty { |
||||
|
border: 2px dashed #ffd86b; |
||||
|
background: #232323; |
||||
|
margin-left: 20px; |
||||
|
margin-top: 10px; |
||||
|
height: 200px; |
||||
|
.avatar.empty-avatar { |
||||
|
background: #ffd86b; |
||||
|
color: #232323; |
||||
|
font-size: 36px; |
||||
|
} |
||||
|
.info .name { |
||||
|
color: #ffd86b; |
||||
|
} |
||||
|
.info .desc { |
||||
|
color: #ffd86b; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue