|
@@ -60,6 +60,14 @@
|
|
<el-form-item label="简介">
|
|
<el-form-item label="简介">
|
|
<el-input v-model="dataForm.subTitle" style="width: 350px"></el-input>
|
|
<el-input v-model="dataForm.subTitle" style="width: 350px"></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-form-item style="width: 800px" label="通知图片">
|
|
|
|
+ <el-upload :action="fileImgUrl" list-type="picture-card" :file-list="dataForm.images" :limit="1"
|
|
|
|
+ :on-success="handleGallerySucess" :on-exceed="handleExceed" :before-upload="uploadBannerImg"
|
|
|
|
+ :on-remove="handleRemove">
|
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
|
+ </el-upload>
|
|
|
|
+
|
|
|
|
+ </el-form-item>
|
|
<el-form-item style="width: 800px" label="内容" prop="content">
|
|
<el-form-item style="width: 800px" label="内容" prop="content">
|
|
<tinymce v-model="dataForm.content" ref="tinymce"></tinymce>
|
|
<tinymce v-model="dataForm.content" ref="tinymce"></tinymce>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -100,6 +108,7 @@ export default {
|
|
directives: { waves },
|
|
directives: { waves },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ fileImgUrl: this.upLoadUrl,
|
|
list: [],
|
|
list: [],
|
|
total: 0,
|
|
total: 0,
|
|
listLoading: false,
|
|
listLoading: false,
|
|
@@ -112,7 +121,9 @@ export default {
|
|
dataForm: {
|
|
dataForm: {
|
|
title: '',
|
|
title: '',
|
|
subTitle:'',
|
|
subTitle:'',
|
|
- content: ''
|
|
|
|
|
|
+ content: '',
|
|
|
|
+ imgUrl: '',
|
|
|
|
+ images: [],
|
|
},
|
|
},
|
|
dialogFormVisible: false,
|
|
dialogFormVisible: false,
|
|
dialogStatus: '',
|
|
dialogStatus: '',
|
|
@@ -130,11 +141,51 @@ export default {
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ handleRemove(file, fileList) {
|
|
|
|
+ console.log(file, fileList);
|
|
|
|
+ let images = [];
|
|
|
|
+ for (let i in fileList) {
|
|
|
|
+ let response = fileList[i].response;
|
|
|
|
+ let url = response.data.url;
|
|
|
|
+ images.push(url);
|
|
|
|
+ this.dataForm.imgUrl = images.join(",");
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ uploadBannerImg(file) {
|
|
|
|
+ const isJPGs = file.type === "image/jpeg";
|
|
|
|
+ console.log(isJPGs);
|
|
|
|
+ },
|
|
|
|
+ handleExceed(files, fileList) {
|
|
|
|
+ this.$message.warning(
|
|
|
|
+ `当前限制选择 1 个文件,本次选择了 ${files.length} 个文件!,共选择了 ${files.length + fileList.length
|
|
|
|
+ } 个文件`
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ handleGallerySucess(res, file, fileList) {
|
|
|
|
+ this.dataForm.imgUrl = ""; // 清空画廊图片数组
|
|
|
|
+
|
|
|
|
+ let images = [];
|
|
|
|
+ for (let i in fileList) {
|
|
|
|
+ let response = fileList[i].response;
|
|
|
|
+ if (response.errno && response.errno != "0") {
|
|
|
|
+ this.$message.error("该图片上传失败,已被移除,请重新上传!");
|
|
|
|
+ // 上传失败移除该 file 对象
|
|
|
|
+ fileList.splice(i, 1);
|
|
|
|
+ } else {
|
|
|
|
+ let url = response.data.url;
|
|
|
|
+ images.push(url);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.dataForm.imgUrl = images.join(",");
|
|
|
|
+ },
|
|
resetForm() {
|
|
resetForm() {
|
|
this.dataForm = {
|
|
this.dataForm = {
|
|
title: '',
|
|
title: '',
|
|
subTitle:'',
|
|
subTitle:'',
|
|
- content: ''
|
|
|
|
|
|
+ content: '',
|
|
|
|
+ imgUrl: '',
|
|
|
|
+ images: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
handleCreate() {
|
|
handleCreate() {
|
|
@@ -170,6 +221,20 @@ export default {
|
|
handleUpdate(row) {
|
|
handleUpdate(row) {
|
|
this.dataForm = Object.assign({}, row);
|
|
this.dataForm = Object.assign({}, row);
|
|
let content = this.dataForm.content;
|
|
let content = this.dataForm.content;
|
|
|
|
+ if (this.dataForm.imgUrl) {
|
|
|
|
+ let images = this.dataForm.imgUrl.split(",");
|
|
|
|
+ this.dataForm.images = [];
|
|
|
|
+ for (let i in images) {
|
|
|
|
+ let url = images[i];
|
|
|
|
+ let name = "image_" + i;
|
|
|
|
+
|
|
|
|
+ this.dataForm.images.push({
|
|
|
|
+ name: name,
|
|
|
|
+ url: url,
|
|
|
|
+ response: { error: "0", data: { url: url } },
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
this.dialogStatus = 'update'
|
|
this.dialogStatus = 'update'
|
|
this.dialogFormVisible = true
|
|
this.dialogFormVisible = true
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|