Skip to content

H
haoban-3
Commit f209dba1 by crushh
Options

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

parents b2d3da76 4ce01c01
Showing with 87 additions and 131 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/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