|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="tab2Add">
|
|
|
<div class="insideTop">
|
|
|
- 学院领导管理 > {{ruleForm.id?'编辑':'新增'}}领导信息
|
|
|
+ 学院领导管理 > {{ ruleForm.id ? "编辑" : "新增" }}领导信息
|
|
|
<div class="add">
|
|
|
<el-button type="primary" @click="goBack">返 回</el-button>
|
|
|
</div>
|
|
|
@@ -86,7 +86,7 @@
|
|
|
>
|
|
|
<div v-if="ruleForm.thumb" class="imgdiv">
|
|
|
<img
|
|
|
- style="max-width: 200px; max-height: 200px;display: block;"
|
|
|
+ style="max-width: 200px; max-height: 200px; display: block"
|
|
|
:src="baseURL + ruleForm.thumb"
|
|
|
/>
|
|
|
<i
|
|
|
@@ -102,7 +102,24 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- 富文本 -->
|
|
|
- <div class="con_top">领导简介</div>
|
|
|
+ <div class="con_top">
|
|
|
+ 领导简介
|
|
|
+ <!-- 富文本上传图片 -->
|
|
|
+ <el-upload
|
|
|
+ :headers="{
|
|
|
+ token,
|
|
|
+ }"
|
|
|
+ accept=".png,.jpg,.jpeg,.gif"
|
|
|
+ title="上传图片"
|
|
|
+ class="upload-demo imgUplod"
|
|
|
+ :action="baseURL + '/cms/leader/upload'"
|
|
|
+ multiple
|
|
|
+ :before-upload="beforethumbUploadImg"
|
|
|
+ :on-success="upload_thumb_successImg"
|
|
|
+ >
|
|
|
+ <i class="w-e-icon-image"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
<div id="div1" style="z-index: 1"></div>
|
|
|
<!-- 底部按钮 -->
|
|
|
<div class="con_btn">
|
|
|
@@ -144,19 +161,59 @@ export default {
|
|
|
// 监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
// 监控data中的数据变化
|
|
|
- watch: {
|
|
|
- },
|
|
|
+ watch: {},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
+ // 富文本上传图片
|
|
|
+ beforethumbUploadImg (file) {
|
|
|
+ // console.log(998, file)
|
|
|
+ // 限制图片大小和格式
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 5
|
|
|
+ const typeOk =
|
|
|
+ file.type === 'image/png' ||
|
|
|
+ file.type === 'image/jpeg' ||
|
|
|
+ file.type === 'image/gif'
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (!typeOk) {
|
|
|
+ this.$message.error('图片格式有误！')
|
|
|
+ reject(file)
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error('图片大小超过5M！')
|
|
|
+ reject(file)
|
|
|
+ } else if (file.name.length > 32) {
|
|
|
+ this.$message.error('图片名字不能超过32个字！')
|
|
|
+ reject(file)
|
|
|
+ } else {
|
|
|
+ resolve(file)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ upload_thumb_successImg (data) {
|
|
|
+ this.$message.success('上传成功')
|
|
|
+ this.editor.txt.append(
|
|
|
+ `<img src="${this.baseURL}${data.data.urlPath}" style="max-width:100%;display: block;margin: 10px auto;"/><p>  </p>`
|
|
|
+ )
|
|
|
+ },
|
|
|
// 点击保存
|
|
|
async saveLeader () {
|
|
|
// console.log(998, this.startTime, this.endTime)
|
|
|
- if (this.ruleForm.thumb === '') { return this.$message.warning('图片不能为空') }
|
|
|
- if (!this.time) { return this.$message.warning('任期不能为空') }
|
|
|
- if (this.editor.txt.html() === '') { return this.$message.warning('领导简介不能为空') }
|
|
|
+ if (this.ruleForm.thumb === '') {
|
|
|
+ return this.$message.warning('图片不能为空')
|
|
|
+ }
|
|
|
+ if (!this.time) {
|
|
|
+ return this.$message.warning('任期不能为空')
|
|
|
+ }
|
|
|
+ if (this.editor.txt.html() === '') {
|
|
|
+ return this.$message.warning('领导简介不能为空')
|
|
|
+ }
|
|
|
try {
|
|
|
await this.$refs.ruleForm.validate()
|
|
|
- const obj = { ...this.ruleForm, description: this.editor.txt.html(), tenure: this.time[0] + ',' + this.time[1] }
|
|
|
+ const obj = {
|
|
|
+ ...this.ruleForm,
|
|
|
+ description: this.editor.txt.html(),
|
|
|
+ tenure: this.time[0] + ',' + this.time[1]
|
|
|
+ }
|
|
|
const res = await leaderSave(obj)
|
|
|
if (res.code === 0) {
|
|
|
this.$message.success('操作成功')
|
|
|
@@ -214,8 +271,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created () {
|
|
|
- },
|
|
|
+ created () {},
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
async mounted () {
|
|
|
// 初始化富文本
|
|
|
@@ -273,11 +329,40 @@ export default {
|
|
|
overflow-y: auto;
|
|
|
height: calc(100% - 32px);
|
|
|
.con_top {
|
|
|
+ position: relative;
|
|
|
margin-bottom: 12px;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
padding-left: 20px;
|
|
|
background-color: #fbfbfb;
|
|
|
+ .imgUplod {
|
|
|
+ /deep/.w-e-icon-image {
|
|
|
+ color: #999;
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ /deep/.el-upload-list {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 53px;
|
|
|
+ right: 121px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ /deep/.w-e-icon-image {
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.biaoshi1::before {
|
|
|
left: -64px;
|
|
|
@@ -317,7 +402,7 @@ export default {
|
|
|
.imgdiv {
|
|
|
max-width: 200px;
|
|
|
max-height: 200px;
|
|
|
- &>img{
|
|
|
+ & > img {
|
|
|
border: 5px solid #ccc;
|
|
|
}
|
|
|
}
|
