|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
|
|
|
- <el-menu-item index="1"><router-link to="/goods/category">商品分类</router-link></el-menu-item>
|
|
|
+ <el-menu-item index="1" @click="backToList">商品分类</el-menu-item>
|
|
|
<el-menu-item index="2">添加分类</el-menu-item>
|
|
|
</el-menu>
|
|
|
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width:400px; margin:30px 0 0 50px;">
|
|
@@ -15,13 +15,10 @@
|
|
|
<div class="form-el-upload">
|
|
|
<el-upload
|
|
|
class="avatar-uploader"
|
|
|
- accept="image/jpeg,image/gif,image/png"
|
|
|
- action="https://www-b.caimei365.com/register/imageUpload.action"
|
|
|
+ :action="action"
|
|
|
:show-file-list="false"
|
|
|
:on-success="handleAvatarSuccess"
|
|
|
:before-upload="beforeAvatarUpload"
|
|
|
- :multiple="false"
|
|
|
- :limit="1"
|
|
|
>
|
|
|
<img v-if="temp.classifyImage" :src="temp.classifyImage" class="avatar">
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
@@ -53,10 +50,11 @@
|
|
|
|
|
|
<script>
|
|
|
import { saveClassify } from '@/api/goods-classify'
|
|
|
+import { uploadFile, getBase64 } from '@/api/other'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- msg: '编辑分类',
|
|
|
+ msg: '添加分类',
|
|
|
activeIndex: '2',
|
|
|
rules: {
|
|
|
classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
|
@@ -67,7 +65,7 @@ export default {
|
|
|
},
|
|
|
temp: {
|
|
|
id: '',
|
|
|
- organizeID: this.organizeID,
|
|
|
+ organizeID: this.$store.getters.organizeID,
|
|
|
classifyName: '',
|
|
|
classifyImage: '',
|
|
|
sort: '',
|
|
@@ -82,6 +80,9 @@ export default {
|
|
|
computed: {
|
|
|
classifyId: function() {
|
|
|
return window.location.href.split('/').reverse()[0]
|
|
|
+ },
|
|
|
+ organizeID() {
|
|
|
+ return this.$store.getters.organizeID
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -99,39 +100,40 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 上传图标事件
|
|
|
handleAvatarSuccess(res, file) {
|
|
|
- this.getBase64(file.raw).then(res => {
|
|
|
- console.log(res)
|
|
|
+ getBase64(file.raw).then(res => {
|
|
|
+ uploadFile({ imgStr: res }).then(response => {
|
|
|
+ console.log(response)
|
|
|
+ if (response.code === '1') {
|
|
|
+ this.temp.classifyImage = response.data
|
|
|
+ } else {
|
|
|
+ this.$message.error('上传图片失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
- const fileName = file.name
|
|
|
- const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
|
|
|
- if (regex.test(fileName.toLowerCase())) {
|
|
|
- this.form.imageUrl = URL.createObjectURL(file.raw)
|
|
|
- } else {
|
|
|
- this.$message.error('请选择图片文件')
|
|
|
- }
|
|
|
},
|
|
|
+ // 对上传图片的大小、格式进行限制
|
|
|
beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg'
|
|
|
+ const isJPG2 = file.type === 'image/jpg'
|
|
|
+ const isPNG = file.type === 'image/png'
|
|
|
const isLt5M = file.size / 1024 / 1024 < 5
|
|
|
+ if (!isJPG && !isJPG2 && !isPNG) {
|
|
|
+ this.$message.error('只支持jpg或png格式图片')
|
|
|
+ }
|
|
|
if (!isLt5M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 5MB!')
|
|
|
+ this.$message.error('请上传5MB以内的图片!')
|
|
|
}
|
|
|
- return isLt5M
|
|
|
+ return (isJPG || isJPG2 || isPNG) && isLt5M
|
|
|
},
|
|
|
- getBase64(file) {
|
|
|
- return new Promise(function(resolve, reject) {
|
|
|
- const reader = new FileReader()
|
|
|
- let imgResult = ''
|
|
|
- reader.readAsDataURL(file)
|
|
|
- reader.onload = function() {
|
|
|
- imgResult = reader.result
|
|
|
- }
|
|
|
- reader.onerror = function(error) {
|
|
|
- reject(error)
|
|
|
- }
|
|
|
- reader.onloadend = function() {
|
|
|
- resolve(imgResult)
|
|
|
- }
|
|
|
+ backToList() {
|
|
|
+ this.$store.dispatch('tagsView/delView', this.$route).then(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/goods/category'
|
|
|
+ })
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
}
|