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.
307 lines
9.9 KiB
307 lines
9.9 KiB
<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> |
|
|
|
|