Skip to content

H
haoban-3
Commit f209dba1 by crushh
Options

Merge branch 'feature/11月迭代' into dev

parents b2d3da76 4ce01c01
Showing with 275 additions and 500 deletions
src/components/company/new-depart-member.vue
......@@ -165,6 +165,7 @@ export default {
* 导出
*/
exportExcel: _debounce(function() {
console.log(`/haoban-manage3-web/staff-export?departmentId=${this.departObj.departmentId}&relationFlag=${this.relationFlag}&keyWord=${this.searchInput}`);
window.open(`/haoban-manage3-web/staff-export?departmentId=${this.departObj.departmentId}&relationFlag=${this.relationFlag}&keyWord=${this.searchInput}`);
}, 300),
......
src/components/mult-upload-img.vue
......@@ -3,415 +3,234 @@
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-12-06 13:44:22
* @LastEditors : 无尘
* @LastEditTime : 2019-12-25 14:55:35
* @LastEditors: 无尘
* @LastEditTime: 2020-06-12 15:35:03
-->
<!--
多个上传组件
<mult-upload-image
:imageList="imageList"
:originList = "originList"
:disabled="disabled"
@deleteImage="deleteImage"
@sortImg = "sortImg"
@uploadOnSuccess="uploadOnSuccess">
</mult-upload-image>
单个上传组件
<single-upload
:imgSrc.sync=""
:field="''">
</single-upload>
-->
<template>
<div class="gic-upload__img">
<!-- 上传成功的图片展示 -->
<div class="gic-upload__img__drag">
<draggable :options="{ group: { name: 'people', pull: false, put: true }, sort: true }" v-model="dragImageList" @end="itemMoveEnd" class="drag-wrap" style="display: contents;">
<transition-group name="slide-fade">
<div v-for="(item, index) in imageList" :class="['img-content', index >= 6 ? 'm-t-8' : '']" :key="index + 'img'">
<a class="item-img" :href="item.imgUrl">
<img :src="item.imgUrl" alt="上传图片" />
</a>
<!-- 预览和删除按钮 -->
<div class="upload-icon__btn">
<i class="el-icon-view" @click="previewImage(index)"></i>
<i v-if="!disabled" class="el-icon-delete" @click="deleteImage(index)"></i>
</div>
<div>
<p class="upload-tip color-909399 font-12">
图片支持png、jpg、jpeg格式，大小不超过2M，一次性最多上传30张
</p>
<div class="single-upload-wrap">
<div class="imageList">
<el-upload class="avatar-uploader" v-show="!disabled" multiple :file-list="imgList" :show-file-list="false" :http-request="handleRequest" :before-upload="beforeUpload">
<div v-if="!videoSrc" class="flex-column">
<i class="el-icon-plus vatar-uploader-icon"></i>
<p class="font-12 color-606266" style="line-height: 22px;">上传图片</p>
</div>
</transition-group>
</draggable>
<!-- 上传进度条 -->
<div v-if="!pass && progress !== 0" :class="['img-content', 'img-progress', imageList.length >= 6 ? 'm-t-8' : '']">
<el-progress class="gic-img-progress" :width="102" :percentage="progress" :status="propStatus" style="line-height: 102px;"></el-progress>
</div>
<!-- 图片上传部分 -->
<div v-if="imageList && imageList.length < maxImageLength" :class="['img-upload', imageList.length >= 6 ? 'm-t-8' : '']">
<el-upload :disabled="disabled" multiple class="loader" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" :file-list="fileDatas" :action="uploadUrl()" list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-change="uploadOnChange" :before-upload="beforeAvatarUpload" :on-error="uploadOnError" :on-progress="uploadOnProgress"
><!-- :file-list="fileDatas" -->
<i class="el-icon-plus gic-upload-btn"></i>
</el-upload>
<div v-for="item in imgList" :key="item" class="imageBox">
<img :src="item.url" class="image" />
<div class="imageMask">
<span @click="handleRemove(item.url)" class="el-upload-list__item-delete">
<i class="el-icon-error"></i>
</span>
<!-- <span @click="handlePreview(item.url)" class="el-upload-list__item-preview is-preview">
<i class="el-icon-zoom-in"></i>
</span> -->
</div>
</div>
</div>
<!-- 图片预览 -->
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
</div>
<el-dialog title="图片预览" :visible.sync="isEnlargeImage" :modal-append-to-body="false" :before-close="handleClose" width="520px">
<el-carousel v-if="isEnlargeImage" trigger="click" :initial-index="initialImg" :autoplay="false" height="500px">
<el-carousel-item v-for="(img, index) in imageList" :key="index" style="display: flex;align-items: center;justify-content: center;">
<img @click="isEnlargeImage = false" style="max-width: 480px;max-height: 500px;" :src="img.imgUrl" />
</el-carousel-item>
</el-carousel>
</el-dialog>
</div>
</template>
<script>
/**
放大预览
删除
添加到循环里面
开始上传 上传失败 上传成功三个步骤
上传图片的进度条是固定的样式大小、如果我这边修改的话
会不会影响其他地方的样式
*/
import draggable from 'vuedraggable';
import errMsg from '@/common/js/error';
import { postForm } from '@/api/api';
export default {
name: 'mult-upload-image',
name: 'mult-upload',
props: {
projectName: {
type: String,
default: 'haoban-manage-web'
},
disabled: {
type: Boolean,
default: false
},
wxFlag: {
type: String,
default: '1'
},
imgRate: {
type: String
},
// 上传地址
actionUrl: {
type: String,
default: '/haoban-manage-web/upload-img'
},
// 图片限制 不能超过 超过隐藏上传按钮
maxImageLength: {
type: Number,
default: 9
},
limitW: {
type: Number
},
limitH: {
type: Number
},
imageList: {
type: Array,
default() {
return [];
}
},
originList: {
imgList: {
// 传入 input value
type: Array,
default() {
return [];
}
default: () => []
}
},
data() {
return {
dragImageList: JSON.parse(JSON.stringify(this.imageList)), // 传递的图片数据
fileDatas: JSON.parse(JSON.stringify(this.originList)),
initialImg: 0, // 初始索引
progress: 0, // 上传进度
pass: null, // 是否上传成功
isEnlargeImage: false, // 放大图片
enlargeImage: '' // 放大的图片的地址
imgShowFlag: false // 是否弹框显示,true: 显示；false: 不显示
};
},
computed: {
propStatus() {
if (this.pass) {
return 'success';
} else if (this.pass === false) {
return 'exception';
} else {
return 'text';
}
disabled() {
return this.imgList.length >= 30;
}
},
beforeMount() {
// this.action = this.actionUrl;
},
methods: {
// 获取 action 的 url
uploadUrl() {
const that = this;
const host = window.location.origin;
let baseUrl;
let wxFlag;
wxFlag = !!that.wxFlag && that.wxFlag != '' ? 'wxFlag=' + that.wxFlag + '&' : '';
if (host.indexOf('localhost') != '-1') {
baseUrl = 'https://www.gicdev.com';
} else {
baseUrl = host;
}
that.upUrl = baseUrl + that.actionUrl + '?' + wxFlag + 'requestProject=' + that.projectName;
return that.upUrl;
handleRequest(data) {
const { file } = data;
let files = new FormData();
files.append('file', file);
postForm('/haoban-manage3-web/upload-file?fileType=jpg', files).then(res => {
const { data } = res;
if (data.errorCode == 1) {
this.imgList.length < 30 ? this.imgList.push({ uid: data.result.key, url: data.result.url, mediaName: data.result.mediaName }) : this.$message.error('一次性上传仅支持30张图片');
this.$emit('update:imgList', this.imgList);
} else {
errMsg.errorMsg(data);
}
});
},
// 上传之前回调
beforeAvatarUpload(file) {
/* eslint-disable */
beforeUpload(file) {
const that = this;
// const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/jpg';
const isLt5M = file.size / 1024 / 1024 < 5;
// if (!isJPG) {
// that.$message.error('上传图片只能是 JPG/JPEG 格式!');
// }
if (!isLt5M) {
that.$message.error('上传图片大小不能超过 5MB!');
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
that.$message.error('上传图片支持png、jpg、jpeg格式!');
}
if (!isLt2M) {
that.$message.error(`上传图片大小不能超过2MB!`);
}
return (
isLt5M &&
new Promise(function(resolve, reject) {
let reader = new FileReader();
reader.onload = function(event) {
let image = new Image();
image.onload = function() {
let width = this.width;
let height = this.height;
// console.log(width,height,!that.imgRate)
if (!!that.imgRate && that.imgRate !== '') {
let limitRate = Number(that.imgRate.split(':')[0]) / Number(that.imgRate.split(':')[1]);
let realRate = Number(width) / Number(height);
// console.log(limitRate, realRate);
if (limitRate != realRate) {
that.$message.error('上传图片比例不正确!');
reject();
}
}
if ((!that.imgRate || that.imgRate == '') && !!that.limitW && that.limitH && width !== that.limitW && height !== that.limitH) {
that.$message.error('上传图片尺寸不正确!');
reject();
}
resolve();
};
image.src = event.target.result;
};
reader.readAsDataURL(file);
})
isJPG && isLt2M
);
},
// 开始上传
uploadOnProgress(e, file) {
const that = this;
if (e && e.percent) {
that.progress = Math.floor(e.percent);
}
},
uploadOnChange(file, fileList) {
const that = this;
if (file.status === 'ready') {
that.pass = null;
that.progress = 0;
} else if (file.status === 'fail') {
that.$message.error('图片上传失败，请重试！');
}
/* eslint-disable */
that.fileDatas = fileList;
// console.log('fileList:', fileList, that.fileDatas)
that.$nextTick(() => {
let list = [];
if (fileList.length) {
fileList.forEach(ele => {
list.push({
imgUrl: ele.response.result[0].qcloudImageUrl
})
})
}
that.$emit('uploadOnSuccess', list, fileList);
that.pass = null;
that.progress = 0;
})
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
uploadOnError() {
this.$message.error('图片上传失败，请重试！');
},
// 预览图片
previewImage(i) {
this.isEnlargeImage = true;
this.initialImg = i;
},
// 删除图片
deleteImage(i) {
/* eslint-disable */
const that = this;
if (that.disabled) {
return false;
}
this.$emit('deleteImage', i);
// this.imageList.splice(i, 1);
},
// 关闭弹层
handleClose(done) {
done();
},
// move end
itemMoveEnd(evt) {
const that = this;
for (let index = 0; index < that.dragImageList.length; index++) {
that.fileDatas[index].response.result[0].qcloudImageUrl = that.dragImageList[index].imgUrl;
}
that.$emit('sortImg', that.dragImageList, that.fileDatas);
}
/**
* 上传图片预览
*/
handlePreview(url) {
this.imgShowFlag = true;
this.imgUrl = url;
},
watch: {
imageList: function(newData, oldData) {
const that = this;
that.dragImageList = JSON.parse(JSON.stringify(newData));
},
originList: function(newData, oldData) {
const that = this;
that.fileDatas = JSON.parse(JSON.stringify(newData));
}
handleRemove(item){
let imgList = this.imgList.filter(i=>i.url!=item);
this.$emit('update:imgList',imgList);
},
/* 接收数据 */
mounted() {
const that = this;
that.dragImageList = JSON.parse(JSON.stringify(that.imageList));
that.fileDatas = JSON.parse(JSON.stringify(that.originList));
},
components: {
draggable
hideImage(val) {
this.imgShowFlag = val;
this.imgUrl = '';
}
};
</script>
<style>
.el-upload-dragger {
height: 104px;
line-height: 104px;
width: 104px;
background-color: transparent;
}
.gic-upload__img {
display: inline-block;
}
.gic-upload__img__drag {
max-width: 680px;
display: inline-block;
font-size: 0;
}
.gic-upload__img .img-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
width: 104px;
height: 104px;
box-sizing: border-box;
border: 1px solid #dcdfe6;
border-radius: 4px;
cursor: pointer;
}
.img-content.m-t-8 {
margin-top: 8px;
}
.gic-upload__img .img-content .upload-icon__btn {
position: absolute;
font-size: 16px;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gic-upload__img .img-content .item-img {
// mounted() {}
};
</script>
<style lang="scss" scoped>
.single-upload-wrap{
overflow-y: scroll;
height: 400px;
margin-top: 10px;
}
.w-500 {
width: 500px;
}
.avatar-uploader {
>>> .el-upload {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin: 8px;
height: 86px;
width: 86px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*border: 1px solid #dcdfe6;*/
border-radius: 0;
}
.gic-upload__img .img-content .item-img img {
position: static;
display: block;
max-width: 86px;
max-height: 86px;
}
.gic-upload__img .img-content::after {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
content: ' ';
display: block;
height: 86px;
width: 86px;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s;
opacity: 0;
}
.gic-upload__img .img-content:hover::after {
opacity: 1;
}
.gic-upload__img .img-content:hover .upload-icon__btn {
width: 100px;
height: 100px;
border: 1px dashed #c4c6cf;
border-radius: 0px;
cursor: pointer;
position: relative;
overflow: hidden;
margin-top: 5px;
}
}
.upload-tip {
margin-top: 12px;
font-size: 12px;
line-height: 12px;
}
.flex-column{
display: flex;
flex-direction: column;
}
.imageList{
display: flex;
flex-wrap: wrap;
}
.imageBox{
position: relative;
width: 102px;
height: 102px;
margin: 5px 0 0 5px;
img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
z-index: 100;
color: #fff;
}
.gic-upload__img .img-upload {
display: inline-block;
vertical-align: middle;
font-size: 28px;
}
.img-upload.m-t-8 {
margin-top: 8px;
}
.el-upload-list--picture-card {
display: none;
}
.el-upload--picture-card {
width: 104px;
height: 104px;
line-height: 104px;
}
.slide-fade-enter-active {
transition: all 0.6s ease;
}
.slide-fade-leave-active {
transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.imageMask{
opacity:0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
&:hover{
opacity:1;
}
span {
display: inline-block;
cursor: pointer;
}
.el-upload-list__item-delete {
z-index: 1;
line-height: 1;
top: 0px;
right: 0px;
transform: translate(40%, -40%);
position: absolute;
font-size: inherit;
color: inherit;
.el-icon-error {
color: rgba(0, 0, 0, 0.4);
font-size: 16px;
&:hover {
color: rgba(0, 0, 0, 0.8);
}
}
}
.slide-fade-enter,
.slide-fade-leave-to {
opacity: 0;
.el-upload-list__item-preview {
z-index: 2;
position: absolute;
line-height: 1px;
border-radius: 100%;
right:-3px;
bottom:-3px;
height: 25px;
width: 25px;
background-color: rgba(0, 0, 0, 0.4);
.el-icon-zoom-in {
font-size: 14px;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
&:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: scale(1.3);
right: -2px;
bottom: -2px;
}
}
}
}
.imageBox:nth-child(4n+1){
margin:5px 0 0 0;
}
</style>
src/components/set/image-edit.vue
......@@ -14,17 +14,18 @@
<el-dialog :title="!!editRow.materialId ? '编辑图片' : '新建图片'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
<div class="">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!-- <el-form-item label="图片标题" prop="materialTitle">
<el-form-item label="图片标题" prop="materialTitle" v-if="!multiple">
<limitInput :inputWidth="440" :inputValue.sync="ruleForm.materialTitle" :holder="'请输入图片标题'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item> -->
</el-form-item>
<el-form-item label="图片" prop="imgUrl">
<single-upload uploadType="1" :imgSrc.sync="ruleForm.imgUrl"> </single-upload>
<mult-upload v-if="multiple" :imgList.sync="imgList" />
<single-upload v-else uploadType="1" :imgSrc.sync="ruleForm.imgUrl"> </single-upload>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="toCancel">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
<el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-dialog>
</template>
......@@ -33,8 +34,7 @@ import singleUpload from '@/components/single-upload.vue';
import multUpload from '@/components/mult-upload-img.vue';
import limitInput from '@/components/limit-input.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
import { postRequest, postJson } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { emojiArr } from '@/utils/emoji';
......@@ -51,6 +51,10 @@ export default {
default() {
return '';
}
},
multiple: {
type: Boolean,
default: false
}
},
components: {
......@@ -72,6 +76,8 @@ export default {
materialTitle: [{ required: true, message: '请输入图片标题', trigger: 'blur' }],
imgUrl: [{ required: true, message: '请上传图片', trigger: 'blur' }]
},
imgList: [],
loading: false,
emojiList: emojiArr
};
},
......@@ -80,20 +86,57 @@ export default {
const that = this;
that.$emit('closeText');
that.$refs['ruleForm'].resetFields();
this.imgList = [];
},
handleClose(done) {
const that = this;
that.$emit('closeText');
that.$refs['ruleForm'].resetFields();
handleClose() {
this.toCancel();
},
submitForm(formName) {
if (this.multiple) {
if (!this.imgList.length) return showMsg.showmsg('请上传图片', 'info');
this.submitImgList();
} else {
this.$refs[formName].validate(valid => {
if (valid) {
this.postSave();
}
});
}
},
submitImgList() {
const data = {
material: {
materialTitle: this.categoryId,
materialType: 2,
categoryId: this.categoryId,
wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : ''
},
materialMediaList: this.imgList.map(item => {
return { mediaUrl: item.url, mediaName: item.mediaName };
})
};
this.loading = true;
postJson('haoban-manage3-web/material-batch-add', data)
.then(res => {
const { data } = res;
if (data.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
this.imgList = [];
this.$emit('submitText');
} else {
errMsg.errorMsg(data);
}
})
.catch(error => {
this.$message.error({
duration: 1000,
message: error.message
});
})
.finally(() => {
this.loading = false;
});
},
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.postSave();
}
});
}, 300),
postSave() {
const that = this;
const data = {
......@@ -103,6 +146,7 @@ export default {
materialTitle: that.ruleForm.materialTitle,
imgUrl: that.ruleForm.imgUrl
};
this.loading = true;
postRequest(that.ruleForm.materialId ? '/haoban-manage3-web/material-edit' : '/haoban-manage3-web/material-add', data)
.then(res => {
let resData = res.data;
......@@ -119,6 +163,9 @@ export default {
duration: 1000,
message: error.message
});
})
.finally(() => {
this.loading = false;
});
}
},
......
src/components/single-upload.vue
......@@ -15,28 +15,16 @@
-->
<template>
<div class="single-upload-wrap">
<div class="imageList">
<el-upload class="avatar-uploader" :action="uploadUrl()" multiple list-type="picture-card" :file-list="imgList" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<!-- <img v-if="imgSrc" :src="imgSrc" class="avatar" @mouseover="showImage(imgSrc)" /> -->
<!-- <i class="el-icon-plus"></i> -->
<video v-if="videoSrc != '' && videoFlag == false" :src="videoSrc" class="avatar">您的浏览器不支持视频播放</video>
<div v-if="!videoSrc" class="flex-column">
<i class="el-icon-plus vatar-uploader-icon"></i>
<p class="font-12 color-606266" style="line-height: 22px;">{{ uploadType == 1 || uploadType == 2 || uploadType == 4 ? '上传图片' : '上传视频' }}</p>
</div>
</el-upload>
<div v-for="item in imgList" :key="item" class="imageBox">
<img :src="item.url" class="image" />
<div class="imageMask">
<span @click="handleRemove(item.url)" class="el-upload-list__item-delete">
<i class="el-icon-error"></i>
</span>
<span @click="handlePreview(item.url)" class="el-upload-list__item-preview is-preview">
<i class="el-icon-zoom-in"></i>
</span>
</div>
<el-upload class="avatar-uploader" :action="uploadUrl()" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="imgSrc" :src="imgSrc" class="avatar" @mouseover="showImage(imgSrc)" />
<video v-if="videoSrc != '' && videoFlag == false" :src="videoSrc" class="avatar">您的浏览器不支持视频播放</video>
<div v-if="!imgSrc && !videoSrc">
<i class="el-icon-plus avatar-uploader-icon"></i>
<p class="font-12 color-606266">{{ uploadType == 1 || uploadType == 2 || uploadType == 4 ? '上传图片' : '上传视频' }}</p>
</div>
</div>
<!-- <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress> -->
</el-upload>
<p v-if="uploadType == 1" class="upload-tip color-909399 font-12">
图片支持png、jpg、jpeg格式，大小不超过2M，可上传1张
</p>
......@@ -50,7 +38,7 @@
建议尺寸：520×416，支持png、jpg、jpeg格式，大小不超过1M
</p>
<!-- 图片预览 -->
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
<!-- <vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview> -->
</div>
</template>
<script>
......@@ -91,7 +79,6 @@ export default {
imgShowFlag: false, // 是否弹框显示,true: 显示；false: 不显示
imgUrl: '', // 传递的图片 src
videoFlag: false,
imgList: [],
fileType: this.uploadType == 1 || this.uploadType == 2 ? 'jpg' : 'mp4'
};
},
......@@ -132,8 +119,7 @@ export default {
if (that.uploadType == 3) {
that.$emit('update:videoSrc', res.result.url);
} else {
this.imgList.push({ uid: res.result.key, url: res.result.url });
that.$emit('update:imgSrc', this.imgList);
that.$emit('update:imgSrc', res.result.url);
}
} else {
errMsg.errorMsg(res);
......@@ -190,17 +176,17 @@ export default {
/**
* 上传图片预览
*/
handlePreview(url) {
this.imgShowFlag = true;
this.imgUrl = url;
},
handleRemove(item){
console.log(item)
this.imgList = this.imgList.filter(i=>i.url!=item);
showImage(src) {
const that = this;
if (!src || src == '') {
return false;
}
that.imgShowFlag = true;
that.imgUrl = src;
},
hideImage(val) {
this.imgShowFlag = val;
this.imgUrl = '';
const that = this;
that.imgShowFlag = val;
}
}
// mounted() {}
......@@ -299,82 +285,4 @@ export default {
.color-1890ff {
color: #2f54eb;
}
.flex-column{
display: flex;
flex-direction: column;
}
.imageList{
display: flex;
flex-wrap: wrap;
}
.imageBox{
position: relative;
max-width: 102px;
height: 102px;
margin: 0 0 5px 5px;
img{
width: 100%;
height: 100%;
display: block;
}
.imageMask{
opacity:0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
&:hover{
opacity:1;
}
span {
display: inline-block;
cursor: pointer;
}
.el-upload-list__item-delete {
z-index: 1;
line-height: 1;
top: 0px;
right: 0px;
transform: translate(40%, -40%);
position: absolute;
font-size: inherit;
color: inherit;
.el-icon-error {
color: rgba(0, 0, 0, 0.4);
font-size: 16px;
&:hover {
color: rgba(0, 0, 0, 0.8);
}
}
}
.el-upload-list__item-preview {
z-index: 2;
position: absolute;
line-height: 1px;
border-radius: 100%;
right:-3px;
bottom:-3px;
height: 25px;
width: 25px;
background-color: rgba(0, 0, 0, 0.4);
.el-icon-zoom-in {
font-size: 14px;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
&:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: scale(1.3);
right: -2px;
bottom: -2px;
}
}
}
}
</style>
src/views/enterprise/material.vue
......@@ -118,7 +118,7 @@
</div>
<group-dialog v-if="addShow" :categoryParentId="categoryParentId" :editRow="editGroupRow" @closeGroup="closeGroup" @submitGroup="submitGroup"></group-dialog>
<text-edit v-if="textShow" :categoryId="currentCategoryId" @closeText="closeText" @submitText="submitText"></text-edit>
<image-edit v-if="imageShow" :categoryId="currentCategoryId" @closeText="closeText" @submitText="submitText"></image-edit>
<image-edit v-if="imageShow" :categoryId="currentCategoryId" @closeText="closeText" @submitText="submitText" multiple></image-edit>
<web-edit v-if="webShow" :categoryId="currentCategoryId" @closeText="closeText" @submitText="submitText"></web-edit>
<video-edit v-if="videoShow" :categoryId="currentCategoryId" @closeText="closeText" @submitText="submitText"></video-edit>
<file-edit v-if="fileShow" :categoryId="currentCategoryId" @closeText="closeText" @submitText="submitText"></file-edit>
......
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