Skip to content

C
confucius
Commit 8fa175a9 authored by 罗超's avatar 罗超
Browse files
Options

22

parent 39b2419f
Show whitespace changes
Inline Side-by-side
Showing with 1924 additions and 732 deletions
package.json
View file @ 8fa175a9
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@quasar/extras": "^1.0.0", "@quasar/extras": "^1.0.0",
"@quasar/quasar-ui-qcalendar": "^3.4.1",
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"ali-oss": "^6.12.0", "ali-oss": "^6.12.0",
"apexcharts": "^3.32.0", "apexcharts": "^3.32.0",
......
src/api/studyabroad/subscribe.js 0 → 100644
View file @ 8fa175a9
import request from '../../utils/request'
/**
* 获取预约课管理统计
*/
export function GetAppointmentPlanStat(data) {
return request({
url: '/TeacherClass/GetAppointmentPlanStat',
method: 'post',
data
})
}
/**
* 获取约课配置
*/
export function GetAppointmentConfig(data) {
return request({
url: '/Scroll/GetAppointmentConfig',
method: 'post',
data
})
}
/**
* 获取老师的空闲上课时段
*/
export function GetCanTeacherClassTimeList(data) {
return request({
url: '/Scroll/GetCanTeacherClassTimeList',
method: 'post',
data
})
}
/**
* 获取可预约的学生列表
*/
export function GetCanAppointmentStuList(data) {
return request({
url: '/Scroll/GetCanAppointmentStuList',
method: 'post',
data
})
}
/**
* 获取预约学生的详情
*/
export function GetStuAppointmentInfo(data) {
return request({
url: '/Scroll/GetStuAppointmentInfo',
method: 'post',
data
})
}
/**
* 后台约课
*/
export function SetAdminScrollAppointment(data) {
return request({
url: '/Scroll/SetAdminScrollAppointment',
method: 'post',
data
})
}/**
* 后台取消预约
*/
export function CancelAppointment(data) {
return request({
url: '/Scroll/CancelAppointment',
method: 'post',
data
})
}/**
* 后台确认约课
*/
export function SetSureAppointment(data) {
return request({
url: '/Scroll/SetSureAppointment',
method: 'post',
data
})
}
\ No newline at end of file
src/components/course/course-form.vue
View file @ 8fa175a9
<template> <template>
<q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale"> <q-dialog
v-model="persistent"
persistent
content-class="bg-grey-1"
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 800px; max-width: 900px"> <q-card style="width: 800px; max-width: 900px">
<q-card-section> <q-card-section>
<div class="text-h6"> <div class="text-h6">
...@@ -9,184 +15,460 @@ ...@@ -9,184 +15,460 @@
<q-card-section class="q-pt-none scroll" style="max-height: 70vh"> <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="text-caption q-mb-lg q-px-md text-grey-6">基本设置</div> <div class="text-caption q-mb-lg q-px-md text-grey-6">基本设置</div>
<div class="row wrap"> <div class="row wrap">
<q-input filled stack-label :dense="false" v-model="objOption.CourseName" ref="CourseName" <q-input
class="col-6 q-pr-lg q-pb-lg" label="课程名称" :rules="[(val) => !!val || '请填写课程名称']" /> filled
<q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="chooseTeacher" stack-label
ref="Teacher_Id" :options="TeacherList" label="教师团队" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value :dense="false"
map-options multiple /> v-model="objOption.CourseName"
ref="CourseName"
class="col-6 q-pr-lg q-pb-lg"
label="课程名称"
:rules="[val => !!val || '请填写课程名称']"
/>
<q-select
filled
stack-label
option-value="TId"
option-label="TeacherName"
v-model="chooseTeacher"
ref="Teacher_Id"
:options="TeacherList"
label="教师团队"
:dense="false"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
multiple
/>
</div> </div>
<div class="row wrap"> <div class="row wrap">
<div class="col-6 q-pb-lg q-pr-lg"> <div class="col-6 q-pb-lg q-pr-lg">
<q-uploader :style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }" <q-uploader
style="width: auto; height: 139px" flat hide-upload-btn max-files="1" label="课程封面" accept=".jpg, image/*" :style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }"
:factory="uploadFile" auto-upload> style="width: auto; height: 139px"
flat
hide-upload-btn
max-files="1"
label="课程封面"
accept=".jpg, image/*"
:factory="uploadFile"
auto-upload
>
</q-uploader> </q-uploader>
</div> </div>
<div class="col-6 q-pr-lg q-pb-lg"> <div class="col-6 q-pr-lg q-pb-lg">
<q-input v-model="objOption.CourseFeature" filled type="textarea" placeholder="课程特色" /> <q-input
</div> v-model="objOption.CourseFeature"
</div> filled
<div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="isShowPrice == 1"> type="textarea"
placeholder="课程特色"
/>
</div>
</div>
<div
class="text-caption q-mb-lg q-px-md text-grey-6"
v-if="isShowPrice == 1"
>
价格设置 价格设置
<q-toggle style="float: right" size="md" left-label label="阶梯定价" color="primary" :false-value="0" <q-toggle
:true-value="1" v-model="objOption.IsOpenStepPrice" /> style="float: right"
size="md"
left-label
label="阶梯定价"
color="primary"
:false-value="0"
:true-value="1"
v-model="objOption.IsOpenStepPrice"
/>
</div> </div>
<div class="row wrap" v-if="isShowPrice == 1"> <div class="row wrap" v-if="isShowPrice == 1">
<div class="col-6"> <div class="col-6">
<q-input filled stack-label :dense="false" v-model="objOption.OriginalPrice" ref="OriginalPrice" <q-input
class="col-6 q-pr-lg q-pb-lg" label="原价" @keyup.native="checkPrice(objOption, 'OriginalPrice')" filled
:rules="[(val) => !!val || '请填写原价']" /> stack-label
:dense="false"
v-model="objOption.OriginalPrice"
ref="OriginalPrice"
class="col-6 q-pr-lg q-pb-lg"
label="原价"
@keyup.native="checkPrice(objOption, 'OriginalPrice')"
:rules="[val => !!val || '请填写原价']"
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input filled stack-label :dense="false" v-model="objOption.SellPrice" ref="SellPrice" <q-input
class="col-6 q-pr-lg q-pb-lg" label="卖价" @keyup.native="checkPrice(objOption, 'SellPrice')" filled
:rules="[(val) => !!val || '请填写卖价']" /> stack-label
:dense="false"
v-model="objOption.SellPrice"
ref="SellPrice"
class="col-6 q-pr-lg q-pb-lg"
label="卖价"
@keyup.native="checkPrice(objOption, 'SellPrice')"
:rules="[val => !!val || '请填写卖价']"
/>
</div> </div>
</div> </div>
<div class="row wrap" style="margin: 20px 0" v-if="isShowPrice == 1"> <div class="row wrap" style="margin: 20px 0" v-if="isShowPrice == 1">
<div class="col-6"> <div class="col-6">
<q-btn v-if="objOption.IsOpenStepPrice == 1" size="10px" @click="addStepPrice()" round color="primary" <q-btn
icon="iconfont icon-img_haha" /> v-if="objOption.IsOpenStepPrice == 1"
size="10px"
@click="addStepPrice()"
round
color="primary"
icon="iconfont icon-img_haha"
/>
</div> </div>
</div> </div>
<template v-if="objOption.IsOpenStepPrice == 1 && isShowPrice == 1"> <template v-if="objOption.IsOpenStepPrice == 1 && isShowPrice == 1">
<div class="row wrap" v-for="(item, index) in ladderPriceList" :key="index"> <div
class="row wrap"
v-for="(item, index) in ladderPriceList"
:key="index"
>
<div class="col-6"> <div class="col-6">
<q-input filled stack-label v-model="item.PersionNum" @keyup.native="checkInteger(item, 'PersionNum')" <q-input
:dense="false" class="col-6 q-pr-lg q-pb-lg" label="人" /> filled
stack-label
v-model="item.PersionNum"
@keyup.native="checkInteger(item, 'PersionNum')"
:dense="false"
class="col-6 q-pr-lg q-pb-lg"
label="人"
/>
</div> </div>
<div class="col-6" style="position: relative"> <div class="col-6" style="position: relative">
<q-input filled stack-label v-model="item.PersionPrice" @keyup.native="checkPrice(item, 'PersionPrice')" <q-input
:dense="false" class="col-6 q-pr-lg q-pb-lg" label="价格" /> filled
<q-btn style="position: absolute; right: -5px; top: 20px" size="6px" @click="delStepPrice(index)" round stack-label
color="red" icon="iconfont icon-guanbi1" /> v-model="item.PersionPrice"
@keyup.native="checkPrice(item, 'PersionPrice')"
:dense="false"
class="col-6 q-pr-lg q-pb-lg"
label="价格"
/>
<q-btn
style="position: absolute; right: -5px; top: 20px"
size="6px"
@click="delStepPrice(index)"
round
color="red"
icon="iconfont icon-guanbi1"
/>
</div> </div>
</div> </div>
</template> </template>
<div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="isShowPrice == 1"> <div
class="text-caption q-mb-lg q-px-md text-grey-6"
v-if="isShowPrice == 1"
>
可续费课程 可续费课程
<q-toggle style="float: right" size="md" left-label label="可续费课程" color="primary" :false-value="0" <q-toggle
:true-value="1" v-model="objOption.IsRenew" /> style="float: right"
size="md"
left-label
label="可续费课程"
color="primary"
:false-value="0"
:true-value="1"
v-model="objOption.IsRenew"
/>
</div> </div>
<div class="row wrap" v-if="objOption.IsRenew == 1 && isShowPrice == 1"> <div class="row wrap" v-if="objOption.IsRenew == 1 && isShowPrice == 1">
<div class="col-6"> <div class="col-6">
<q-input filled stack-label :dense="false" v-model="objOption.RenewOgPrice" ref="RenewOgPrice" <q-input
class="col-6 q-pr-lg q-pb-lg" label="续费原价" @keyup.native="checkPrice(objOption, 'RenewOgPrice')" filled
:rules="[(val) => !!val || '请填写续费原价']" /> stack-label
:dense="false"
v-model="objOption.RenewOgPrice"
ref="RenewOgPrice"
class="col-6 q-pr-lg q-pb-lg"
label="续费原价"
@keyup.native="checkPrice(objOption, 'RenewOgPrice')"
:rules="[val => !!val || '请填写续费原价']"
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input filled stack-label :dense="false" v-model="objOption.RenewSlPrice" ref="RenewSlPrice" <q-input
class="col-6 q-pr-lg q-pb-lg" label="续费售价" @keyup.native="checkPrice(objOption, 'RenewSlPrice')" filled
:rules="[(val) => !!val || '请填写续费售价']" /> stack-label
:dense="false"
v-model="objOption.RenewSlPrice"
ref="RenewSlPrice"
class="col-6 q-pr-lg q-pb-lg"
label="续费售价"
@keyup.native="checkPrice(objOption, 'RenewSlPrice')"
:rules="[val => !!val || '请填写续费售价']"
/>
</div> </div>
</div> </div>
<div class="row wrap"> <div class="row wrap">
<div class="col-6"> <div class="col-6">
<q-input filled stack-label :disable="!isHaveCourseHoursEdit" <q-input
@keyup.native="checkPrice(objOption, 'ClassHours')" reverse-fill-mask v-model="objOption.ClassHours" filled
ref="ClassHours" class="col-6 q-pr-lg q-pb-lg" label="课时数量" :rules="[(val) => !!val || '请填写课时信息']" /> stack-label
:disable="!isHaveCourseHoursEdit"
@keyup.native="checkPrice(objOption, 'ClassHours')"
reverse-fill-mask
v-model="objOption.ClassHours"
ref="ClassHours"
class="col-6 q-pr-lg q-pb-lg"
label="课时数量"
:rules="[val => !!val || '请填写课时信息']"
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-select filled stack-label @input="getCourseSubject(objOption.CateId)" option-value="CateId" <q-select
option-label="CateName" v-model="objOption.CateId" ref="CateId" :options="TreeCategoryList" label="所属系列" filled
class="col-6 q-pr-lg q-pb-lg" emit-value map-options :rules="[(val) => !!val || '请选择课程所属系列']" /> stack-label
@input="getCourseSubject(objOption.CateId)"
option-value="CateId"
option-label="CateName"
v-model="objOption.CateId"
ref="CateId"
:options="TreeCategoryList"
label="所属系列"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
:rules="[val => !!val || '请选择课程所属系列']"
/>
</div> </div>
</div> </div>
<div class="row wrap"> <div class="row wrap">
<div class="col-6"> <div class="col-6">
<q-select filled stack-label option-value="Id" disable option-label="SubjectName" <q-select
v-model="objOption.CourseSubject" ref="CourseSubject" :options="courseSubjectList" label="所属科目" filled
class="col-6 q-pr-lg q-pb-lg" emit-value map-options /> stack-label
option-value="Id"
disable
option-label="SubjectName"
v-model="objOption.CourseSubject"
ref="CourseSubject"
:options="courseSubjectList"
label="所属科目"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.CourseRate" <q-select
ref="CourseRate" :options="courseLevelList" label="课程等级" class="col-6 q-pr-lg q-pb-lg" emit-value filled
map-options /> stack-label
option-value="Id"
option-label="Name"
v-model="objOption.CourseRate"
ref="CourseRate"
:options="courseLevelList"
label="课程等级"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<q-input filled stack-label v-model="objOption.ScrollMinNum" ref="ScrollMinNum" class="col-6 q-pr-lg q-pb-lg" <q-field
label="最小上课人数" :rules="[(val) => !!val || '请填写最小上课人数']" /> label="是否支持约课报名"
<q-input filled stack-label v-model="objOption.ScrollMaxNum" ref="ScrollMaxNum" class="col-6 q-pr-lg q-pb-lg" stack-label
label="最大上课人数" :rules="[(val) => !!val || '请填写最大上课人数']" /> filled
</div> class="col-6 q-pr-lg q-pb-lg"
<div class="row"> >
<q-field label="是否支持约课报名" stack-label filled class="col-6 q-pr-lg q-pb-lg">
<template v-slot:control> <template v-slot:control>
<div class="row col-12"> <div class="row col-12">
<q-radio v-model="objOption.IsScrollClass" :val="0" label="否" size="xs" /> <q-radio
<q-radio v-model="objOption.IsScrollClass" :val="1" label="是" size="xs" /> v-model="objOption.IsScrollClass"
:val="0"
label="否"
size="xs"
/>
<q-radio
v-model="objOption.IsScrollClass"
:val="1"
label="是"
size="xs"
/>
</div> </div>
</template> </template>
</q-field> </q-field>
<q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.CourseTimeId" <q-select
ref="CourseTime" :options="CourseTimeList" label="关联上课时段" class="col-6 q-pr-lg q-pb-lg" emit-value filled
map-options /> stack-label
option-value="Id"
option-label="Name"
v-model="objOption.CourseTimeId"
ref="CourseTime"
:options="CourseTimeList"
label="关联上课时段"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
/>
</div>
<div class="row" v-if="objOption.IsScrollClass==1">
<q-input
filled
stack-label
v-model="objOption.ScrollMinNum"
ref="ScrollMinNum"
class="col-6 q-pr-lg q-pb-lg"
label="最小上课人数"
:rules="[val => !!val || '请填写最小上课人数']"
/>
<q-input
filled
stack-label
v-model="objOption.ScrollMaxNum"
ref="ScrollMaxNum"
class="col-6 q-pr-lg q-pb-lg"
label="最大上课人数"
:rules="[val => !!val || '请填写最大上课人数']"
/>
</div> </div>
<div class="row wrap"> <div class="row wrap">
<div class="col-6"> <div class="col-6">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="CourseEmphasis" multiple <q-select
use-chips ref="CourseEmphasis" :options="keynoteList" label="课程重点" class="col-6 q-pr-lg q-pb-lg" filled
emit-value map-options /> stack-label
option-value="Id"
option-label="Name"
v-model="CourseEmphasis"
multiple
use-chips
ref="CourseEmphasis"
:options="keynoteList"
label="课程重点"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
/>
</div> </div>
<div class="col-6 q-pb-lg q-pr-lg"> <div class="col-6 q-pb-lg q-pr-lg">
<q-uploader :style="{ backgroundImage: 'url(' + objOption.B2BIcon + ')' }" style="width: auto; " flat <q-uploader
hide-upload-btn max-files="1" label="图标" accept=".jpg, image/*" :factory="uploadFile2" auto-upload> :style="{ backgroundImage: 'url(' + objOption.B2BIcon + ')' }"
style="width: auto; "
flat
hide-upload-btn
max-files="1"
label="图标"
accept=".jpg, image/*"
:factory="uploadFile2"
auto-upload
>
</q-uploader> </q-uploader>
<q-input filled label="背景颜色" v-model="objOption.B2BBackground" :rules="['anyColor']" class="my-input"> <q-input
filled
label="背景颜色"
v-model="objOption.B2BBackground"
:rules="['anyColor']"
class="my-input"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="colorize" class="cursor-pointer"> <q-icon name="colorize" class="cursor-pointer">
<q-popup-proxy transition-show="scale" transition-hide="scale"> <q-popup-proxy
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="objOption.B2BBackground" /> <q-color v-model="objOption.B2BBackground" />
</q-popup-proxy> </q-popup-proxy>
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
<img id="background" :src="objOption.B2BIcon" height="100" width="100" crossorigin="anonymous" <img
style="display:none" /> id="background"
:src="objOption.B2BIcon"
height="100"
width="100"
crossorigin="anonymous"
style="display:none"
/>
</div> </div>
</div> </div>
<div class="row wrap"> <div class="row wrap">
<div class="col-12 q-pr-lg q-pb-lg"> <div class="col-12 q-pr-lg q-pb-lg">
<q-input v-model="objOption.ContractInfo" filled type="textarea" placeholder="合同补充协议" /> <q-input
v-model="objOption.ContractInfo"
filled
type="textarea"
placeholder="合同补充协议"
/>
</div> </div>
</div> </div>
<div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍</div> <div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍</div>
<ext-editor :defaultMsg="objOption.CourseIntro" classStr="col-12" @getEditValue="getEditValue"></ext-editor> <ext-editor
:defaultMsg="objOption.CourseIntro"
classStr="col-12"
@getEditValue="getEditValue"
></ext-editor>
<div class="row wrap"> <div class="row wrap">
<div class="col-9"> <div class="col-9">
<span>上架端口：</span> <span>上架端口：</span>
<template v-for="(item, index) in SaleplatList"> <template v-for="(item, index) in SaleplatList">
<q-checkbox v-model="choosePlat" :label="item.Name" :val="item.Id" :key="index" /> <q-checkbox
v-model="choosePlat"
:label="item.Name"
:val="item.Id"
:key="index"
/>
</template> </template>
</div> </div>
<div class="col-3"> <div class="col-3">
<q-toggle style="float: right" size="md" left-label label="K12课程" color="primary" :false-value="0" <q-toggle
:true-value="1" v-model="objOption.IsKCourse" /> style="float: right"
</div> size="md"
</div> left-label
<div class="row col-12" v-if="choosePlat.find((e) => e == 4)"> label="K12课程"
color="primary"
:false-value="0"
:true-value="1"
v-model="objOption.IsKCourse"
/>
</div>
</div>
<div class="row col-12" v-if="choosePlat.find(e => e == 4)">
<span class="q-mb-sm">选择分类：</span> <span class="q-mb-sm">选择分类：</span>
<q-card class="full-width"> <q-card class="full-width">
<q-tree class="col-sm-6" :nodes="goodClassify" node-key="Id" label-key="Name" children-key="ChildList" <q-tree
tick-strategy="strict" :ticked.sync="chooseGoodsClassify" default-expand-all class="col-sm-6"
@update:ticked="handleCheckChange" /> :nodes="goodClassify"
node-key="Id"
label-key="Name"
children-key="ChildList"
tick-strategy="strict"
:ticked.sync="chooseGoodsClassify"
default-expand-all
@update:ticked="handleCheckChange"
/>
</q-card> </q-card>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right" class="bg-white"> <q-card-actions align="right" class="bg-white">
<q-btn label="取消" flat color="grey-10" style="font-weight: 400 !important" @click="closeCourseForm" /> <q-btn
<q-btn label="立即提交" color="accent q-px-md" style="font-weight: 400 !important" :loading="saveCourseLoading" label="取消"
@click="saveCourse" /> flat
color="grey-10"
style="font-weight: 400 !important"
@click="closeCourseForm"
/>
<q-btn
label="立即提交"
color="accent q-px-md"
style="font-weight: 400 !important"
:loading="saveCourseLoading"
@click="saveCourse"
/>
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>
<script> <script>
import ColorThief from "colorthief"; import ColorThief from "colorthief";
import { import {
queryCourseCategoryTree, queryCourseCategoryTree,
saveCourseInfo, saveCourseInfo,
queryCourseInfo, queryCourseInfo,
...@@ -194,29 +476,21 @@ ...@@ -194,29 +476,21 @@
getCourseRate, getCourseRate,
getCourseSubject, getCourseSubject,
getCourseEmphasisEnumList getCourseEmphasisEnumList
} from "../../api/course/index"; } from "../../api/course/index";
import { import { getTeacherDropDownList } from "../../api/school/index";
getTeacherDropDownList import { UploadSelfFile } from "../../api/common/common";
} from "../../api/school/index"; import { getScrollCourseTimeList } from "../../api/course/roll";
import { import extEditor from "../common/ext-editor";
UploadSelfFile import { mapState } from "vuex";
} from "../../api/common/common"; export default {
import {
getScrollCourseTimeList,
} from '../../api/course/roll'
import extEditor from "../common/ext-editor";
import {
mapState
} from "vuex";
export default {
components: { components: {
extEditor, extEditor
}, },
props: { props: {
saveObj: { saveObj: {
type: Object, type: Object,
default: null, default: null
}, }
}, },
data() { data() {
return { return {
...@@ -242,15 +516,15 @@ ...@@ -242,15 +516,15 @@
CategoryList: [], CategoryList: [],
CourseRate: "", //课程等级 CourseRate: "", //课程等级
CourseSubject: "", //课程科目 CourseSubject: "", //课程科目
B2BIcon: '', //图标 B2BIcon: "", //图标
B2BBackground: '', //背景 B2BBackground: "", //背景
CourseEmphasis: [], //课程重点 多选 英文逗号分隔 CourseEmphasis: [], //课程重点 多选 英文逗号分隔
ContractInfo: '', //合同补充协议 ContractInfo: "", //合同补充协议
IsScrollClass: 0, // 是否开启滚动开班 1是 0否（默认） IsScrollClass: 0, // 是否开启滚动开班 1是 0否（默认）
ScrollMinNum: 0, // 最小上课人数 ScrollMinNum: 0, // 最小上课人数
ScrollMaxNum: 0, // 最大上课人数 ScrollMaxNum: 0, // 最大上课人数
CourseTimeId: 0, // 关联上课时段 CourseTimeId: 0, // 关联上课时段
ContractInfo: '' //合同补充协议 ContractInfo: "" //合同补充协议
}, },
CourseTimeList: [], //上课时段列表 CourseTimeList: [], //上课时段列表
CourseEmphasis: [], //数据临时存放 CourseEmphasis: [], //数据临时存放
...@@ -269,7 +543,7 @@ ...@@ -269,7 +543,7 @@
modifyClassifyList: [], //修改时返回的分类列表 modifyClassifyList: [], //修改时返回的分类列表
courseLevelList: [], //课程等级列表 courseLevelList: [], //课程等级列表
courseSubjectList: [], //课程科目列表 courseSubjectList: [], //课程科目列表
keynoteList: [], //重点枚举列表 keynoteList: [] //重点枚举列表
}; };
}, },
created() { created() {
...@@ -279,7 +553,6 @@ ...@@ -279,7 +553,6 @@
this.getCourseRateList(); this.getCourseRateList();
this.getCourseEmphasisList(); //获取课程重点枚举列表 this.getCourseEmphasisList(); //获取课程重点枚举列表
this.initObj(); this.initObj();
}, },
computed: mapState({ computed: mapState({
isHaveCourseHoursEdit(state) { isHaveCourseHoursEdit(state) {
...@@ -288,7 +561,7 @@ ...@@ -288,7 +561,7 @@
state.user.userInfo.ActionMenuList && state.user.userInfo.ActionMenuList &&
state.user.userInfo.ActionMenuList.length > 0 state.user.userInfo.ActionMenuList.length > 0
) { ) {
let action = state.user.userInfo.ActionMenuList.find((x) => { let action = state.user.userInfo.ActionMenuList.find(x => {
if (x.FunctionCode == "Edit_CourseClassHours") { if (x.FunctionCode == "Edit_CourseClassHours") {
return x; return x;
} }
...@@ -298,7 +571,7 @@ ...@@ -298,7 +571,7 @@
} }
} }
return false; return false;
}, }
}), }),
mounted() { mounted() {
this.getCourseTimeList(); this.getCourseTimeList();
...@@ -320,31 +593,31 @@ ...@@ -320,31 +593,31 @@
tempData.forEach(item => { tempData.forEach(item => {
this.courseLevelList.push({ this.courseLevelList.push({
Id: item.Id, Id: item.Id,
Name: item.Name.replace(/课程/g, '') Name: item.Name.replace(/课程/g, "")
}) });
}) });
} }
} }
}) });
getCourseSubject({}).then(res => { getCourseSubject({}).then(res => {
if (res.Code == 1) { if (res.Code == 1) {
this.courseSubjectList = res.Data; this.courseSubjectList = res.Data;
} }
}) });
}, },
getCourseEmphasisList() { getCourseEmphasisList() {
getCourseEmphasisEnumList({}).then((res) => { getCourseEmphasisEnumList({}).then(res => {
if (res.Code == 1) { if (res.Code == 1) {
this.keynoteList = res.Data; this.keynoteList = res.Data;
this.keynoteList.map((x) => { this.keynoteList.map(x => {
this.CourseEmphasis.push(x.Id) this.CourseEmphasis.push(x.Id);
}) });
} }
}); });
}, },
//获取教师下拉 //获取教师下拉
GetTeacherList() { GetTeacherList() {
getTeacherDropDownList({}).then((res) => { getTeacherDropDownList({}).then(res => {
if (res.Code == 1) { if (res.Code == 1) {
this.TeacherList = res.Data; this.TeacherList = res.Data;
} }
...@@ -352,7 +625,7 @@ ...@@ -352,7 +625,7 @@
}, },
//获取销售端口列表 //获取销售端口列表
getSaleplat() { getSaleplat() {
querySaleplatList().then((res) => { querySaleplatList().then(res => {
this.SaleplatList = res.Data; this.SaleplatList = res.Data;
}); });
}, },
...@@ -368,29 +641,33 @@ ...@@ -368,29 +641,33 @@
} }
}, },
uploadFile(files) { uploadFile(files) {
UploadSelfFile("course", files[0], (res) => { UploadSelfFile("course", files[0], res => {
if (res.Code == 1) { if (res.Code == 1) {
this.objOption.CoverImg = res.FileUrl; this.objOption.CoverImg = res.FileUrl;
} }
}); });
}, },
uploadFile2(files) { uploadFile2(files) {
UploadSelfFile("course", files[0], (res) => { UploadSelfFile("course", files[0], res => {
if (res.Code == 1) { if (res.Code == 1) {
this.objOption.B2BIcon = res.FileUrl; this.objOption.B2BIcon = res.FileUrl;
this.ImgColor(); this.ImgColor();
} }
}); });
}, },
ImgColor() { //获取图标上传的主色 ImgColor() {
let domImg = document.querySelector('#background'); //获取图标上传的主色
let domImg = document.querySelector("#background");
let colorthief = new ColorThief(); let colorthief = new ColorThief();
domImg.addEventListener('load', () => { domImg.addEventListener("load", () => {
let color = colorthief.getColor(domImg, 2) let color = colorthief.getColor(domImg, 2);
this.objOption.B2BBackground = this.rgb2Hex(`RGB(${color[0]}, ${color[1]}, ${color[2]})`) this.objOption.B2BBackground = this.rgb2Hex(
}) `RGB(${color[0]}, ${color[1]}, ${color[2]})`
);
});
}, },
rgb2Hex(string) { //rgb转化为16进制 rgb2Hex(string) {
//rgb转化为16进制
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (/^(rgb|RGB)/.test(string)) { if (/^(rgb|RGB)/.test(string)) {
var aColor = string.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); var aColor = string.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
...@@ -413,7 +690,7 @@ ...@@ -413,7 +690,7 @@
} else if (aNum.length === 3) { } else if (aNum.length === 3) {
var numHex = "#"; var numHex = "#";
for (var i = 0; i < aNum.length; i += 1) { for (var i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i]); numHex += aNum[i] + aNum[i];
} }
return numHex; return numHex;
} }
...@@ -424,10 +701,12 @@ ...@@ -424,10 +701,12 @@
getCategorytree() { getCategorytree() {
this.TreeCategoryList = []; this.TreeCategoryList = [];
var qMsg = {}; var qMsg = {};
queryCourseCategoryTree(qMsg).then((res) => { queryCourseCategoryTree(qMsg).then(res => {
this.TreeCategoryList = res.Data; this.TreeCategoryList = res.Data;
if (this.objOption.CateId > 0) { if (this.objOption.CateId > 0) {
let val = this.TreeCategoryList.find(x => x.CourseSubject == this.objOption.CateId); let val = this.TreeCategoryList.find(
x => x.CourseSubject == this.objOption.CateId
);
this.objOption.CourseSubject = val.CourseSubject; this.objOption.CourseSubject = val.CourseSubject;
} }
}); });
...@@ -437,7 +716,7 @@ ...@@ -437,7 +716,7 @@
var obj = { var obj = {
ClassStepPriceId: 0, ClassStepPriceId: 0,
PersionNum: 2, PersionNum: 2,
PersionPrice: 0, PersionPrice: 0
}; };
if (this.ladderPriceList && this.ladderPriceList.length > 0) { if (this.ladderPriceList && this.ladderPriceList.length > 0) {
var _index = this.ladderPriceList.length - 1; var _index = this.ladderPriceList.length - 1;
...@@ -454,8 +733,8 @@ ...@@ -454,8 +733,8 @@
this.defaultArray = []; this.defaultArray = [];
if (this.saveObj && this.saveObj.CourseId > 0) { if (this.saveObj && this.saveObj.CourseId > 0) {
queryCourseInfo({ queryCourseInfo({
CourseId: this.saveObj.CourseId, CourseId: this.saveObj.CourseId
}).then((res) => { }).then(res => {
this.objOption.CourseId = res.Data.CourseId; this.objOption.CourseId = res.Data.CourseId;
this.objOption.CoverImg = res.Data.CoverImg; this.objOption.CoverImg = res.Data.CoverImg;
this.objOption.CourseName = res.Data.CourseName; this.objOption.CourseName = res.Data.CourseName;
...@@ -483,16 +762,19 @@ ...@@ -483,16 +762,19 @@
this.objOption.ScrollMinNum = res.Data.ScrollMinNum; this.objOption.ScrollMinNum = res.Data.ScrollMinNum;
this.objOption.ScrollMaxNum = res.Data.ScrollMaxNum; this.objOption.ScrollMaxNum = res.Data.ScrollMaxNum;
this.objOption.CourseTimeId = res.Data.CourseTimeId; this.objOption.CourseTimeId = res.Data.CourseTimeId;
this.CourseEmphasis = [] this.CourseEmphasis = [];
setTimeout(() => { //Todo 暂时不知道什么原因 偶尔会出现2个 所以加了一个延迟 setTimeout(() => {
if (res.Data.CourseEmphasis && res.Data.CourseEmphasis != '') { //Todo 暂时不知道什么原因 偶尔会出现2个 所以加了一个延迟
this.CourseEmphasis = res.Data.CourseEmphasis.split(",").map(Number) if (res.Data.CourseEmphasis && res.Data.CourseEmphasis != "") {
this.CourseEmphasis = res.Data.CourseEmphasis.split(",").map(
Number
);
} else { } else {
this.keynoteList.map((x) => { this.keynoteList.map(x => {
this.CourseEmphasis.push(x.Id) this.CourseEmphasis.push(x.Id);
}) });
} }
}, 100) }, 100);
if (res.Data.StepPriceList && res.Data.StepPriceList.length > 0) { if (res.Data.StepPriceList && res.Data.StepPriceList.length > 0) {
this.ladderPriceList = res.Data.StepPriceList; this.ladderPriceList = res.Data.StepPriceList;
} }
...@@ -504,7 +786,7 @@ ...@@ -504,7 +786,7 @@
} }
if (res.Data.CategoryList && res.Data.CategoryList.length > 0) { if (res.Data.CategoryList && res.Data.CategoryList.length > 0) {
this.modifyClassifyList = res.Data.CategoryList; this.modifyClassifyList = res.Data.CategoryList;
this.chooseGoodsClassify = res.Data.CategoryList.map((e) => { this.chooseGoodsClassify = res.Data.CategoryList.map(e => {
return e.CategoryId; return e.CategoryId;
}); });
} }
...@@ -533,11 +815,11 @@ ...@@ -533,11 +815,11 @@
this.objOption.Saleplat = ""; this.objOption.Saleplat = "";
this.objOption.IsKCourse = 0; this.objOption.IsKCourse = 0;
this.objOption.CourseRate = ""; this.objOption.CourseRate = "";
this.objOption.ContractInfo = ''; this.objOption.ContractInfo = "";
this.objOption.IsScrollClass = 0; this.objOption.IsScrollClass = 0;
this.objOption.ScrollMinNum = 0; this.objOption.ScrollMinNum = 0;
this.objOption.ScrollMaxNum = 0; this.objOption.ScrollMaxNum = 0;
this.objOption.CourseTimeId=0; this.objOption.CourseTimeId = 0;
this.getCategorytree(); this.getCategorytree();
} }
}, },
...@@ -559,7 +841,7 @@ ...@@ -559,7 +841,7 @@
this.saveCourseLoading = true; this.saveCourseLoading = true;
var Teacher_Ids = ""; var Teacher_Ids = "";
if (this.chooseTeacher && this.chooseTeacher.length > 0) { if (this.chooseTeacher && this.chooseTeacher.length > 0) {
this.chooseTeacher.forEach((item) => { this.chooseTeacher.forEach(item => {
Teacher_Ids += "," + item; Teacher_Ids += "," + item;
}); });
} }
...@@ -568,7 +850,7 @@ ...@@ -568,7 +850,7 @@
} }
var salePlat = ""; var salePlat = "";
if (this.choosePlat && this.choosePlat.length > 0) { if (this.choosePlat && this.choosePlat.length > 0) {
this.choosePlat.forEach((item) => { this.choosePlat.forEach(item => {
salePlat += "," + item; salePlat += "," + item;
}); });
} }
...@@ -579,19 +861,19 @@ ...@@ -579,19 +861,19 @@
this.objOption.Teacher_Ids = Teacher_Ids; this.objOption.Teacher_Ids = Teacher_Ids;
this.objOption.Saleplat = salePlat; this.objOption.Saleplat = salePlat;
if (this.CourseEmphasis.length > 0) { if (this.CourseEmphasis.length > 0) {
this.objOption.CourseEmphasis = this.CourseEmphasis.join(',') this.objOption.CourseEmphasis = this.CourseEmphasis.join(",");
} else { } else {
this.objOption.CourseEmphasis = '' this.objOption.CourseEmphasis = "";
} }
saveCourseInfo(this.objOption) saveCourseInfo(this.objOption)
.then((res) => { .then(res => {
this.saveCourseLoading = false; this.saveCourseLoading = false;
this.$q.notify({ this.$q.notify({
icon: "iconfont icon-chenggong", icon: "iconfont icon-chenggong",
color: "accent", color: "accent",
timeout: 2000, timeout: 2000,
message: "数据保存成功！", message: "数据保存成功！",
position: "top", position: "top"
}); });
this.$emit("success"); this.$emit("success");
this.closeSaveForm(); this.closeSaveForm();
...@@ -610,9 +892,9 @@ ...@@ -610,9 +892,9 @@
ParentId: 0, ParentId: 0,
Enabled: 1, Enabled: 1,
IsShow: 1, IsShow: 1,
CategoryPageType: 0, CategoryPageType: 0
}; };
this.apipostDS("/api/product/GetProductCategoryTreeList", msg1, (res) => { this.apipostDS("/api/product/GetProductCategoryTreeList", msg1, res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
this.goodClassify = res.data.data; this.goodClassify = res.data.data;
} }
...@@ -621,41 +903,41 @@ ...@@ -621,41 +903,41 @@
//处理选中后的商品分类参数 //处理选中后的商品分类参数
handleCheckChange() { handleCheckChange() {
this.objOption.CategoryList = []; this.objOption.CategoryList = [];
this.chooseGoodsClassify.forEach((list) => { this.chooseGoodsClassify.forEach(list => {
this.goodClassify.forEach((item) => { this.goodClassify.forEach(item => {
if (list == item.Id) { if (list == item.Id) {
let newItem = JSON.parse(JSON.stringify(item)); let newItem = JSON.parse(JSON.stringify(item));
newItem.CategoryId = item.Id; newItem.CategoryId = item.Id;
newItem.Id = 0; newItem.Id = 0;
//查找已提交的分类的id，否则为0 //查找已提交的分类的id，否则为0
let findId = this.modifyClassifyList.find( let findId = this.modifyClassifyList.find(
(e) => e.CategoryId === newItem.CategoryId e => e.CategoryId === newItem.CategoryId
); );
if (findId) { if (findId) {
newItem.Id = findId.Id; newItem.Id = findId.Id;
} }
this.objOption.CategoryList.push(newItem); this.objOption.CategoryList.push(newItem);
} }
item.ChildList.forEach((item2) => { item.ChildList.forEach(item2 => {
if (list == item2.Id) { if (list == item2.Id) {
let newItem2 = JSON.parse(JSON.stringify(item2)); let newItem2 = JSON.parse(JSON.stringify(item2));
newItem2.CategoryId = item2.Id; newItem2.CategoryId = item2.Id;
newItem2.Id = 0; newItem2.Id = 0;
let findId2 = this.modifyClassifyList.find( let findId2 = this.modifyClassifyList.find(
(e) => e.CategoryId === newItem2.CategoryId e => e.CategoryId === newItem2.CategoryId
); );
if (findId2) { if (findId2) {
newItem2.Id = findId2.Id; newItem2.Id = findId2.Id;
} }
this.objOption.CategoryList.push(newItem2); this.objOption.CategoryList.push(newItem2);
} }
item2.ChildList.forEach((item3) => { item2.ChildList.forEach(item3 => {
if (list == item3.Id) { if (list == item3.Id) {
let newItem3 = JSON.parse(JSON.stringify(item3)); let newItem3 = JSON.parse(JSON.stringify(item3));
newItem3.CategoryId = item2.Id; newItem3.CategoryId = item2.Id;
newItem3.Id = 0; newItem3.Id = 0;
let findId3 = this.modifyClassifyList.find( let findId3 = this.modifyClassifyList.find(
(e) => e.CategoryId === newItem3.CategoryId e => e.CategoryId === newItem3.CategoryId
); );
if (findId3) { if (findId3) {
newItem3.Id = findId3.Id; newItem3.Id = findId3.Id;
...@@ -672,9 +954,8 @@ ...@@ -672,9 +954,8 @@
if (res.Code == 1) { if (res.Code == 1) {
this.CourseTimeList = res.Data; this.CourseTimeList = res.Data;
} }
}) });
}, }
}, }
}; };
</script> </script>
src/components/school/student/transfer-order/tickMode.vue 0 → 100644
View file @ 8fa175a9
<template>
<div class="q-pa-md businessModel">
<div class="full-width business-header">
请选择上课模式：
</div>
<div class="box-businessModel" :class="{ 'checked-border': type == 1 }" @click="chooseChange(1)">
<i class="iconfont icon-banjixinxi" style="font-size:38px"></i>
<div>班课学习</div>
<div class="right" v-if="type == 1">
<q-icon name="check" class="check-icon" />
</div>
</div>
<div class="box-businessModel" :class="{ 'checked-border': type == 2 }" @click="chooseChange(2)">
<i class="iconfont icon-yueke" style="font-size:38px"></i>
<div>约课学习</div>
<div class="right" v-if="type == 2">
<q-icon name="check" class="check-icon" />
</div>
</div>
</div>
</template>
<script>
export default {
model:{
prop:'type',
event:"changeType"
},
props: {
type: {
type: [String, Number],
default: 1
}
},
methods: {
chooseChange(n) {
this.$emit('changeType',n)
}
}
};
</script>
<style lang="scss" scoped>
.businessModel {
overflow: hidden;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 700px;
justify-content: space-between;
margin: 50px 0;
.business-header {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
}
.box-businessModel {
cursor: pointer;
width: 311px;
height: 198px;
background: #f9f9f9;
border-radius: 5px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
.right {
position: absolute;
right: -20px;
bottom: -20px;
display: block;
width: 0;
height: 0;
transform: rotate(45deg);
border: 20px solid transparent;
border-left: 20px solid #3470ff;
.check-icon {
position: absolute;
top: -8px;
left: -19px;
transform: rotate(-45deg);
font-size: 14px;
font-weight: 700;
color: #fff;
}
}
}
}
.checked-border {
background-color: #edf2fd !important;
border: 2px solid #3470ff !important;
color: #3470ff;
}
</style>
src/components/school/student/transfer-order/yueke.vue 0 → 100644
View file @ 8fa175a9
<template>
<div>
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-4">
<q-input
@input="resetSearch"
clearable
filled
v-model="msg.CourseName"
label="课程名称"
@clear="resetSearch"
maxlength="20"
/>
</div>
<!-- <div class="col-4">
<select-tree
:treeData="TreeCategoryList"
:defaultArray="returnString"
nodeKey="CateId"
:multiple="true"
labelKey="CateName"
childrenKey="ChildList"
tipText="课程系列"
@getChild="getChild"
></select-tree>
</div> -->
<div class="col-4">
<q-select
@input="resetSearch"
filled
v-model="msg.CourseSubject"
:options="CourseSubjectList"
option-label="SubjectName"
option-value="Id"
emit-value
map-options
label="所属科目"
clearable
/>
</div>
</div>
</div>
<q-table
:pagination="msg"
selection="single"
:selected.sync="selection"
no-data-label="暂无相关数据"
flat
class="sticky-tow-column-table sticky-two-header-table"
separator="none"
:data="dataList"
:columns="columns"
row-key="ClassId"
@update:selected="emitSel"
table-class="table"
>
<template v-slot:body-cell-CourseName="props">
<q-td :props="props">
{{ props.row.CourseName }}-{{props.row.ClassNo}}
</q-td>
</template>
<template v-slot:bottom>
<q-pagination
class="full-width justify-end"
v-model="msg.pageIndex"
color="primary"
:max="pageCount"
:input="true"
@input="changePage"
/>
</template>
</q-table>
</div>
</template>
<script>
import {
queryCoursePage,
queryCourseCategoryTree,
deleteCourseInfo,
querySaleplatList,
getCourseSubject
} from "../../../../api/course/index";
import {
getClassPruductList //获取日语培训列表
} from "../../../../api/sale/sale";
// import selectTree from "../../../../components/common/select-tree";
export default {
components: {
// selectTree
},
props: {
select: {
type: Array,
default: () => []
}
},
data() {
return {
selection: [],
columns: [
{
name: "CourseName",
label: "课程",
field: "CourseName",
align: "left"
},
{
name: "CourseSubjectName",
required: true,
label: "所属科目",
align: "left",
field: row => row.CourseSubjectName
},
// {
// name: "CateName",
// required: true,
// label: "系列",
// align: "left",
// field: row => row.CateName
// },
{
name: "SellPrice",
required: true,
label: "直客价",
align: "left",
field: row => row.SellPrice.toFixed(2)
}
],
// msg: {
// pageIndex: 1,
// pageSize: 10,
// rowsPerPage: 10,
// CourseName: "",
// QCateIds: "",
// IsQPrice: 1,
// Status: "0",
// Saleplat: 0,
// CourseSubject: "", //所属科目
// ClassScrollType :2
// },
msg: {
pageIndex: 1,
pageSize: 8,
ClassName: "", //班级名称
StartTime: "", //开始时间
EndTime: "", //结束时间
School_Id: "", //关联校区
CouseId: 0, //课程id
Teacher_Id: 0, //教师id
Q_CanApply: "0", //是否可以报名 1是
JoinStartTime: "", //报名截止日期开始
JoinEndTime: "", //报名截止日期结束
ClassNo: "", //班号
CourseSubject: "", //所属科目
CourseName:"",
ClassScrollType :2,
},
CourseSubjectList: [],
//课程分类树形列表
TreeCategoryList: [],
returnString: [], //默认值
dataList: [],
pageCount: 0
};
},
mounted() {
this.selection = this.select;
this.getCourseList();
this.queryCourseSubject();
// this.getCategorytree();
},
methods: {
emitSel(val) {
this.$emit("select", val);
},
//获取课程分页列表
getCourseList() {
getClassPruductList(this.msg).then(res => {
this.dataList = res.Data.PageData;
this.pageCount = res.Data.PageCount;
});
},
// 课程翻页
changePage(val) {
this.msg.pageIndex = val;
this.getCourseList();
},
//获取分页列表
// getCourseList() {
// this.loading = true;
// queryCoursePage(this.msg)
// .then(res => {
// this.loading = false;
// this.dataList = res.Data.PageData;
// this.pageCount = res.Data.PageCount;
// })
// .catch(() => {
// this.loading = false;
// });
// },
//重新查询
resetSearch() {
this.msg.pageIndex = 1;
this.getCourseList();
},
//翻页
// changePage(val) {
// this.msg.pageIndex = val;
// this.getCourseList();
// },
getCategorytree() {
this.TreeCategoryList = [];
var qMsg = {};
queryCourseCategoryTree(qMsg).then(res => {
this.TreeCategoryList = res.Data;
});
},
queryCourseSubject() {
getCourseSubject({}).then(res => {
if (res.Code == 1) {
this.CourseSubjectList = res.Data;
}
});
},
//分类改变
getChild(cateObj) {
var tempStr = "";
if (cateObj && cateObj != "") {
tempStr = cateObj;
}
this.msg.QCateIds = tempStr;
this.msg.pageIndex = 1;
this.getCourseList();
}
}
};
</script>
<style>
.table {
max-height: 400px;
}
.table::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.table::-webkit-scrollbar-track {
background: #fff;
border-radius: 2px;
}
.table::-webkit-scrollbar-thumb {
background: #444;
border-radius: 10px;
}
.table::-webkit-scrollbar-thumb:hover {
background: #999;
}
.table::-webkit-scrollbar-corner {
background: #204754;
}
</style>
src/components/stuMan/subscribe/subscribeForm.vue 0 → 100644
View file @ 8fa175a9
<template>
<q-dialog
v-model="show"
content-class="bg-grey-1"
persistent
transition-show="scale"
transition-hide="scale"
@input="changeDig"
>
<q-card style="width: 800px;max-width:900px;">
<q-card-section>
<div class="text-h6">编辑</div>
</q-card-section>
<q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="row col q-mr-lg q-col-gutter-md">
<q-field filled label="日期" stack-label class="col-6">
<template v-slot:control>
<div>{{ dateObj.date }}</div>
</template>
</q-field>
<q-select
filled
stack-label
use-input
option-value="CourseId"
option-label="CourseName"
v-model="teaClassMsg.CourseId"
ref="CourseId"
:options="CourseList"
label="课程"
:dense="false"
class="col-6"
emit-value
map-options
@filter="filterCourse"
@input="getCanTeacherClassTimeList()"
/>
<q-select
v-if="teaClassMsg.CourseId>0"
filled
v-model="teaClassMsg.TeacherId"
option-value="TId"
option-label="TeacherName"
:options="teacherList"
emit-value
map-options
label="老师"
class="col-6"
@input="getCanTeacherClassTimeList()"
/>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn
label="取消"
flat
color="grey-10"
style="font-weight:400 !important"
@click="changeDig(false)"
/>
<q-btn
label="立即提交"
color="accent"
class="q-px-md"
style="font-weight:400 !important"
@click=""
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
import {
GetCanTeacherClassTimeList,
GetCanAppointmentStuList,
GetStuAppointmentInfo,
SetAdminScrollAppointment
} from "../../../api/studyabroad/subscribe.js";
import { queryCourseDropdownList } from "../../../api/course/index";
export default {
model: {
prop: "show",
event: "changeshow"
},
props: {
dateObj: {
type: Object,
default: null
},
saveObj: {
type: Object,
default: null
},
show: {
type: Boolean,
default: false
},
teacherList: {
type: Array,
default: () => []
}
},
watch: {
dateObj: {
handler(val) {
console.log(63, val);
},
deep: true
}
},
data() {
return {
CourseList: [], //关联课程下拉数据
AllCourseList: [], //所有课程列表
teacherTimeList: [],
teaClassMsg: {
Date: "",
TeacherId: 0,
CourseId: 0
},
stuList: [],
stuMsg: {
CourseId: 0,
NextChapterNo: 0
},
detailObj: {},
detailMsg: {
StuId: 0,
GuestId: 0
},
saveMsg: {
Date: "",
TeacherId: 0,
ShiftSort: "",
StuId: 0,
GuestId: 0,
CourseId: 0,
ChapterNo: 0
}
};
},
created() {},
mounted() {
this.getCourseList();
},
methods: {
//开关弹窗
changeDig(val) {
this.$emit("changeshow", val);
},
//获取课程
getCourseList() {
queryCourseDropdownList({
IsQPrice: 1,
IsQuerySalePlat: 1
}).then(res => {
if (res.Code == 1) {
this.CourseList = res.Data;
var obj = {
CourseName: "请选择",
CourseId: 0
};
this.CourseList.unshift(obj);
this.AllCourseList = res.Data;
}
});
},
//筛选课程
filterCourse(val, update) {
update(() => {
if (val === "") {
this.CourseList = JSON.parse(JSON.stringify(this.AllCourseList));
} else {
const needle = val.toLowerCase();
this.CourseList = this.AllCourseList.filter(
v => v.CourseName.toLowerCase().indexOf(needle) > -1
);
}
});
},
//获取老师的空闲上课时段
getCanTeacherClassTimeList() {
this.teaClassMsg.Date=this.dateObj.date
GetCanTeacherClassTimeList(this.teaClassMsg).then(res=>{
console.log(187,res)
});
}
},
watch: {}
};
</script>
<style>
.q-calendar-daily__day-interval:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-weekly__workweek:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-weekly__day:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-weekly__head-weekday:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-scheduler__day:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-resource__resource-interval:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-daily__day:hover {
background: rgba(0, 0, 255, 0.1);
}
</style>
<style>
.upload-assiatant-box .q-uploader__list {
display: none;
}
.upload-assiatant-box .q-uploader {
width: auto;
}
</style>
src/pages/studyAbroad/subscribe.vue
View file @ 8fa175a9
<template> <template>
<div class="full-height"> <div class="page-body" style="width: 100%;">
<div class="title-bar row items-center overflow-hidden"> <div class="col row wrap q-mr-lg q-col-gutter-md searchBox">
<q-btn <div class="col-2">
flat <q-select
color="white" filled
icon="iconfont icon-line-arrow-left" dense
class="direction-button" v-model="msg.TeacherId"
style="height: 100%" option-value="TId"
@click="onPrev" option-label="TeacherName"
:options="TeacherList"
emit-value
map-options
label="老师"
/> />
<transition :name="transition" appear>
<div
:key="parsedStart.date"
class="row justify-between items-center text-white overflow-hidden"
style="width: calc(100% - 112px)"
>
<div
v-for="day in days"
:key="day.date"
class="col-auto"
:style="dayStyle"
>
<q-btn
flat
:class="dayClass(day)"
style="line-height: unset;"
class="column"
@click="
selectedDate = day.date;
transition = '';
"
>
<div class="column">
<div class="text-center" style="width: 100%;">
{{ monthFormatter(day, true) }}
</div> </div>
<div <div class="col-2">
class="text-center text-bold" <q-select
style="width: 100%; font-size: 16px;" filled
> dense
{{ dayFormatter(day, false) }} v-model="msg.ClassRoomId"
option-value="RoomId"
option-label="RoomName"
:options="classroomList"
emit-value
map-options
label="教室"
/>
</div> </div>
<div class="text-center" style="width: 100%; font-size: 10px;"> <div class="col-2">
{{ weekdayFormatter(day, true) }} <q-select
filled
dense
v-model="msg.ClassType"
option-value="Id"
option-label="label"
:options="ClassTypeList"
emit-value
map-options
label="课程类型"
/>
</div> </div>
<div class="col-2">
<q-select
filled
dense
v-model="msg.AppointState"
option-value="Id"
option-label="label"
:options="AppointStateList"
emit-value
map-options
label="约课状态"
/>
</div> </div>
</q-btn> <!-- <div class="col-2">
<q-field filled dense label="开始日期" stack-label>
<template v-slot:control>
<el-date-picker
v-model="msg.StartDate"
type="date"
size="mini"
placeholder="开始日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</template>
</q-field>
</div> </div>
<div class="col-2">
<q-field filled dense label="结束日期" stack-label>
<template v-slot:control>
<el-date-picker
v-model="msg.EndDate"
type="date"
size="mini"
placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>>
</el-date-picker>
</template>
</q-field>
</div> -->
</div> </div>
</transition> <div class="row justify-center items-center">
<q-btn <q-btn dense flat label="上一周" @click="calendarPrev" />
flat <q-separator vertical />
color="white" <q-btn dense flat label="下一周" @click="calendarNext" />
icon="iconfont icon-arrow-right"
class="direction-button"
style="height: 100%"
@click="onNext"
/>
</div> </div>
<div style="height: calc(100% - 70px);border-top: none;overflow:hidden">
<q-calendar <q-calendar
v-model="selectedDate" v-model="selectedDate"
view="day" view="week"
hide-header ref="calendar"
locale="zh-CN"
class="calendar-container"
style="height:calc(100% - 32px)"
bordered bordered
hour24-format hour24-format
:interval-start="8" :interval-start="8"
:interval-count="15" :interval-count="15"
:interval-height="60" :interval-height="60"
animated animated
style="height: 100%; border-top: none;" transition-prev="slide-right"
transition-next="slide-left"
@input="onModelChanged"
@click:date2="onClickDate2"
@click:day:header2="onClickDayHeader2"
@click:interval2="onClickInterval2"
@click:time2="onClickTime2"
@click:interval:header2="onClickIntervalHeader2"
>
<template #day-header="{ timestamp }">
<div class="justify-center items-center ">
<q-badge
:color="item.bg"
:label="item.TeacherName"
v-for="(item, index) in legendList"
:key="index"
class="q-mr-xs"
/> />
</div> </div>
</template>
<template #day-body="{ timestamp, timeStartPos, timeDurationHeight }">
<div v-for="(item, index) in events" :key="index">
{{ item.ClassDate }}
<div v-if="item.ClassDate == timestamp.date">
{{ item.ClassDate }}
<div v-for="(_item, _index) in item.RList" :key="_index">
<div
v-for="(__item, __index) in _item.SubList"
:key="__index"
class="my-event justify-center ellipsis courseItem"
:class="badgeClasses(__item, 'body', _item.TeacherId)"
:style="
badgeStyles(
__item,
'body',
timeStartPos,
timeDurationHeight,
_index,
item.RList.length
)
"
@click.stop="showDetail(__item)"
>
<el-popover placement="top-start" width="200" trigger="hover">
<div slot="reference" style="height:100vh">
</div>
<div>
<div class="itemRow">{{ _item.TeacherName }}</div>
<div class="itemRow">{{ __item.CourseName }}</div>
<div>{{ __item.ClassName }}</div>
<div>{{ __item.StartTime }}-{{ __item.EndTime }}</div>
<div>
进度:{{
__item.TotalPlanNum < 0 ? 0 : __item.TotalPlanNum
}}%
</div>
</div>
</el-popover>
</div>
</div>
</div>
</div>
</template>
</q-calendar>
<SubscribeForm v-model="showForm" :dateObj="dateObj" :teacherList="TeacherList2"/>
</div> </div>
</template> </template>
<script> <script>
import QCalendar from "@quasar/quasar-ui-qcalendar"; // ui is aliased from '@quasar/quasar-ui-qcalendar' import { GetAppointmentPlanStat } from "../../api/studyabroad/subscribe.js";
import "@quasar/quasar-ui-qcalendar/dist/index.css"; import { date } from "quasar";
const CURRENT_DAY = new Date(); import {
getTeacherDropDownList,
function getCurrentDay(day) { queryClassRoomList
const newDay = new Date(CURRENT_DAY); } from "../../api/school/index";
newDay.setDate(day); import SubscribeForm from "../../components/stuMan/subscribe/subscribeForm";
const tm = QCalendar.parseDate(newDay); // import QCalendar from "@quasar/quasar-ui-qcalendar";
return tm.date;
}
export default { export default {
data() { data() {
return { return {
selectedDate: getCurrentDay(CURRENT_DAY.getDate()), showForm: false,
weekdays: [1, 2, 3, 4, 5, 6, 0], selectedDate: "",
locale: "en-us", msg: {
monthFormatter: this.monthFormatterFunc(), StartDate: "",
dayFormatter: this.dayFormatterFunc(), EndDate: "",
weekdayFormatter: this.weekdayFormatterFunc(), TeacherId: 0,
transitionPrev: "slide-right", ClassRoomId: 0,
transitionNext: "slide-left", ClassType: 0,
transition: "" AppointState: 0
};
}, },
TeacherList: [],
beforeMounted() {}, classroomList: [],
ClassTypeList: [
computed: { {
weekdaySkips() { label: "全部",
return QCalendar.getWeekdaySkips(this.weekdays); Id: 0
}, },
{
parsedStart() { label: "跟班",
if (this.selectedDate) { Id: 1
return QCalendar.getStartOfWeek( },
QCalendar.parseTimestamp(this.selectedDate), {
this.weekdays, label: "试听课",
this.today Id: 2
); },
{
label: "约课",
Id: 3
} }
return undefined; ],
AppointStateList: [
{
label: "全部",
Id: 0
}, },
{
parsedEnd() { label: "待确认",
if (this.selectedDate) { Id: 1
return QCalendar.getEndOfWeek( },
QCalendar.parseTimestamp(this.selectedDate), {
this.weekdays, label: "已确认",
this.today Id: 2
);
} }
return undefined; ],
colorList: [
"blue-grey",
"purple",
"orange",
"red",
"green",
"teal",
"secondary",
"info",
"pink",
"deep-purple",
"blue",
"cyan",
"deep-orange",
"brown",
"blue-grey"
],
legendList: [],
TeacherList2:[],
events: [],
dateObj:{}
};
}, },
components: {
today() { SubscribeForm
const newDay = new Date(CURRENT_DAY);
const tm = QCalendar.parseDate(newDay);
return tm;
}, },
computed: {
days() { // convert the events into a map of lists keyed by date
if (this.parsedStart && this.parsedEnd) { eventsMap() {
return QCalendar.createDayList( const map = {};
this.parsedStart, this.events.forEach(event =>
this.parsedEnd, (map[event.date] = map[event.date] || []).push(event)
this.today,
this.weekdaySkips
); );
return map;
} }
return [];
}, },
mounted() {
// console.log(336, this.$refs.calendar);
this.getTeacherList();
this.getclassroom();
this.msg.StartDate = this.$refs.calendar.lastStart;
this.msg.EndDate = this.$refs.calendar.lastEnd;
this.getData();
},
methods: {
dayStyle() { badgeClasses(event, type, TeacherId) {
const bg = this.getColor(TeacherId);
return { return {
width: 100 / this.weekdays.length + "%" [`text-white bg-${bg}`]: true
}; };
},
badgeStyles(event, type, timeStartPos, timeDurationHeight, index, total) {
const s = {};
if (timeStartPos) {
s.top = timeStartPos(event.StartTime) + "px";
}
if (timeDurationHeight) {
let gap = this.calcGap(event.StartTime, event.EndTime);
s.height = timeDurationHeight(gap) + "px";
} }
s["align-items"] = "flex-start";
s.left = 0;
s.width = "100%";
const singleW = (1 / total) * 100;
s.width = singleW + "%";
if (index == 0) {
s.left = 0;
} else {
s.left = singleW * index + "%";
}
return s;
}, },
getHeight(event, timeDurationHeight) {
methods: { let gap = this.calcGap(event.StartTime, event.EndTime);
onPrev() { let height = timeDurationHeight(gap) + "px";
const ts = QCalendar.addToDate(this.parsedStart, { day: -7 }); console.log(327, height);
this.selectedDate = ts.date; return { height: height + "px" };
this.transition = "q-transition--" + this.transitionPrev;
}, },
calendarNext() {
onNext() { this.$refs.calendar.next();
const ts = QCalendar.addToDate(this.parsedStart, { day: 7 }); setTimeout(() => {
this.selectedDate = ts.date; this.msg.StartDate = this.$refs.calendar.lastStart;
this.transition = "q-transition--" + this.transitionNext; this.msg.EndDate = this.$refs.calendar.lastEnd;
this.getData();
}, 100);
}, },
calendarPrev() {
dayClass(day) { this.$refs.calendar.prev();
return { setTimeout(() => {
//row: true, this.msg.StartDate = this.$refs.calendar.lastStart;
"justify-center": true, this.msg.EndDate = this.$refs.calendar.lastEnd;
"selected-date": this.selectedDate === day.date this.getData();
}; }, 100);
}, },
getTeacherList() {
getTeacherDropDownList({ LeaveStatus: 1 }).then(res => {
if (res.Code == 1) {
this.TeacherList = JSON.parse(JSON.stringify(res.Data));
var obj = {
TeacherName: "不限",
TId: 0
};
this.TeacherList.unshift(obj);
this.TeacherList2 = JSON.parse(JSON.stringify(res.Data));
this.TeacherList2.unshift({
TeacherName: "请选择",
TId: 0
});
this.legendList = JSON.parse(JSON.stringify(res.Data));
monthFormatterFunc() { this.legendList.forEach((item, index) => {
const longOptions = { timeZone: "UTC", month: "long" }; item.bg = this.colorList[index];
const shortOptions = { timeZone: "UTC", month: "short" }; });
return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) => }
short ? shortOptions : longOptions });
);
}, },
getclassroom() {
weekdayFormatterFunc() { queryClassRoomList({}).then(res => {
const longOptions = { timeZone: "UTC", weekday: "long" }; if (res.Code == 1) {
const shortOptions = { timeZone: "UTC", weekday: "short" }; this.classroomList = res.Data;
var obj = {
return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) => RoomName: "不限",
short ? shortOptions : longOptions RoomId: 0
); };
this.classroomList.unshift(obj);
}
});
}, },
getData() {
dayFormatterFunc() { GetAppointmentPlanStat(this.msg).then(res => {
const longOptions = { timeZone: "UTC", day: "2-digit" }; this.events = res.Data;
const shortOptions = { timeZone: "UTC", day: "numeric" }; console.log(498, this.events);
});
return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) => },
short ? shortOptions : longOptions calcGap(s, e) {
); let timeStamp = Date.now();
let formatStr = date.formatDate(timeStamp, "YYYY-MM-DD");
let start = new Date(formatStr + " " + s).getTime();
let end = new Date(formatStr + " " + e).getTime();
let res = (end - start) / 60000;
return res;
},
getColor(TeacherId) {
let bg = "";
this.legendList.filter(item => {
if (item.TId == TeacherId) {
bg = item.bg;
}
});
return bg;
},
onModelChanged(date) {
console.log(1, date);
},
onClickDate2(data) {
console.log(2, data);
},
onClickDayHeader2(data) {
console.log(3, data);
},
onClickInterval2(data) {
console.log(4, data);
},
onClickTime2(data) {
console.log(5, data);
this.showForm = true;
this.dateObj=data.scope.timestamp
console.log('5.1',this.dateObj);
},
onClickIntervalHeader2(data) {
console.log(6, data);
},
showDetail(data) {
console.log(7, data);
} }
} }
}; };
</script> </script>
<style lang="sass"> <style lang="sass">
.title-bar .calendar-container
position: relative
.my-event
// width: 100%
position: absolute
font-size: 12px
.full-width
left: 0
width: 100% width: 100%
height: 70px .left-side
background: #9c27b0 left: 0
display: flex width: 49.75%
flex-direction: row .right-side
flex: 1 left: 50.25%
width: 49.75%
.direction-button </style>
background: #9c27b0 <style lang="scss">
color: white .searchBox .el-input__inner {
z-index: 20 border: none;
background-color: transparent;
.selected-date }
color: #9c27b0 .courseItem {
background: white // overflow: auto;
// padding: 3px;
height: 100%;
}
.courseItem::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
scrollbar-arrow-color: #999;
}
.courseItem::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
scrollbar-arrow-color: #999;
}
.courseItem::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment