Oss对象存储,以及品牌增删改查
parent
7456f75612
commit
29f7d2bb11
|
|
@ -0,0 +1,24 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function insertBrand(brandInfo) {
|
||||
return request({
|
||||
url: '/product/brandInfo/insertBrand',
|
||||
method: 'post',
|
||||
data: brandInfo
|
||||
})
|
||||
}
|
||||
|
||||
export function getBrandList(likeName) {
|
||||
return request({
|
||||
url: '/product/brandInfo/getBrandList?likeName='+likeName,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteBrandInfo(brandId) {
|
||||
return request({
|
||||
url: '/product/brandInfo/deleteBrandInfo',
|
||||
method: 'get',
|
||||
brandId
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<el-table
|
||||
:data="brandList"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
label="品牌名称"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="品牌logo"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.logo" alt="图片损坏">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="简单描述"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.introduction }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建人"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.createBy }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建日期"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-button type="primary" size="mini" @click="isInsertBrandOpen = true">添加品牌</el-button>
|
||||
<el-dialog title="品牌信息" :visible.sync="isInsertBrandOpen">
|
||||
<el-form ref="form" :model="insertBrandReg" label-width="80px">
|
||||
<el-form-item label="品牌名称">
|
||||
<el-input v-model="insertBrandReg.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌logo">
|
||||
<upload-pic ref="uploadPic" @handle-image-url="handleImageUrl"></upload-pic>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="remark">
|
||||
<el-input v-model="insertBrandReg.introduction" placeholder="请输入内容" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isInsertBrandOpen = false">取 消</el-button>
|
||||
<el-button type="primary" @click="insertBrandInfo">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
import UploadPic from "@/views/product/upload/uploadPic.vue";
|
||||
import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
|
||||
export default {
|
||||
name: "brand",
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
components: {
|
||||
UploadPic,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
imageUrl: "",
|
||||
insertBrandReg:{},
|
||||
isInsertBrandOpen: false,
|
||||
brandList: [],
|
||||
brandName: ""
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
handleEdit(index, row) {
|
||||
this.isInsertBrandOpen = true
|
||||
this.insertBrandReg = row
|
||||
console.log(index, row);
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
deleteBrandInfo(row.id).then(
|
||||
res =>{
|
||||
this.$message.success(res.msg)
|
||||
this.getBrandList()
|
||||
}
|
||||
)
|
||||
console.log(index, row);
|
||||
},
|
||||
getBrandList() {
|
||||
getBrandList(this.brandName).then(
|
||||
res =>{
|
||||
this.brandList = res.data
|
||||
}
|
||||
)
|
||||
},
|
||||
insertBrandInfo() {
|
||||
insertBrand(this.insertBrandReg).then(
|
||||
res => {
|
||||
console.log("添加品牌的结果是:",res)
|
||||
this.$message.success(res.msg)
|
||||
this.insertBrandReg = {}
|
||||
this.imageUrl = ""
|
||||
this.isInsertBrandOpen = false
|
||||
this.getBrandList()
|
||||
}
|
||||
)
|
||||
},
|
||||
handleImageUrl() {
|
||||
console.log("六六六")
|
||||
const imageUrl = this.$refs.uploadPic.imageUrl;
|
||||
this.insertBrandReg.logo = imageUrl
|
||||
console.log("获取到的图片地址：", imageUrl);
|
||||
},
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.getBrandList()
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
style="width: auto; height: auto"
|
||||
class="avatar-uploader"
|
||||
action="http://localhost:9209/upload/uploadPic"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
export default {
|
||||
name: "uploadPic",
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
imageUrl: ""
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res,file)
|
||||
|
||||
this.imageUrl =res.data
|
||||
this.$emit('handle-image-url', this.imageUrl);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 10;
|
||||
|
||||
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传头像图片大小不能超过 10MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
}
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue