|
@@ -2,17 +2,19 @@
|
|
|
<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.trim="ruleForm.BrandCname" placeholder="请输入" />
|
|
|
+ <el-input v-model.trim="ruleForm.BrandCname" placeholder="请输入"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="英文名称:">
|
|
|
- <el-input v-model.trim="ruleForm.BrandName" placeholder="请输入" />
|
|
|
+ <el-form-item label="英文名称:" prop="BrandName">
|
|
|
+ <el-input v-model.trim="ruleForm.BrandName" placeholder="请输入"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="品牌LOGO:">
|
|
|
<div class="logo">
|
|
|
<el-upload style="flex: 1;" class="avatar-uploader" action="#" :http-request="uploadAndSubmit"
|
|
|
- :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
<i v-if="ruleForm.BrandLogo" class="el-icon-error delete-image" @click.stop="handleClickDelImg"></i>
|
|
|
- <img v-if="ruleForm.BrandLogo" :src="`/image-service/common/image_get?systemId=dataPlatform&key=${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,104 +43,120 @@
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { brandCreate, brandDelete, brandUpdate } from "@/api/brand"
|
|
|
-export default {
|
|
|
- name: "addBrand",
|
|
|
- props: {
|
|
|
- brand: {
|
|
|
- type: Object,
|
|
|
- default: {}
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- outerVisible: false,
|
|
|
- innerVisible: false,
|
|
|
- ruleForm: {
|
|
|
- BrandCname: '',
|
|
|
- BrandName: '',
|
|
|
- BrandLogo: '',
|
|
|
- },
|
|
|
- rules: {
|
|
|
- BrandCname: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
|
|
|
- },
|
|
|
- key: "",
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- uploadAndSubmit(item) {// 上传图片
|
|
|
- let file = item.file
|
|
|
- let _this = this
|
|
|
- //获取文件后缀名
|
|
|
- let fileType = file.name.split('.')
|
|
|
- let type = fileType[fileType.length -1]
|
|
|
- this.key = `${file.uid}.${type}`
|
|
|
+ import {brandCreate, brandDelete, brandUpdate} from "@/api/brand"
|
|
|
|
|
|
- let reader = new FileReader();
|
|
|
- reader.onloadend = function () {
|
|
|
- // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
- if (reader.error) {
|
|
|
+ export default {
|
|
|
+ name: "addBrand",
|
|
|
+ props: {
|
|
|
+ brand: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ let checkEn = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback()
|
|
|
} else {
|
|
|
- var xhr = new XMLHttpRequest();
|
|
|
- xhr.open(
|
|
|
- "POST",
|
|
|
- `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${_this.key}`
|
|
|
- );
|
|
|
- xhr.send(reader.result);
|
|
|
- xhr.onreadystatechange = function () {
|
|
|
- if (xhr.readyState == 4) {
|
|
|
- if (xhr.status == 200) {
|
|
|
- _this.ruleForm.BrandLogo = _this.key
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
+ if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
|
|
|
+ callback(new Error('请输入英文字符'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
- reader.readAsArrayBuffer(file);
|
|
|
- },
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const typeList = ['image/jpeg','image/png','image/gif']
|
|
|
- const isType = typeList.some(item => {return item === file.type});
|
|
|
- const isLt80K = file.size / 1024 <= 80;
|
|
|
- if (!isType) {
|
|
|
- this.$message.error('上传头像图片格式不支持!')
|
|
|
- return false
|
|
|
- }
|
|
|
- if (!isLt80K) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 80K!')
|
|
|
- return false
|
|
|
+ return {
|
|
|
+ outerVisible: false,
|
|
|
+ innerVisible: false,
|
|
|
+ ruleForm: {
|
|
|
+ BrandCname: '',
|
|
|
+ BrandName: '',
|
|
|
+ BrandLogo: '',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ BrandCname: [{required: true, message: '请输入中文名称', trigger: 'blur'}],
|
|
|
+ BrandName: [{validator: checkEn, trigger: 'blur'}],
|
|
|
+ },
|
|
|
+ key: "",
|
|
|
}
|
|
|
- return isType && isLt80K;
|
|
|
},
|
|
|
- handleClickDelImg() {
|
|
|
- this.ruleForm.BrandLogo = ""
|
|
|
- },
|
|
|
- submitForm(formName) { //(添加/修改)
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- let params = {
|
|
|
- Content: [{
|
|
|
- BrandCname: this.ruleForm.BrandCname,
|
|
|
- BrandName: this.ruleForm.BrandName,
|
|
|
- BrandLogo: this.ruleForm.BrandLogo,
|
|
|
- }]
|
|
|
+ methods: {
|
|
|
+ uploadAndSubmit(item) {// 上传图片
|
|
|
+ let file = item.file
|
|
|
+ let _this = this
|
|
|
+ //获取文件后缀名
|
|
|
+ let fileType = file.name.split('.')
|
|
|
+ let type = fileType[fileType.length - 1]
|
|
|
+ this.key = `${file.uid}.${type}`
|
|
|
+
|
|
|
+ let reader = new FileReader();
|
|
|
+ reader.onloadend = function () {
|
|
|
+ // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
+ if (reader.error) {
|
|
|
+ } else {
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ xhr.open(
|
|
|
+ "POST",
|
|
|
+ `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${_this.key}`
|
|
|
+ );
|
|
|
+ xhr.send(reader.result);
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ _this.ruleForm.BrandLogo = _this.key
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
}
|
|
|
- if (this.brand.BrandID) { //修改品牌
|
|
|
- params.Content[0].BrandID = this.brand.BrandID
|
|
|
- brandUpdate(params, res => {
|
|
|
- this.outerVisible = false
|
|
|
- this.$emit("refresh")
|
|
|
- this.$message.success('保存成功!')
|
|
|
- })
|
|
|
- } else { //添加品牌
|
|
|
- brandCreate(params, res => {
|
|
|
- this.outerVisible = false
|
|
|
- this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
|
|
|
- this.$emit("refresh",res.EntityList)
|
|
|
- this.$message.success('添加成功!')
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const typeList = ['image/jpeg', 'image/png', 'image/gif']
|
|
|
+ const isType = typeList.some(item => {
|
|
|
+ return item === file.type
|
|
|
+ });
|
|
|
+ const isLt80K = file.size / 1024 <= 80;
|
|
|
+ if (!isType) {
|
|
|
+ this.$message.error('上传头像图片格式不支持!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!isLt80K) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 80K!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return isType && isLt80K;
|
|
|
+ },
|
|
|
+ handleClickDelImg() {
|
|
|
+ this.ruleForm.BrandLogo = ""
|
|
|
+ },
|
|
|
+ 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.$emit("refresh")
|
|
|
+ this.$message.success('保存成功!')
|
|
|
+ })
|
|
|
+ } else { //添加品牌
|
|
|
+ brandCreate(params, res => {
|
|
|
+ this.outerVisible = false
|
|
|
+ this.ruleForm = {BrandCname: '', BrandName: '', BrandLogo: ''}
|
|
|
+ this.$emit("refresh", res.EntityList)
|
|
|
+ this.$message.success('添加成功!')
|
|
|
})
|
|
|
}
|
|
|
} else {
|
|
|
+
|
|
|
console.log('error submit!!')
|
|
|
return false
|
|
|
}
|