|
@@ -1,22 +1,17 @@
|
|
|
<template>
|
|
|
- <el-dialog :title="title" :visible.sync="outerVisible" class="add-brand" width="30%">
|
|
|
+ <el-dialog :title="brand.BrandID?'品牌修改':'添加品牌'" :visible.sync="outerVisible" :before-close="handleClose" class="add-brand" width="600px">
|
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="reset-form">
|
|
|
- <el-form-item label="中文名称:" prop="zhName">
|
|
|
- <el-input v-model="ruleForm.zhName" placeholder="请输入" />
|
|
|
+ <el-form-item label="中文名称:" prop="BrandCname">
|
|
|
+ <el-input v-model="ruleForm.BrandCname" placeholder="请输入" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="英文名称:">
|
|
|
- <el-input v-model="ruleForm.enName" placeholder="请输入"/>
|
|
|
+ <el-input v-model="ruleForm.BrandName" placeholder="请输入" />
|
|
|
</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/"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
+ <el-upload style="flex: 1" class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
|
+ <img v-if="ruleForm.BrandLogo" :src="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>
|
|
@@ -24,12 +19,13 @@
|
|
|
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <el-dialog
|
|
|
- width="20%"
|
|
|
- title="确定要删除该品牌吗?"
|
|
|
- :visible.sync="innerVisible"
|
|
|
- :show-close="false"
|
|
|
- class="child-dialog"
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button v-if="brand.BrandID" @click="innerVisible = true" type="text" style="padding-right: 10px;color: #646C73">删除品牌</el-button>
|
|
|
+ <el-button @click="outerVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')">{{brand.BrandID?'保 存':'添 加'}}</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog width="420px" title="确定要删除该品牌吗?" :visible.sync="innerVisible" :show-close="false" class="child-dialog"
|
|
|
append-to-body>
|
|
|
<div slot="title" class="header-title">
|
|
|
<span class="el-icon-info" style="font-size: 24px;color: #F54E45;margin-right: 10px"> </span>
|
|
@@ -38,125 +34,167 @@
|
|
|
</div>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="innerVisible = false">取 消</el-button>
|
|
|
- <el-button type="danger" @click="innerVisible = true">删除</el-button>
|
|
|
+ <el-button type="danger" @click="handleClickDelete">删除</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
-
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="innerVisible = true" type="text" style="padding-right: 10px;color: #646C73">删除品牌</el-button>
|
|
|
- <el-button @click="outerVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="outerVisible = true">添加</el-button>
|
|
|
- </div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: "addBrand",
|
|
|
- props: ['title'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- outerVisible: false,
|
|
|
- innerVisible: false,
|
|
|
- dialogImageUrl: '',
|
|
|
- dialogVisible: false,
|
|
|
- imageUrl: '',
|
|
|
- ruleForm: {
|
|
|
- zhName: '',
|
|
|
- enName: ''
|
|
|
- },
|
|
|
- rules: {
|
|
|
- zhName: [{required: true, message: '请输入中文名称', trigger: 'blur'}],
|
|
|
+import { brandCreate, brandDelete, brandUpdate } from "@/api/brand"
|
|
|
+export default {
|
|
|
+ name: "addBrand",
|
|
|
+ props: {
|
|
|
+ brand: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ outerVisible: false,
|
|
|
+ innerVisible: false,
|
|
|
+ imageUrl: '',
|
|
|
+ ruleForm: {
|
|
|
+ BrandCname: '',
|
|
|
+ BrandName: '',
|
|
|
+ BrandLogo: '',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ BrandCname: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
|
|
|
|
|
|
- }
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
- },
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传头像图片只能是 JPG 格式!')
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
|
+ }
|
|
|
+ return isJPG && isLt2M;
|
|
|
+ },
|
|
|
+ submitForm(formName) { //(添加/修改)
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.brand.BrandID) { //修改品牌
|
|
|
+ brandUpdate(params, res => {
|
|
|
+ this.outerVisible = false
|
|
|
+ this.$message.sucsee('保存成功!')
|
|
|
+ })
|
|
|
+ } else { //添加品牌
|
|
|
+ brandCreate(params, res => {
|
|
|
+ this.outerVisible = false
|
|
|
+ this.$message.sucsee('添加成功!')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
}
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClickDelete() { //删除品牌
|
|
|
+ brandDelete({BrandID: this.BrandID}, res => {
|
|
|
+ this.innerVisible = false
|
|
|
+ this.outerVisible = false
|
|
|
+ this.$message.sucsee('删除成功!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClose() { //关闭弹窗回调
|
|
|
+ this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
|
|
|
+ this.outerVisible = false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'brand.BrandID': {
|
|
|
+ handler(newName, oldName) {
|
|
|
+ if (this.brand.BrandID) {
|
|
|
+ this.ruleForm.BrandCname = this.brand.BrandCname
|
|
|
+ this.ruleForm.BrandName = this.brand.BrandName || ''
|
|
|
+ this.ruleForm.BrandLogo = this.brand.BrandLogo || ''
|
|
|
}
|
|
|
- return isJPG && isLt2M;
|
|
|
- }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .add-brand {
|
|
|
- /deep/ .el-dialog__header {
|
|
|
- border-bottom: 1px solid #E4E5E7;
|
|
|
- }
|
|
|
-.reset-form {
|
|
|
- width: 320px;
|
|
|
- margin: 0 auto;
|
|
|
+.add-brand {
|
|
|
+ /deep/ .el-dialog__header {
|
|
|
+ border-bottom: 1px solid #e4e5e7;
|
|
|
+ }
|
|
|
+ .reset-form {
|
|
|
+ width: 320px;
|
|
|
+ margin: 0 auto;
|
|
|
|
|
|
- .logo {
|
|
|
- display: flex;
|
|
|
- .imgTip{
|
|
|
- font-size: 12px;
|
|
|
- color:#C3C7CB;
|
|
|
- line-height:18px;
|
|
|
- margin-left: 8px;
|
|
|
- margin-bottom: 78px;
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ .imgTip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #c3c7cb;
|
|
|
+ line-height: 18px;
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-bottom: 78px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .child-dialog {
|
|
|
- /deep/ .el-dialog__body {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+.child-dialog {
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .header-title {
|
|
|
- .del-text {
|
|
|
- color: #1F2329;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+.header-title {
|
|
|
+ .del-text {
|
|
|
+ color: #1f2329;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
|
|
|
- .del-tip {
|
|
|
- margin-left: 39px;
|
|
|
- color: #646A73;
|
|
|
- }
|
|
|
+ .del-tip {
|
|
|
+ margin-left: 39px;
|
|
|
+ color: #646a73;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
- .avatar-uploader .el-upload {
|
|
|
- border: 1px dashed #d9d9d9;
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+.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 .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
|
|
|
- .avatar-uploader-icon {
|
|
|
- font-size: 28px;
|
|
|
- color: #8c939d;
|
|
|
- width: 112px;
|
|
|
- height: 112px;
|
|
|
- line-height: 112px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 112px;
|
|
|
+ height: 112px;
|
|
|
+ line-height: 112px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
|
|
|
- .avatar {
|
|
|
- width: 112px;
|
|
|
- height: 112px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
+.avatar {
|
|
|
+ width: 112px;
|
|
|
+ height: 112px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
</style>
|