|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-dialog :title="brand.BrandID?'品牌修改':'添加品牌'" :visible.sync="outerVisible" :before-close="handleClose" class="add-brand" width="600px">
|
|
|
+ <el-dialog :title="brand.BrandID?'品牌修改':'添加品牌'" :visible.sync="outerVisible" class="add-brand" width="600px">
|
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="reset-form">
|
|
|
<el-form-item label="中文名称:" prop="BrandCname">
|
|
|
<el-input v-model="ruleForm.BrandCname" placeholder="请输入" />
|
|
@@ -9,9 +9,9 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="品牌LOGO:">
|
|
|
<div class="logo">
|
|
|
- <el-upload style="flex: 1" class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ <el-upload style="flex: 1" class="avatar-uploader" action="#" :http-request="uploadAndSubmit"
|
|
|
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
|
- <img v-if="ruleForm.BrandLogo" :src="ruleForm.BrandLogo" class="avatar">
|
|
|
+ <img v-if="ruleForm.BrandLogo" :src="`/image-service/common/image_get?systemId=dataPlatform&key=${ruleForm.BrandLogo}`" class="avatar">
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
<span class="imgTip">支持格式GIF、JPG、JPEG、PNG,文件80K以内,建议尺寸80PX*80PX</span>
|
|
@@ -41,6 +41,7 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { brandCreate, brandDelete, brandUpdate } from "@/api/brand"
|
|
|
+import { imageUpload } from "@/api/image-service"
|
|
|
export default {
|
|
|
name: "addBrand",
|
|
|
props: {
|
|
@@ -53,7 +54,6 @@ export default {
|
|
|
return {
|
|
|
outerVisible: false,
|
|
|
innerVisible: false,
|
|
|
- imageUrl: '',
|
|
|
ruleForm: {
|
|
|
BrandCname: '',
|
|
|
BrandName: '',
|
|
@@ -61,38 +61,103 @@ export default {
|
|
|
},
|
|
|
rules: {
|
|
|
BrandCname: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
|
|
|
-
|
|
|
- }
|
|
|
+ },
|
|
|
+ key: "",//上传图片的标识
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
handleAvatarSuccess(res, file) {
|
|
|
- this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ this.ruleForm.BrandLogo = this.key
|
|
|
+ // this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ },
|
|
|
+ uploadAndSubmit(item, key) {
|
|
|
+ let file = item.file;
|
|
|
+ // try sending
|
|
|
+ let reader = new FileReader();
|
|
|
+
|
|
|
+ let vm = this;
|
|
|
+
|
|
|
+ let fileType = file.name.split(".");
|
|
|
+ let type = fileType[fileType.length - 1];
|
|
|
+ let CreateTime = tools.formatDate(new Date(file.lastModified))
|
|
|
+
|
|
|
+ let uploadKey = file.uid
|
|
|
+ if (!!key) {
|
|
|
+ uploadKey = key
|
|
|
+ }
|
|
|
+
|
|
|
+ reader.onloadstart = function () {
|
|
|
+ // 这个事件在读取开始时触发
|
|
|
+ };
|
|
|
+ reader.onprogress = function (p) {
|
|
|
+ // 这个事件在读取进行中定时触发
|
|
|
+ };
|
|
|
+
|
|
|
+ reader.onload = function () {
|
|
|
+ // 这个事件在读取成功结束后触发
|
|
|
+ };
|
|
|
+ reader.onloadend = function () {
|
|
|
+ // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
+ if (reader.error) {
|
|
|
+ } else {
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ xhr.open(
|
|
|
+ "POST",
|
|
|
+ vm.imageUploadUrl + "&key=" + uploadKey + "." + type
|
|
|
+ );
|
|
|
+ xhr.send(reader.result);
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ vm.$emit("change", vm.imagesArr, vm.defined, vm.videoPicArr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
},
|
|
|
beforeAvatarUpload(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ const typeList = ['image/jpeg','image/png','image/gif']
|
|
|
+ const isType = typeList.some(item => {return item === file.type});
|
|
|
+ const isLt80K = file.size / 1024 <= 80;
|
|
|
+ //获取文件后缀名
|
|
|
+ let fileType = file.name.split('.')
|
|
|
+ let type = fileType[fileType.length -1]
|
|
|
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('上传头像图片只能是 JPG 格式!')
|
|
|
+ this.key = `${file.uid}.${type}`
|
|
|
+ this.$refs.imgUpload.action = `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${this.key}`
|
|
|
+
|
|
|
+ if (!isType) {
|
|
|
+ this.$message.error('上传头像图片格式不支持!')
|
|
|
}
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
|
+ if (!isLt80K) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 80K!')
|
|
|
}
|
|
|
- return isJPG && isLt2M;
|
|
|
+ return isType && isLt80K;
|
|
|
},
|
|
|
submitForm(formName) { //(添加/修改)
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
+ let params = {
|
|
|
+ Content: [{
|
|
|
+ BrandCname: this.ruleForm.BrandCname,
|
|
|
+ BrandName: this.ruleForm.BrandName,
|
|
|
+ BrandLogo: this.ruleForm.BrandLogo,
|
|
|
+ }]
|
|
|
+ }
|
|
|
if (this.brand.BrandID) { //修改品牌
|
|
|
+ params.Content[0].BrandID = this.brand.BrandID
|
|
|
brandUpdate(params, res => {
|
|
|
this.outerVisible = false
|
|
|
- this.$message.sucsee('保存成功!')
|
|
|
+ this.$emit("refresh")
|
|
|
+ this.$message.success('保存成功!')
|
|
|
})
|
|
|
} else { //添加品牌
|
|
|
brandCreate(params, res => {
|
|
|
this.outerVisible = false
|
|
|
- this.$message.sucsee('添加成功!')
|
|
|
+ this.$emit("refresh")
|
|
|
+ this.$message.success('添加成功!')
|
|
|
})
|
|
|
}
|
|
|
} else {
|
|
@@ -102,24 +167,23 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
handleClickDelete() { //删除品牌
|
|
|
- brandDelete({BrandID: this.BrandID}, res => {
|
|
|
+ brandDelete([{BrandID: this.brand.BrandID}], res => {
|
|
|
this.innerVisible = false
|
|
|
this.outerVisible = false
|
|
|
- this.$message.sucsee('删除成功!')
|
|
|
+ this.$emit("refresh")
|
|
|
+ this.$message.success('删除成功!')
|
|
|
})
|
|
|
},
|
|
|
- handleClose() { //关闭弹窗回调
|
|
|
- this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
|
|
|
- this.outerVisible = false
|
|
|
- },
|
|
|
},
|
|
|
watch: {
|
|
|
- 'brand.BrandID': {
|
|
|
+ outerVisible: {
|
|
|
handler(newName, oldName) {
|
|
|
- if (this.brand.BrandID) {
|
|
|
+ if (this.brand.BrandID && newName) {
|
|
|
this.ruleForm.BrandCname = this.brand.BrandCname
|
|
|
this.ruleForm.BrandName = this.brand.BrandName || ''
|
|
|
this.ruleForm.BrandLogo = this.brand.BrandLogo || ''
|
|
|
+ } else if (!newName) {
|
|
|
+ this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
|
|
|
}
|
|
|
},
|
|
|
immediate: true,
|