Skip to content

O
office-web
Commit 4b813c93 by 无尘
Options

fix: 修改门店图片上传

parent 631cbeb0
Showing with 382 additions and 15 deletions
changelog.md
## [1.0.6](http://115.159.76.241/office/office-web/compare/v1.0.3...v1.0.6) (2019-02-21)
## [1.0.9](http://115.159.76.241/office/office-web/compare/v1.0.8...v1.0.9) (2019-02-21)
## [1.0.8](http://115.159.76.241/office/office-web/compare/v1.0.7...v1.0.8) (2019-02-21)
### Bug Fixes
* 修复行政架构编辑 bug ([b510c3b](http://115.159.76.241/office/office-web/commits/b510c3b))
* 修改 eslint 配置，配置允许 catch 空代码块 ([9f3e40f](http://115.159.76.241/office/office-web/commits/9f3e40f))
* 修改导出档案 bug ([631cbeb](http://115.159.76.241/office/office-web/commits/631cbeb))
* 修改门店编辑 ([d0cbdb3](http://115.159.76.241/office/office-web/commits/d0cbdb3))
* 修改门店编辑上传图片 ([dd31bb4](http://115.159.76.241/office/office-web/commits/dd31bb4))
......
dist/index.html
<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>好办管理平台</title><link href=./static/css/app.94537bb643cf12696ded2b3c79d19a0b.css rel=stylesheet></head><body style="min-width: 1400px;"><div id=app></div><script type=text/javascript src=./static/js/manifest.9b2002aab7c0bf1341eb.js></script><script type=text/javascript src=./static/js/vendor.fe6bbed1214c1931680c.js></script><script type=text/javascript src=./static/js/app.00231ebf281d6f3e60c0.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>好办管理平台</title><link href=./static/css/app.94537bb643cf12696ded2b3c79d19a0b.css rel=stylesheet></head><body style="min-width: 1400px;"><div id=app></div><script type=text/javascript src=./static/js/manifest.b19b13ad9132f1690d9d.js></script><script type=text/javascript src=./static/js/vendor.fe6bbed1214c1931680c.js></script><script type=text/javascript src=./static/js/app.00231ebf281d6f3e60c0.js></script></body></html>
\ No newline at end of file
dist/static/js/manifest.9b2002aab7c0bf1341eb.js → dist/static/js/manifest.b19b13ad9132f1690d9d.js
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,n,r){for(var t,b,o,i=0,u=[];i<c.length;i++)b=c[i],f[b]&&u.push(f[b][0]),f[b]=0;for(t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);for(a&&a(c,n,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)o=d(d.s=r[i]);return o};var c={},f={44:0};function d(a){if(c[a])return c[a].exports;var f=c[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,d),f.l=!0,f.exports}d.e=function(e){var a=f[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,d){a=f[e]=[c,d]});a[2]=c;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,d.nc&&r.setAttribute("nonce",d.nc),r.src=d.p+"static/js/"+e+"."+{0:"eb0a4246ba12b2f19e2a",1:"0ebe3ead93207dc78a78",2:"a3034ac019ab3b076959",3:"7f87f1f60c09bb6ad371",4:"7dd9b3bb0689b9db1cf3",5:"3417bcae84d670c66db1",6:"fbd06ea78358b8144d70",7:"fb9879c0177f64d093fb",8:"d7aaadab295e16aa570e",9:"325d932bbdd43400378c",10:"4e361f7d71dc54b505c7",11:"f0a5934a01e738b98d90",12:"083c2dea91ab829164ab",13:"cd7e52c325cdc13a2368",14:"c7093604e27c367303cf",15:"bd12670087ac2b78bcd8",16:"1524360dd522553f9835",17:"0df740b440fad8662864",18:"07d5abcfefbcf450eccc",19:"dabaaf4b65f9f75c9a0d",20:"f5dd0c36e2944f5fa78c",21:"7faaa888e2db1aa1e5a3",22:"e2b096ce6ec3d2f5b0d7",23:"36f14084226b8d6bba02",24:"da00208b59bc1152ea8c",25:"e18d84688b21155beafe",26:"bd139135ffeed7c3be5d",27:"e85ffa7929197dc4609a",28:"c75ca2dc62974c43903c",29:"25c23e727c71fda1821b",30:"5546948c939232668fc6",31:"16358ad3a9085c551664",32:"20338d6b658d38bf70dc",33:"375e96e88f2f82b30e3c",34:"57d4132e0ff6a5a8ac00",35:"aed8a28b82487ff5f295",36:"158063a49dabc462fe14",37:"f30f4e653b1f9e708aaa",38:"ac5ef7410309c861198f",39:"3e612f993ddd107c14dd",40:"f965564e0c6bf413d47f",43:"13848f214bb993c20004"}[e]+".js";var t=setTimeout(b,12e4);function b(){r.onerror=r.onload=null,clearTimeout(t);var a=f[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}return r.onerror=r.onload=b,n.appendChild(r),c},d.m=e,d.c=c,d.d=function(e,a,c){d.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},d.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(a,"a",a),a},d.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},d.p="./",d.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,n,r){for(var t,b,o,i=0,u=[];i<c.length;i++)b=c[i],f[b]&&u.push(f[b][0]),f[b]=0;for(t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);for(a&&a(c,n,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)o=d(d.s=r[i]);return o};var c={},f={44:0};function d(a){if(c[a])return c[a].exports;var f=c[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,d),f.l=!0,f.exports}d.e=function(e){var a=f[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,d){a=f[e]=[c,d]});a[2]=c;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,d.nc&&r.setAttribute("nonce",d.nc),r.src=d.p+"static/js/"+e+"."+{0:"eb0a4246ba12b2f19e2a",1:"0ebe3ead93207dc78a78",2:"a3034ac019ab3b076959",3:"7f87f1f60c09bb6ad371",4:"7dd9b3bb0689b9db1cf3",5:"3417bcae84d670c66db1",6:"fbd06ea78358b8144d70",7:"fb9879c0177f64d093fb",8:"cb6198aa495ed7d70e24",9:"325d932bbdd43400378c",10:"4e361f7d71dc54b505c7",11:"f0a5934a01e738b98d90",12:"083c2dea91ab829164ab",13:"cd7e52c325cdc13a2368",14:"c7093604e27c367303cf",15:"bd12670087ac2b78bcd8",16:"1524360dd522553f9835",17:"0df740b440fad8662864",18:"07d5abcfefbcf450eccc",19:"dabaaf4b65f9f75c9a0d",20:"f5dd0c36e2944f5fa78c",21:"7faaa888e2db1aa1e5a3",22:"e2b096ce6ec3d2f5b0d7",23:"36f14084226b8d6bba02",24:"da00208b59bc1152ea8c",25:"e18d84688b21155beafe",26:"f7dd53aad405f73538cb",27:"e85ffa7929197dc4609a",28:"c75ca2dc62974c43903c",29:"25c23e727c71fda1821b",30:"5546948c939232668fc6",31:"16358ad3a9085c551664",32:"20338d6b658d38bf70dc",33:"375e96e88f2f82b30e3c",34:"57d4132e0ff6a5a8ac00",35:"aed8a28b82487ff5f295",36:"158063a49dabc462fe14",37:"f30f4e653b1f9e708aaa",38:"ac5ef7410309c861198f",39:"3e612f993ddd107c14dd",40:"f965564e0c6bf413d47f",43:"13848f214bb993c20004"}[e]+".js";var t=setTimeout(b,12e4);function b(){r.onerror=r.onload=null,clearTimeout(t);var a=f[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}return r.onerror=r.onload=b,n.appendChild(r),c},d.m=e,d.c=c,d.d=function(e,a,c){d.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},d.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(a,"a",a),a},d.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},d.p="./",d.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
package.json
{
"name": "gicfront",
"version": "1.0.6",
"version": "1.0.9",
"description": "A Vue.js project",
"author": "haoban",
"private": true,
......
src/components/employeeRecord/editableCell.vue
......@@ -23,6 +23,7 @@
<el-date-picker v-else-if="item.fieldType == 4" v-model="info[item.fieldCode]" type="date" :disabled="item.fieldEdited != '1'" :format="item.fieldOperations.typeValue" :value-format="item.fieldOperations.typeValue" :placeholder="item.fieldDescription"> </el-date-picker>
<el-date-picker v-else-if="item.fieldType == 5" v-model="info[item.fieldCode]" type="daterange" range-separator="至" :disabled="item.fieldEdited != '1'" :format="item.fieldOperations.typeValue" :value-format="item.fieldOperations.typeValue" :start-placeholder="item.fieldOperations.startDescription" :end-placeholder="item.fieldOperations.endDescription"> </el-date-picker>
<vue-office-upload-image v-else-if="item.fieldType == 7" projectName="haoban-manage-web" wxFlag="0" :actionUrl="uploadUrl" :imageList="info[item.fieldCode]" :limitW="500" :limitH="500" :maxImageLength="5" @uploadOnSuccess="uploadOnSuccess" @sortImg="sortImg" @deleteImage="deleteImage"> </vue-office-upload-image>
<!-- <uploadImage v-else-if="item.fieldType == 7" projectName="haoban-manage-web" wxFlag="0" :actionUrl="uploadUrl" :imageList.sync="info[item.fieldCode]" :limitW="500" :limitH="500" :maxImageLength="5" @uploadOnSuccess="uploadOnSuccess" @sortImg="sortImg" @deleteImage="deleteImage"></uploadImage> -->
</template>
<template v-else>
<div v-if="item.fieldType == 0 || item.fieldType == 1 || item.fieldType == 6" class="field-value color-606266">
......@@ -57,6 +58,7 @@
</div>
</template>
<script>
// import uploadImage from 'components/employeeRecord/uploadImage';
import { formatDate, deepClone } from '@/utils/index';
import { getRequest } from '@/api/api';
export default {
......@@ -83,6 +85,10 @@ export default {
required: true
}
},
/* eslint-disable */
components: {
// uploadImage
},
filters: {
formatDate
},
......@@ -98,6 +104,14 @@ export default {
res.file.url = res.res.result[0].qcloudImageUrl;
list.push(res.file);
},
// 删除图片 返回图片列表的索引 你可以根据这个索引去找对应图片的id
deleteImage(i) {
this.imageList.splice(i, 1);
},
// 排序图片
sortImg(val) {
this.imageList = val;
},
// 保存编辑
saveEdit() {
let that = this;
......
src/components/employeeRecord/uploadImage.vue 0 → 100644
<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">
<a class="item-img" :href="item.url">
<img :src="item.url" alt="上传图片" />
</a>
<!-- 预览和删除按钮 -->
<div class="upload-icon__btn">
<i class="el-icon-view" @click="previewImage(index)"></i>
<i class="el-icon-delete" @click="deleteImage(index)"></i>
</div>
</div>
</transition-group>
</draggable>
<!-- 上传进度条 -->
<div :class="['img-content', 'img-progress', imageList.length >= 6 ? 'm-t-8' : '']" v-if="!pass && progress !== 0">
<el-progress class="gic-img-progress" :width="102" :percentage="progress" :status="propStatus" style="line-height: 102px;"></el-progress>
</div>
<!-- 图片上传部分 -->
<div :class="['img-upload', imageList.length >= 6 ? 'm-t-8' : '']" v-if="imageList && imageList.length < maxImageLength">
<el-upload class="loader" accept="image/jpg,image/jpeg,image/png,image/gif" :action="uploadUrl()" list-type="picture-card" :on-change="uploadOnChange" :before-upload="beforeAvatarUpload" :on-success="uploadOnSuccess" :on-error="uploadOnError" :on-progress="uploadOnProgress">
<i class="el-icon-plus gic-upload-btn"></i>
</el-upload>
</div>
</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.url" />
</el-carousel-item>
</el-carousel>
</el-dialog>
</div>
</template>
<script>
/**
放大预览
删除
添加到循环里面
开始上传 上传失败 上传成功三个步骤
上传图片的进度条是固定的样式大小、如果我这边修改的话
会不会影响其他地方的样式
*/
import draggable from 'vuedraggable';
export default {
name: 'vue-office-upload-image',
props: {
projectName: {
type: String,
default: 'haoban-manage-web'
},
wxFlag: {
type: String,
default: '1'
},
imgRate: {
type: String
},
// 上传地址
actionUrl: {
type: String,
default: ''
},
// 图片限制 不能超过 超过隐藏上传按钮
maxImageLength: {
type: Number,
default: 5
},
limitW: {
type: Number
},
limitH: {
type: Number
},
imageList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
dragImageList: this.imageList, // 传递的图片数据
initialImg: 0, // 初始索引
progress: 0, // 上传进度
pass: null, // 是否上传成功
isEnlargeImage: false, // 放大图片
enlargeImage: '' // 放大的图片的地址
};
},
computed: {
propStatus() {
if (this.pass) {
return 'success';
} else if (this.pass === false) {
return 'exception';
} else {
return 'text';
}
}
},
/* eslint-disable */
beforeMount() {
// this.action = this.actionUrl;
},
methods: {
// 获取 action 的 url
uploadUrl() {
let that = this;
let host = window.location.origin;
let baseUrl;
let wxFlag;
wxFlag = !!that.wxFlag && that.wxFlag != ''? 'wxFlag='+that.wxFlag + '&': '';
if (host.indexOf('localhost') != '-1') {
baseUrl = 'http://www.gicdev.com';
}else {
baseUrl = host;
}
that.upUrl = baseUrl + that.actionUrl +'?'+ wxFlag+ 'requestProject=' + that.projectName;
return that.upUrl;
},
// 上传之前回调
beforeAvatarUpload(file) {
let that = this;
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/jpg';
const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// that.$message.error('上传图片只能是 JPG/JPEG 格式!');
// }
if (!isLt2M) {
that.$message.error('上传图片大小不能超过 2MB!');
}
return isLt2M && 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);
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);
})
},
// 上传成功
uploadOnSuccess(res, file) {
let that = this;
this.pass = true;
if (res.errorCode == 1) {
that.$message.success('上传成功');
that.$emit('uploadOnSuccess',{res:res,file:file}, that.imageList);
}else {
that.$message.error(res.message);
}
},
// 开始上传
uploadOnProgress(e, file) {
if (e && e.percent) {
this.progress = Math.floor(e.percent);
}
},
uploadOnChange(file) {
if (file.status === 'ready') {
this.pass = null;
this.progress = 0;
} else if (file.status === 'fail') {
this.$message.error('图片上传失败，请重试！');
}
},
/* eslint-disable */
uploadOnError() {
},
// 预览图片
previewImage(i) {
this.isEnlargeImage = true;
this.initialImg = i;
},
// 删除图片
deleteImage(i) {
this.$emit('deleteImage', i);
// this.imageList.splice(i, 1);
let newList = JSON.parse(JSON.stringify(this.imageList)).splice(i, 1);
that.$emit('update:imageList', newList);
},
// 关闭弹层
handleClose(done) {
done();
},
// move end
itemMoveEnd(evt) {
let that = this;
that.$emit('sortImg', that.dragImageList);
that.$emit('update:imageList', that.dragImageList);
}
},
watch: {
imageList: function(newData,oldData){
let that = this;
that.dragImageList = newData;
},
},
/* 接收数据 */
/* eslint-disable */
mounted() {
let that = this;
// that.dragImageList = that.imageList
},
components: {
draggable
},
};
</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 {
display: flex;
align-items: 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, .5);
transition: all .3s;
opacity: 0;
}
.gic-upload__img .img-content:hover::after{
opacity: 1;
}
.gic-upload__img .img-content:hover .upload-icon__btn{
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 .6s ease;
}
.slide-fade-leave-active {
transition: all .6s cubic-bezier(.55, 0, .1, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
opacity: 0;
}
</style>
src/views/contacts/storeInfo.vue
......@@ -367,7 +367,6 @@ export default {
},
async formatStoreInfo(obj) {
let that = this;
let arr = (obj.areaChainName || '').split('/');
// 将店铺地址信息拆分为省市区地址字段
that.areaOptions = {
......@@ -378,17 +377,14 @@ export default {
countryName: arr[2],
countyId: obj.countryId
};
/* that.imgs = !obj.imageUrl ? [] : obj.imageUrl.split(',');
that.imgs = !obj.imageUrl ? [] : obj.imageUrl.split(',');
let newImgs = [];
that.imgs.forEach(img => {
newImgs.push({ url: img });
});
that.imgs = newImgs; */
obj.imageUrls = !!obj.imageUrls ? obj.imageUrls : [];
if (!!obj.imageUrls.length) {
obj.imageUrls = obj.imageUrls.split(',');
}
// that.imgs = newImgs;
// obj.imageUrls = !!obj.imageUrl ? obj.imageUrl : [];
obj.imageUrls = newImgs;
obj.location = obj.longitude + ',' + obj.latitude;
that.storeInfo = obj;
that.changeTime();
......@@ -407,7 +403,7 @@ export default {
that.storeInfo.longitude = locationArr[0];
that.storeInfo.latitude = locationArr.length !== 2 ? '' : locationArr[1];
that.storeInfo.managerPhone = that.storeInfo.managerPhone;
that.storeInfo.areaChainName = that.areaChainName;
// that.storeInfo.areaChainName = that.areaChainName;
let params = that.storeInfo;
let imageUrls = [];
that.storeInfo.imageUrls.forEach(img => {
......
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