You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
9.9 KiB
308 lines
9.9 KiB
4 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="flex-between">
|
||
|
|
<div class="per_title" v-preventReClick @click="goback()">
|
||
|
|
<i class="el-icon-arrow-left"></i>
|
||
|
|
<span class="per_back">返回</span>
|
||
|
|
<span class="per_school">老师评语</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div>
|
||
|
|
<p class="mgb20">评语模板名称</p>
|
||
|
|
<el-input
|
||
|
|
placeholder="请输入评语模板名称"
|
||
|
|
clearable
|
||
|
|
class="inline-input"
|
||
|
|
></el-input>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="flex-between mgb20">
|
||
|
|
<p class="l-title">老师寄语</p>
|
||
|
|
<el-switch></el-switch>
|
||
|
|
</div>
|
||
|
|
<div class="mgb20" style="display: flex;justify-content: flex-end;">
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" size="small" round>导入</el-button>
|
||
|
|
<el-button type="primary" size="small" round>删除</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-table :data="listData" class="table" stripe header-align="center" row-key="id">
|
||
|
|
<el-table-column type="index" width="100" label="序号" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
{{scope.$index+1}}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="name" label="分数" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="inline">
|
||
|
|
<el-select v-model="scope.row.score1" size="mini">
|
||
|
|
<el-option v-for="item in scoreList" :key="item.id" :label="item.label" :value="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
<span>——</span>
|
||
|
|
<el-select v-model="scope.row.score2" size="mini">
|
||
|
|
<el-option v-for="item in scoreList" :key="item.id" :label="item.label" :value="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="评语" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input type="textarea" rows="2" v-model="scope.row.comment"></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div class="plus" @click="addData">
|
||
|
|
<i class="el-icon-circle-plus-outline"></i>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="flex-between mgb20">
|
||
|
|
<p class="l-title">老师签名</p>
|
||
|
|
<el-switch></el-switch>
|
||
|
|
</div>
|
||
|
|
<div class="ags">
|
||
|
|
<div class="item">
|
||
|
|
<el-radio v-model="autograph" label="1">已有签名</el-radio>
|
||
|
|
<el-select v-model="agVal" size="mini">
|
||
|
|
<el-option v-for="item in autographList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-upload
|
||
|
|
class="avatar-uploader"
|
||
|
|
accept=".jpg,.png,.jpeg,.gif"
|
||
|
|
:on-remove="handleRemove"
|
||
|
|
:on-error="uploadError"
|
||
|
|
:on-success="uploadSuccess"
|
||
|
|
:before-remove="beforeRemove"
|
||
|
|
:limit="1"
|
||
|
|
:on-exceed="handleExceed"
|
||
|
|
:action="this.api.fileupload"
|
||
|
|
name="file"
|
||
|
|
>
|
||
|
|
<img v-if="coverUrl" :src="coverUrl" class="avatar">
|
||
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-radio v-model="autograph" label="2">重新上传</el-radio>
|
||
|
|
<el-select v-model="agVal" size="mini">
|
||
|
|
<el-option v-for="item in autographList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-upload
|
||
|
|
class="avatar-uploader"
|
||
|
|
accept=".jpg,.png,.jpeg,.gif"
|
||
|
|
:on-remove="handleRemove"
|
||
|
|
:on-error="uploadError"
|
||
|
|
:on-success="uploadSuccess"
|
||
|
|
:before-remove="beforeRemove"
|
||
|
|
:limit="1"
|
||
|
|
:on-exceed="handleExceed"
|
||
|
|
:action="this.api.fileupload"
|
||
|
|
name="file"
|
||
|
|
>
|
||
|
|
<img v-if="coverUrl" :src="coverUrl" class="avatar">
|
||
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'teachercomment',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
scoreList: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
label: 1
|
||
|
|
},{
|
||
|
|
id: 2,
|
||
|
|
label: 2
|
||
|
|
},{
|
||
|
|
id: 3,
|
||
|
|
label: 3
|
||
|
|
},
|
||
|
|
],
|
||
|
|
listData: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
score1: 1,
|
||
|
|
score2: 10,
|
||
|
|
comment: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
score1: 1,
|
||
|
|
score2: 10,
|
||
|
|
comment: ''
|
||
|
|
},
|
||
|
|
],
|
||
|
|
autograph: '1',
|
||
|
|
agVal: 1,
|
||
|
|
autographList: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: '签名一'
|
||
|
|
},{
|
||
|
|
id: 2,
|
||
|
|
name: '签名二'
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// this.getData()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
// let data = {
|
||
|
|
// countries: this.form.countries,
|
||
|
|
// provinceId: this.form.provinces,
|
||
|
|
// cityId: this.form.city,
|
||
|
|
// searchContent: this.form.keyword,
|
||
|
|
// pageNo: this.pageNo,
|
||
|
|
// pageSize: this.pageSize
|
||
|
|
// }
|
||
|
|
// this.$get(this.api.queryCustomer,data).then(res => {
|
||
|
|
// this.listData = res.message.rows
|
||
|
|
// this.totals = res.message.total
|
||
|
|
// }).catch(res => {});
|
||
|
|
},
|
||
|
|
entry(){
|
||
|
|
this.$router.push('report')
|
||
|
|
},
|
||
|
|
goback() {
|
||
|
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', {
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.$router.back()
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
},
|
||
|
|
handleExceed(files, fileList) {
|
||
|
|
this.$message.warning(
|
||
|
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
|
||
|
|
);
|
||
|
|
},
|
||
|
|
uploadSuccess(res, file, fileList) {
|
||
|
|
this.coverUrl = res.data.filesResult.fileUrl
|
||
|
|
},
|
||
|
|
uploadLgSuccess(res, file, fileList) {
|
||
|
|
this.carouselUrl = res.data.filesResult.fileUrl
|
||
|
|
},
|
||
|
|
uploadError(err, file, fileList) {
|
||
|
|
this.$message({
|
||
|
|
message: "上传出错，请重试！",
|
||
|
|
type: "error",
|
||
|
|
center: true
|
||
|
|
});
|
||
|
|
},
|
||
|
|
beforeRemove(file, fileList) {
|
||
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
||
|
|
},
|
||
|
|
handleRemove(file, fileList) {
|
||
|
|
this.uploadList = fileList
|
||
|
|
},
|
||
|
|
addData(){
|
||
|
|
this.listData.push({
|
||
|
|
id: '',
|
||
|
|
score1: '',
|
||
|
|
score2: '',
|
||
|
|
comment: '',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.inline-input{
|
||
|
|
width: 200px;
|
||
|
|
}
|
||
|
|
.inline{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
.el-select{
|
||
|
|
width: 100px;
|
||
|
|
margin: 0 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.plus{
|
||
|
|
padding: 10px 0;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #9278FF;
|
||
|
|
cursor: pointer;
|
||
|
|
i{
|
||
|
|
font-size: 24px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ags{
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.item:first-child{
|
||
|
|
padding-right: 20px;
|
||
|
|
margin-right: 20px;
|
||
|
|
border-right: 1px dashed #ccc;
|
||
|
|
}
|
||
|
|
.el-radio{
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
/deep/.el-select{
|
||
|
|
.el-input{
|
||
|
|
width: 150px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.avatar-uploader{
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
.avatar-uploader /deep/.el-upload {
|
||
|
|
width: 220px;
|
||
|
|
height: 140px;
|
||
|
|
border: 1px dashed #d9d9d9;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.avatar-uploader-lg /deep/.el-upload {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
.avatar-uploader .el-upload:hover {
|
||
|
|
border-color: #cb221c;
|
||
|
|
}
|
||
|
|
.avatar-uploader-icon {
|
||
|
|
font-size: 28px;
|
||
|
|
color: #8c939d;
|
||
|
|
width: 178px !important;
|
||
|
|
height: 178px;
|
||
|
|
line-height: 178px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.avatar {
|
||
|
|
width: 220px;
|
||
|
|
height: 140px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.avatar-lg {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|