Skip to content

C
confucius
Commit 84fb649a authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 4a29064f
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 265 deletions
src/components/course/course-form.vue
View file @ 84fb649a
...@@ -41,7 +41,6 @@ ...@@ -41,7 +41,6 @@
queryCourseInfo, queryCourseInfo,
} from '../../api/course/index' } from '../../api/course/index'
import { import {
uploadConfig,
UploadSelfFile UploadSelfFile
} from '../../api/common/common' } from '../../api/common/common'
import selectTree from '../common/select-tree' import selectTree from '../common/select-tree'
......
src/components/school/teacher/teacher-form.vue
View file @ 84fb649a
<template> <template>
<q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale"> <q-dialog v-model="persistent" content-class="bg-grey-1" persistent 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">{{objOption.TId==0?'新增教师信息':'修改教师信息'}}</div> <div class="text-h6">{{objOption.TId==0?'新增教师信息':'修改教师信息'}}</div>
</q-card-section> </q-card-section>
<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 maxlength="20" :dense="false" v-model="objOption.TeacherName" ref="TeacherName" class="col-6 q-pr-lg q-pb-lg" label="教师名称" :rules="[val => !!val || '请填写教师姓名']" /> <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.TeacherName" ref="TeacherName"
<q-select filled stack-label option-value="SId" option-label="SName" v-model="objOption.School_Id" ref="School_Id" :options="schoolList" label="所属校区" :dense="false" class="col-6 q-pb-lg" :rules="[val => !!val || '请选择所属校区']" /> class="col-6 q-pr-lg q-pb-lg" label="教师名称" :rules="[val => !!val || '请填写教师姓名']" />
<q-input type="tel" filled stack-label maxlength="100" :dense="false" v-model="objOption.TeacherTel" ref="TeacherTel" class="col-6 q-pr-lg q-pb-lg" label="联系电话" :rules="[val => !!val || '请填写教师联系电话']" /> <q-select filled stack-label option-value="SId" option-label="SName" v-model="objOption.School_Id"
<q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.TeacherSay" ref="TeacherSay" class="col-6 q-pb-lg" label="教师营销语" /> ref="School_Id" :options="schoolList" label="所属校区" :dense="false" class="col-6 q-pb-lg"
<div class="col-6 q-pr-lg q-pb-lg"> :rules="[val => !!val || '请选择所属校区']" />
<q-uploader @uploaded="uploadSuccess" hide-upload-btn max-files="1" @rejected="onRejected" label="教师头像" :max-file-size="512*1024" accept=".jpg, image/*" auto-upload :url="action" /> <q-input type="tel" filled stack-label maxlength="100" :dense="false" v-model="objOption.TeacherTel"
ref="TeacherTel" class="col-6 q-pr-lg q-pb-lg" label="联系电话" :rules="[val => !!val || '请填写教师联系电话']" />
<q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.TeacherSay" ref="TeacherSay"
class="col-6 q-pb-lg" label="教师营销语" />
<div class="col-6 q-pr-lg q-pb-lg">
<q-uploader style="display: inline-block;height: 320px;max-width: 100%;"
:style="{'background-image':'url(' + objOption.TeacherHead + ')'}" hide-upload-btn max-files="1"
@rejected="onRejected" label="教师头像" :max-file-size="512*1024" accept=".jpg, image/*" auto-upload
:factory="uploadFile" />
</div>
<div class="col-6 q-pb-lg">
<q-uploader style="display: inline-block;height:320px; max-width: 100%;"
:style="{'background-image':'url(' + objOption.TeacherIcon + ')'}" hide-upload-btn max-files="1"
@rejected="onRejected" label="教师形象照" :max-file-size="512*1024" accept=".jpg, image/*" auto-upload
:factory="uploadFile" />
</div>
<ext-editor :defaultMsg="objOption.TeacherIntro" classStr="col-12" @getEditValue="getEditValue"></ext-editor>
<div class="col-6 q-pr-lg q-pb-lg q-pt-lg">
<q-toggle size="md" label="是否显示" color="primary" :false-value="0" :true-value="1"
v-model="objOption.IsShow" />
<div class="text-grey-6 text-caption">注意：隐藏后，教师将在其他任何地方无法显示</div>
</div>
<div class="col-6 q-pb-lg q-pt-lg">
<q-toggle size="md" label="是否推荐" color="primary" :false-value="0" :true-value="1"
v-model="objOption.IsRecommend" />
<div class="text-grey-6 text-caption">注意：推荐后教师将在营销端呈现</div>
</div>
<div class="col-12 q-pb-lg">
<q-field filled label="教师标签" bg-color="white" stack-label>
<template v-slot:control>
<div class="q-pt-md row" tabindex="0">
<div v-if="tags.length<5" class="q-mr-md">
<input type="text" placeholder="输入标签后回车确认" v-model="tagText" class="tag-input"
@keyup.enter="createTag">
</div>
<div class="col">
<q-chip v-for="(x, i) in tags" @remove="removeTag(i)" :key="i" square color="red"
class="q-ma-none q-mr-md" icon="bookmark" text-color="white" :label="x" removable />
</div>
</div> </div>
<div class="col-6 q-pb-lg"> </template>
<q-uploader @uploaded="uploadSuccess" hide-upload-btn max-files="1" @rejected="onRejected" label="教师形象照" :max-file-size="512*1024" accept=".jpg, image/*" auto-upload :url="actionIcon" /> </q-field>
</div> </div>
</div>
<q-editor :toolbar="toolbar" :fonts="fonts" v-model="objOption.TeacherIntro" class="col-12" :definitions="{bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}}" /> </q-card-section>
<div class="col-6 q-pr-lg q-pb-lg q-pt-lg"> <q-separator />
<q-toggle size="md" label="是否显示" color="primary" :false-value="0" :true-value="1" v-model="objOption.IsShow" /> <q-card-actions align="right" class="bg-white">
<div class="text-grey-6 text-caption">注意：隐藏后，教师将在其他任何地方无法显示</div> <q-btn label="取消" color="dark" style="font-weight:400 !important" @click="closeSaveForm" />
</div> <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
<div class="col-6 q-pb-lg q-pt-lg"> @click="saveTeacher" />
<q-toggle size="md" label="是否推荐" color="primary" :false-value="0" :true-value="1" v-model="objOption.IsRecommend" /> </q-card-actions>
<div class="text-grey-6 text-caption">注意：推荐后教师将在营销端呈现</div>
</div>
<div class="col-12 q-pb-lg">
<q-field filled label="教师标签" bg-color="white" stack-label>
<template v-slot:control>
<div class="q-pt-md row" tabindex="0">
<div v-if="tags.length<5" class="q-mr-md">
<input type="text" placeholder="输入标签后回车确认" v-model="tagText" class="tag-input" @keyup.enter="createTag">
</div>
<div class="col">
<q-chip v-for="(x, i) in tags" @remove="removeTag(i)" :key="i" square color="red" class="q-ma-none q-mr-md" icon="bookmark" text-color="white" :label="x" removable />
</div>
</div>
</template>
</q-field>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn label="取消" color="dark" style="font-weight:400 !important" @click="closeSaveForm" />
<q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading" @click="saveTeacher" />
</q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>
<script> <script>
import { import {
getSchoolDropdown, getSchoolDropdown,
saveTeacher saveTeacher
} from '../../../api/school/index' } from '../../../api/school/index'
export default { import {
UploadSelfFile
} from '../../../api/common/common'
import extEditor from '../../common/ext-editor'
export default {
components: {
extEditor,
},
props: { props: {
saveObj: { saveObj: {
type: Object, type: Object,
default: null default: null
} }
}, },
data() { data() {
return { return {
persistent: true, persistent: true,
objOption: {}, objOption: {},
optionTitle: "", optionTitle: "",
schoolList: [], schoolList: [],
saveLoading: false, saveLoading: false,
imgDomain: "http://imgfile.oytour.com", tagText: "",
action: "http://upload.oytour.com/Upload?filePath=" + encodeURIComponent('/edu/teacher/'), tags: [],
actionIcon: "http://upload.oytour.com/Upload?filePath=" + encodeURIComponent('/edu/teacherIcon/'), }
toolbar: [],
tagText: "",
tags: [],
fonts: {
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana'
}
}
}, },
mounted() { mounted() {
this.getSchool() this.getSchool()
this.initObj() this.initObj()
this.initToolBar()
}, },
methods: { methods: {
initToolBar() { //获取编辑器值
this.toolbar = [ getEditValue(obj) {
[{ this.objOption.TeacherIntro = obj;
label: '对齐', },
icon: this.$q.iconSet.editor.align, initObj() {
fixedLabel: true, if (this.saveObj) {
list: 'only-icons', this.optionTitle = "修改教师信息"
options: ['left', 'center', 'right', 'justify'] this.objOption = this.saveObj
}], if (this.objOption.TeachTag && this.objOption.TeachTag.length > 0) {
['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'], this.tags = JSON.parse(this.objOption.TeachTag)
[{ }
label: '格式', } else {
icon: this.$q.iconSet.editor.formatting, this.optionTitle = "新增教师"
list: 'no-icons', this.objOption = {
fixedLabel: true, TId: 0,
fixedIcon: true, School_Id: '',
options: [ TeacherName: "",
'p', TeacherTel: '',
'h1', TeacherHead: '',
'h2', TeacherIcon: '',
'h3', TeacherSay: '',
'h4', TeacherIntro: '',
'h5', IsShow: 1,
'h6', IsRecommend: 0,
'code' SortNum: 1
] }
}, }
{ },
label: '字号', removeTag(i) {
icon: this.$q.iconSet.editor.fontSize, this.tags.splice(i, 1)
fixedLabel: true, },
fixedIcon: true, getSchool() {
list: 'no-icons', getSchoolDropdown({}).then(res => {
options: [ this.schoolList = res.Data
'size-1', if (this.objOption.School_Id != '') {
'size-2', this.objOption.School_Id = this.schoolList.filter(x => {
'size-3', if (this.objOption.School_Id == x.SId) {
'size-4', return x
'size-5', }
'size-6', })[0]
'size-7' }
] })
}, },
{ onRejected(rejectedEntries) {
label: '字体', this.$q.notify({
icon: this.$q.iconSet.editor.font, type: 'negative',
fixedLabel: true, position: "top",
fixedIcon: true, message: `文件验证失败，请重新上传`
list: 'no-icons', })
options: [ },
'default_font', uploadFile(files) {
'arial', UploadSelfFile('teacherIcon', files[0], res => {
'arial_black', if (res.resultCode == 1) {
'comic_sans', this.objOption.TeacherHead = res.FileUrl;
'courier_new', this.objOption.TeacherIcon = res.FileUrl;
'impact', }
'lucida_grande', })
'times_new_roman', },
'verdana' closeSaveForm() {
] this.$emit('close')
}, this.persistent = false
'removeFormat'
], },
['ordered', 'outdent', 'indent'], createTag() {
] if (this.tagText.length > 0) {
}, this.tags.push(this.tagText)
initObj() { this.tagText = ''
if (this.saveObj) { }
this.optionTitle = "修改教师信息" },
this.objOption = this.saveObj saveTeacher() {
if (this.objOption.TeachTag && this.objOption.TeachTag.length > 0) { this.saveLoading = true
this.tags = JSON.parse(this.objOption.TeachTag) this.$refs.School_Id.validate()
} this.$refs.TeacherName.validate()
} else { this.$refs.TeacherTel.validate()
this.optionTitle = "新增教师" let tempSchool = null
this.objOption = { if (
TId: 0, !this.$refs.School_Id.hasError &&
School_Id: '', !this.$refs.TeacherName.hasError &&
TeacherName: "", !this.$refs.TeacherTel.hasError
TeacherTel: '', ) {
TeacherHead: '', let err_msg = ""
TeacherIcon: '', if (this.objOption.TeacherIcon == '') {
TeacherSay: '', err_msg = "请上传教师形象照"
TeacherIntro: '', } else if (this.objOption.TeacherHead == '') {
IsShow: 1, err_msg = "请上传用户头像"
IsRecommend: 0, }
SortNum: 1 if (err_msg == "") {
} tempSchool = this.objOption.School_Id
} this.objOption.School_Id = this.objOption.School_Id.SId
}, this.objOption.TeachTag = JSON.stringify(this.tags)
removeTag(i) { saveTeacher(this.objOption).then(res => {
this.tags.splice(i, 1) this.saveLoading = false
}, this.$q.notify({
getSchool() { icon: 'iconfont icon-chenggong',
getSchoolDropdown({}).then(res => { color: 'accent',
this.schoolList = res.Data timeout: 2000,
if (this.objOption.School_Id != '') { message: '数据保存成功！',
this.objOption.School_Id = this.schoolList.filter(x => { position: 'top'
if (this.objOption.School_Id == x.SId) { })
return x this.$emit("success")
} this.closeSaveForm()
})[0] }).catch(() => {
} this.saveLoading = false
this.objOption.School_Id = tempSchool
}) })
}, } else {
onRejected(rejectedEntries) { this.$q.notify({
this.this.$q.notify({ type: 'negative',
type: 'negative', position: "top",
position: "top", message: err_msg
message: `文件验证失败，请重新上传`
}) })
}, this.saveLoading = false
uploadSuccess(info) { }
if (info.xhr.status == '200') { } else {
let res = JSON.parse(info.xhr.response) this.saveLoading = false
if (res.FilePath.indexOf('teacherIcon') == -1) { }
this.objOption.TeacherHead = this.imgDomain + res.FilePath },
} else {
this.objOption.TeacherIcon = this.imgDomain + res.FilePath
}
}
},
closeSaveForm() {
this.$emit('close')
this.persistent = false
},
createTag() {
if (this.tagText.length > 0) {
this.tags.push(this.tagText)
this.tagText = ''
}
},
saveTeacher() {
this.saveLoading = true
this.$refs.School_Id.validate()
this.$refs.TeacherName.validate()
this.$refs.TeacherTel.validate()
let tempSchool = null
if (
!this.$refs.School_Id.hasError &&
!this.$refs.TeacherName.hasError &&
!this.$refs.TeacherTel.hasError
) {
let err_msg = ""
if (this.objOption.TeacherIcon == '') {
err_msg = "请上传教师形象照"
} else if (this.objOption.TeacherHead == '') {
err_msg = "请上传用户头像"
}
if (err_msg == "") {
tempSchool = this.objOption.School_Id
this.objOption.School_Id = this.objOption.School_Id.SId
this.objOption.TeachTag = JSON.stringify(this.tags)
saveTeacher(this.objOption).then(res => {
this.saveLoading = false
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '数据保存成功！',
position: 'top'
})
this.$emit("success")
this.closeSaveForm()
}).catch(() => {
this.saveLoading = false
this.objOption.School_Id = tempSchool
})
} else {
this.$q.notify({
type: 'negative',
position: "top",
message: err_msg
})
this.saveLoading = false
}
} else {
this.saveLoading = false
}
},
}, },
} }
</script> </script>
<style> <style>
.tag-input { .tag-input {
border: 1px solid #777; border: 1px solid #777;
outline: none; outline: none;
width: 140px; width: 140px;
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
} }
</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