<template> <div class="app-container"> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-form class="queryFormInline" :model="queryParams" ref="queryForm" :inline="true"> <el-row :span="24" type="flex" justify="space-between" align="middle"> <el-col :span="22"> <el-form-item label="品牌名称"> <el-input v-model="queryParams.brand_cn" placeholder="请输品牌名称" clearable size="small" /> </el-form-item> <el-form-item label="品牌经营类型:"> <el-select v-model="queryParams.brand_type" clearable size="small" placeholder="全部品牌类型" @change="typeChange"> <el-option v-for="item in brandTypeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item label="品牌状态:"> <el-select v-model="queryParams.status" clearable size="small" placeholder="全部状态" @change="statusChange"> <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查 询</el-button> </el-form-item> </el-col> <el-col :span="2"> <el-form-item style="float: right"> <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新 增</el-button> </el-form-item> </el-col> </el-row> </el-form> </div> <el-table v-loading="loading" :data="brandList" :height="tableHeight"> <!-- <el-table-column type="selection" width="45" align="center"/>--> <el-table-column label="序号" prop="id" align="center"></el-table-column> <el-table-column label="品牌名称" prop="brand_cn" align="center"></el-table-column> <el-table-column label="品牌经营类型" prop="brand_type" align="center"> <template slot-scope="scope"> {{ scope.row.brand_type === 1 ? '自有品牌' : '品牌厂商授权' }} </template> </el-table-column> <el-table-column label="品牌类型" prop="brand_range" align="center"> <template slot-scope="scope"> {{ scope.row.brand_range === 1 ? '国内' : '国外' }} </template> </el-table-column> <el-table-column label="品牌商标注册号" prop="brand_number" align="center"></el-table-column> <el-table-column label="品牌状态" prop="status" align="center"> <template slot-scope="scope"> {{ scope.row.status === 0 ? '未审核' : scope.row.status === 1 ? '已通过' : '已拒绝'}} </template> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button type="text" @click="handleDetails(scope.row)" :disabled="(scope.row.id === 1)">详情</el-button> </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" ></pagination> </el-card> <!-- 新增/修改/详情 --> <el-dialog :title="brandTitle" :visible.sync="isOpen" width="60%" class="brandInf-add"> <el-form :model="brandForm" :rules="brandRules" ref="brandForm" label-width="140px"> <el-row> <el-col :span="16" :offset="3"> <el-form-item label="经营品牌类型:" prop="brand_type"> <el-radio-group v-model="brandForm.brand_type" @change="chooseBrandType"> <el-radio :label="1">自有品牌</el-radio> <el-radio :label="2">品牌厂商授权</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16" :offset="3"> <el-form-item label="品牌中文名:" prop="brand_cn"> <el-input v-model="brandForm.brand_cn"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16" :offset="3"> <el-form-item label="品牌英文名:" prop="brand_en"> <el-input v-model="brandForm.brand_en" placeholder="请输入品牌英文名称"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16" :offset="3"> <el-form-item label="品牌商标注册号:" prop="brand_number"> <el-input v-model="brandForm.brand_number" placeholder=""></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="21" :offset="3"> <el-form-item label="品牌LOGO:" prop="brand_logo"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload class="uploadData" action="#" list-type="picture-card" :http-request="uploadLogoImgs" :limit="2" :on-exceed="limitTwo" :before-upload="UpImgSizeFiveKB" :on-preview="handlePreviewLogo" :on-remove="handleRemoveLogo" :file-list='brandImgFileList' > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="LogoVisible"> <img width="100%" :src="LogoImageUrl" alt=""> </el-dialog> </div> <div> <span class="tips-text"> <i class="el-icon-warning h-warning"></i> </span> </div> <div style="width:380px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">必须与商标图文一致。文件大小在500KB以内,支持png,jpg格式,最多可上传2张</span> </div> </div> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="21" :offset="3"> <el-form-item label="商标注册证书:" prop="brand_register_cert"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload class="uploadData" action="#" list-type="picture-card" :http-request="uploadCertImgs" :limit="2" :on-exceed="limitTwo" :before-upload="UpImgSizeTwoMb" :on-preview="handlePreviewCert" :on-remove="handleRemoveCert" :file-list='certImgFileList' > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="certVisible"> <img width="100%" :src="certImageUrl" alt=""> </el-dialog> </div> <div> <span class="tips-text"> <i class="el-icon-warning h-warning"></i> </span> </div> <div style="width:380px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">品牌方给予企业的授权书。文件大小在2MB以内,支持png,jpg格式</span> </div> </div> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16" :offset="3"> <el-form-item label="品牌类型:" prop="brand_range"> <el-radio-group v-model="brandForm.brand_range" @click="chooseBrandRange"> <el-radio :label="1">国内品牌</el-radio> <el-radio :label="2">国外品牌</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="21" :offset="3"> <el-form-item label="品牌方授权书:" prop="brand_auth" v-if="brandForm.brand_type === 2"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload class="uploadData" action="#" list-type="picture-card" :http-request="uploadFactoryImgs" :before-upload="UpImgSizeTwoMb" :on-preview="handlePreviewFactory" :on-remove="handleRemoveFactory" :file-list='factoryImgFileList' > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="factoryVisible"> <img width="100%" :src="factoryImageUrl" alt=""> </el-dialog> </div> <div> <span class="tips-text"> <i class="el-icon-warning h-warning"></i> </span> </div> <div style="width:380px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">品牌方给予企业的授权书。文件大小在2MB以内,支持png,jpg格式</span> </div> </div> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16" :offset="3"> <el-form-item label="授权有效期至:" prop="brand_auth_time" v-if="brandForm.brand_type === 2"> <el-date-picker type="date" placeholder="选择日期" v-model="validityConcreteTime" style="width: 300px;" @change="validityConcrete"></el-date-picker> <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;" @change="validityLongTerm">长期 </el-checkbox> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="21" :offset="3"> <el-form-item label="品牌经营授权:" prop="brand_business_auth"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload class="uploadData" action="#" :http-request="uploadShopImgs" list-type="picture-card" :before-upload="UpImgSizeTwoMb" :on-preview="handlePreviewShop" :on-remove="handleRemoveShop" :file-list="shopImgFileList" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="shopVisible"> <img width="100%" :src="shopImageUrl" alt=""> </el-dialog> </div> <div> <span class="tips-text"> <i class="el-icon-warning h-warning"></i> </span> </div> <div style="width:380px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">授权在云仓平台经营此品牌。文件大小在2MB以内,支持png,jpg格式</span> </div> </div> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16" :offset="3"> <el-form-item label=""> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <el-button :disabled="downTemplatehttp !== '' ? false: true" > <el-link :href="downTemplatehttp" :disabled="downTemplatehttp !== '' ? false: true" type="primary" :underline="false"><i class="el-icon-download"></i>下载模板</el-link> </el-button> <div> <span class="tips-text"> <i class="el-icon-warning h-warning"></i> </span> </div> <div style="width:380px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">请您点击下载授权书模板,打印并签字盖章,拍照上传</span> </div> </div> </el-form-item> </el-col> </el-row> <el-form-item class="btnCen"> <el-button type="" @click="handleCancel('brandForm')" style="margin-right: 30px">取 消</el-button> <el-button type="primary" @click="handleSave('brandForm')">提交审核</el-button> </el-form-item> </el-form> </el-dialog> </div> </template> <script> import {getBrandsInf, getDetails, addBrand, upBrand, upLoadImg} from '@/api/module/brand/brand' export default { name: "Brand", data() { let logoValidator = (rule, value, callback) => { if(this.brandImgFileList.length > 0) { callback(); }else if(this.brandImgFileList.length === 0) { callback(new Error("品牌logo图片至少上传一张")); } }; let certValidator = (rule, value, callback) => { if(this.certImgFileList.length > 0) { callback(); }else if(this.certImgFileList.length === 0) { callback(new Error("商标注册证书图片至少上传一张")); } }; let authValidator = (rule, value, callback) => { if(this.factoryImgFileList.length > 0) { callback(); }else if(this.factoryImgFileList.length === 0) { callback(new Error("品牌商标授权书图片至少上传一张")); } }; let authTimeValidator = (rule, value, callback) => { if(this.brandForm.brand_type === 2) { if (this.validityConcreteTime === null && this.validityLongTermVal === false) { callback(new Error("授权有效期具体时间和长期必须填写其中一个")); } else { callback(); } }else { callback(); } }; let authBusValidator = (rule, value, callback) => { if(this.shopImgFileList.length > 0) { callback(); }else if(this.shopImgFileList.length === 0) { callback(new Error("品牌logo图片至少上传一张")); } }; return { fullHeight: 0, tableHeight: 0, loading: false, isOpen: false, brandTitle: '', brandTypeOptions: [ {label: "自有品牌", value: 1}, {label: "品牌厂商授权", value: 2}, ], statusOptions: [ {label: '未审核', value: 0}, {label: '已通过', value: 1}, {label: '已拒绝', value: 2} ], total: 0, queryParams: { page: 1, limit: 10, brand_cn: null, brand_type: null, status: null }, LogoVisible: false, LogoImageUrl: '', factoryVisible: false, factoryImageUrl: '', shopVisible: false, shopImageUrl: '', certVisible: false, certImageUrl: '', brandImgFileList: [],// 品牌logo certImgFileList: [],// 商标注册证书 factoryImgFileList: [], // 品牌方授权书 shopImgFileList: [], // validityConcreteTime: null, validityLongTermVal: false, // 长期 brandList: [], brandForm: { id: 0, brand_type: '', // 品牌经营类型 brand_cn: '', // 中文名称 brand_en: '', // 英文名称 brand_logo: '', // 品牌logo图片 brand_register_cert: '', // 商标注册证书 brand_number: '', // 品牌商标注册号 brand_range: '', // 品牌类型 brand_auth_time: '', // 授权有效期 == 商标授权时间期限 brand_auth: '', // 商标授权 == 品牌授权 == factoryImgFileList brand_business_auth: '', // 商标经营授权 == 品牌经营授权 == shopImgFileList }, brandRules: { brand_type: [{ required: true, message: '品牌经营类型需要选择其一', trigger: 'blur' }], brand_cn: [{ required: true, message: '品牌中文名称不能为空', trigger: 'blur' }], brand_number: [{ required: true, message: '品牌商标注册号不能为空', trigger: 'blur' }], brand_logo: [{ required: true, message: '品牌logo图片至少上传一张',validator: logoValidator}], brand_register_cert: [{ required: true, message: '商标注册证书图片至少上传一张',validator: certValidator}], brand_range: [{ required: true, message: '品牌类型需要选择其一', trigger: 'blur' }], brand_auth: [{ required: true, message: '品牌授权书图片至少上传一张', validator: authValidator}], // 品牌授权 brand_auth_time: [{ required: true,trigger: 'change',validator:authTimeValidator }], brand_business_auth: [{ required: true, message: '品牌经营授权至少上传一张图片', validator: authBusValidator }], }, downTemplatehttp: '', shopTemplatehttp : 'http://img3.jxhh.com/shop/brand.doc', factoryTemplatehttp : 'http://img3.jxhh.com/shop/factory.doc', } }, created() { this.getList(); this.$nextTick(() => { this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight; }) }, watch: { fullHeight(val) { let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight this.tableHeight = val - formHeight - 100; } }, methods: { typeChange(val){ if(val === "") { this.queryParams.brand_type = null; } }, statusChange(val){ if(val === "") { this.queryParams.status = null; } }, isClick() { return false; }, getList() { this.loading = true; //let params = this.handleQueryParams(this.queryParams); getBrandsInf(this.queryParams).then(res => { if ( res && res.data && res.code === 1) { if(res.data) { this.brandList = res.data.data; this.total = res.data.count; }else { this.brandList = []; } }else { this.$message({ message: '数据出错啦!', type: 'error'}); } this.loading = false; }); }, // 品牌经营类型 改变触发 chooseBrandType() { this.downTemplatehttp = ''; // 因 单选不能取消,所以,只要点击触发,即可清除校验 this.$refs.brandForm.clearValidate('brand_type'); // 自有品牌授权模板下载路径 shopTemplatehttp // 品牌厂商授权模板下载路径 factoryTemplatehttp this.downTemplatehttp = (this.brandForm.brand_type === 1 ? this.shopTemplatehttp : this.factoryTemplatehttp); // // 品牌授权 图片处理 factoryImgFileList if(this.brandForm.brand_auth === '') { this.factoryImgFileList = []; } }, chooseBrandRange() { this.$refs.brandForm.clearValidate('brand_range'); }, limitTwo() { this.$message({message: '最多上传2张图片', type: 'warning'}); }, // 品牌商标图片 自定义上传 uploadLogoImgs(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data": this.Base64img}; upLoadImg(data).then((res) => { if (res && res.code === 1) { this.brandImgFileList.push({'url': res.data.image_url}); this.$message('上传成功'); this.$refs.brandForm.clearValidate('brand_logo'); //this.$refs.logoImg.clearValidate(); } }); }); }, // 上传图片格式和大小限制500 kb UpImgSizeFiveKB(file) { let isImgSize = (file.size / 1024 ) > 500; if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") { this.$message({ message: '上传图片格式只支持jpg/png格式', type: "warning" }); return false; } if(isImgSize) { this.$message({ message: '上传图片大小不能超过500 kb', type: "warning" }); return false; } }, // logo 预览 handlePreviewLogo(file) { this.LogoImageUrl = file.url; this.LogoVisible = true; }, // logo 删除 handleRemoveLogo(file) { for(let i = 0; i < this.brandImgFileList.length; i++) { if(file.uid === this.brandImgFileList[i].uid) { this.brandImgFileList.splice(i,1); } } }, // 商标注册证书 uploadCertImgs(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data": this.Base64img}; upLoadImg(data).then((res) => { if (res && res.code === 1) { this.certImgFileList.push({'url': res.data.image_url}); this.$message('上传成功'); this.$refs.brandForm.clearValidate('brand_register_cert'); //this.$refs.logoImg.clearValidate(); } }); }); }, // 预览 handlePreviewCert(file) { this.certImageUrl = file.url; this.certVisible = true; }, // 删除 handleRemoveCert(file) { for(let i = 0; i < this.certImgFileList.length; i++) { if(file.uid === this.certImgFileList[i].uid) { this.certImgFileList.splice(i,1); } } }, // 品牌方授权书 自定义上传 uploadFactoryImgs(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data":this.Base64img}; upLoadImg(data).then((res) => { if(res && res.code === 1){ this.factoryImgFileList.push({'url':res.data.image_url}); this.$refs.brandForm.clearValidate('brand_auth'); this.$message('上传成功'); } }); }); }, // 上传图片格式和大小限制 2mb UpImgSizeTwoMb(file) { if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") { this.$message({ message: '上传图片格式只支持jpg/png格式', type: "warning" }); return false; } let isImgSize = (file.size / 1024 /1024) > 2; if(isImgSize) { this.$message({ message: '上传图片大小不能超过2M', type: "warning" }); return false; } }, // 预览 handlePreviewFactory(file) { this.factoryImageUrl = file.url; this.factoryVisible = true; }, // 删除 handleRemoveFactory(file) { for(let i = 0; i < this.factoryImgFileList.length; i++) { if(file.uid === this.factoryImgFileList[i].uid) { this.factoryImgFileList.splice(i,1); } } }, // 品牌经营授权图片上传 uploadShopImgs(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data":this.Base64img}; upLoadImg(data).then((res) => { if(res && res.code === 1){ this.shopImgFileList.push({'url':res.data.image_url}); this.$message('上传成功'); this.$refs.brandForm.clearValidate('brand_business_auth'); } }); }); }, // 预览 handlePreviewShop(file) { this.shopImageUrl = file.url; this.shopVisible = true; }, // 删除 handleRemoveShop(file) { for(let i = 0; i < this.shopImgFileList.length; i++) { if(file.uid === this.shopImgFileList[i].uid) { this.shopImgFileList.splice(i,1); } } }, // 授权有效期 二选一效果 validityConcrete() { if (this.validityConcreteTime) { this.validityLongTermVal = false; } }, validityLongTerm() { if (this.validityLongTermVal) { this.validityConcreteTime = null; } }, // 新增,修改,详情 handleAdd() { if(this.total < 20 ) { this.isOpen = true; this.brandTitle = '新增品牌信息'; this.reset('brandForm'); this.brandForm.id = 0; this.brandForm.brand_auth = ''; this.brandForm.brand_auth_time = ''; }else { this.$message({ type: 'warning', message: '目前暂时只支持维护20个品牌数据!'}); } }, // 详情 handleDetails(row) { this.isOpen = true; this.brandTitle = '品牌信息详情'; const ids = row.id; getDetails(ids).then(res => { if(res.code && res.code === 1 && res.data) { this.brandForm = res.data; // 模板下载地址赋值 this.downTemplatehttp = (this.brandForm.brand_type === 1 ? this.shopTemplatehttp : this.factoryTemplatehttp); // 商标logo图片处理 let brandList = {}; let brandArr = []; if(this.brandForm.brand_logo.indexOf(",") > 0) { brandArr = this.brandForm.brand_logo.split(","); for(let a = 0; a < brandArr.length; a++){ brandList = {}; brandList.url = brandArr[a]; this.brandImgFileList.push(brandList); } }else { brandList.url = this.brandForm.brand_logo; this.brandImgFileList = []; this.brandImgFileList.push(brandList); } // 商标注册证书处理 brand_register_cert let certList = {}; let certArr = []; if(this.brandForm.brand_register_cert.indexOf(",") > 0) { certArr = this.brandForm.brand_register_cert.split(","); for(let a = 0; a < certArr.length; a++){ certList = {}; certList.url = certArr[a]; this.certImgFileList.push(certList); } }else { certList.url = this.brandForm.brand_register_cert; this.certImgFileList = []; this.certImgFileList.push(certList); } // 品牌授权 图片处理 factoryImgFileList let factoryList = {}; let factoryArr = []; if(this.brandForm.brand_auth.indexOf(",") > 0) { factoryArr = this.brandForm.brand_auth.split(","); for(let authIndex = 0; authIndex < factoryArr.length; authIndex++){ factoryList = {}; factoryList.url = factoryArr[authIndex]; this.factoryImgFileList.push(factoryList); } }else { factoryList.url = this.brandForm.brand_auth; this.factoryImgFileList = []; this.factoryImgFileList.push(factoryList); } // 品牌经营授权 图片处理 shopImgFileList let shopList = {}; let shopArr = []; if(this.brandForm.brand_business_auth.indexOf(",") > 0) { shopArr = this.brandForm.brand_business_auth.split(","); for(let busIndex = 0; busIndex < shopArr.length; busIndex++){ shopList = {}; shopList.url = shopArr[busIndex]; this.shopImgFileList.push(shopList); } }else { shopList.url = this.brandForm.brand_business_auth; this.shopImgFileList = []; this.shopImgFileList.push(shopList); } // 期限处理 if(this.brandForm.brand_auth_time === 0) { this.validityLongTermVal = true; }else { this.validityConcreteTime = this.toStandTime(this.brandForm.brand_auth_time); } }else if(res.code === 0) { if(res.msg) { this.$message({message: res.msg, type: 'error'}); }else { this.$message({message: '数据出错啦!', type: 'error'}); } } }); }, // 查询 handleQuery() { this.getList(); }, // 保存 handleSave(form) { this.$refs[form].validate(valid => { if(valid) { let addBrandForm = {}; let toArrBrandForm = []; if(this.validityLongTermVal) { this.brandForm.brand_auth_time = (this.validityLongTermVal - 0 - 1); }else if(this.validityLongTermVal === false && this.validityConcreteTime) { this.brandForm.brand_auth_time = new Date(this.validityConcreteTime).getTime() / 1000; }else { this.brandForm.brand_auth_time = ''; } // 品牌logo图片处理 if(this.brandImgFileList.length > 0) { for(let i = 0; i < this.brandImgFileList.length; i++) { if(i === 0) { this.brandForm.brand_logo = this.brandImgFileList[i].url; }else { this.brandForm.brand_logo += ',' + this.brandImgFileList[i].url; } } } // 商标注册证书图片处理 certImgFileList if(this.certImgFileList.length > 0) { for(let i = 0; i < this.certImgFileList.length; i++) { if(i === 0) { this.brandForm.brand_register_cert = this.certImgFileList[i].url; }else { this.brandForm.brand_register_cert += ',' + this.certImgFileList[i].url; } } } // 品牌授权图片处理 if(this.factoryImgFileList.length > 0) { for(let i = 0; i < this.factoryImgFileList.length; i++) { if(i === 0) { this.brandForm.brand_auth = this.factoryImgFileList[i].url; }else { this.brandForm.brand_auth += ',' + this.factoryImgFileList[i].url; } } } // 品牌经营授权 图片处理 if(this.shopImgFileList.length > 0) { for(let i = 0; i < this.shopImgFileList.length; i++) { if(i === 0) { this.brandForm.brand_business_auth = this.shopImgFileList[i].url; }else { this.brandForm.brand_business_auth += ',' + this.shopImgFileList[i].url; } } } // 数据处理完毕 toArrBrandForm.push(this.brandForm); addBrandForm.brands = toArrBrandForm; // 新增/修改 if(this.brandForm.id === 0) { addBrand(addBrandForm).then(res => { if(res.code && res.code === 1) { this.$message({ message: '新增成功', type: 'success'}); this.getList(); this.reset('brandForm'); this.isOpen = false; }else if( res.code === 0) { if(res.msg) { this.$message({ message: res.msg, type: 'error'}); }else { this.$message({ message: '新增失败', type: 'error'}); } } }); // 修改 }else { this.$confirm('是否确认修改此数据项?', '提示:', { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' }).then(() => { this.edit(toArrBrandForm); }).catch(() => { this.isOpen = false; }); } } }) }, // 修改 edit(param) { upBrand(param).then(res => { if(res.code === 1) { this.$message({ message: '修改成功', type: 'success'}); this.getList(); }else if( res.code === 0 ) { if(res.msg) { this.$message({ message: res.msg, type: 'error' }); }else { this.$message({ message: '数据出错啦!', type: 'error' }); } } this.reset('brandForm'); this.isOpen = false; }); }, // 取消 handleCancel(form) { this.reset(form); this.isOpen = false; }, // -----------通用 方法---------- // 搜索参数处理 handleQueryParams(parmas) { let newParmas = {}; // 对象深拷贝 newParmas = JSON.parse(JSON.stringify(parmas)); for(let key in newParmas){ if(key) { if(newParmas[key] !== 0 && newParmas[key] !== '') { if(!newParmas[key]) { newParmas[key] = null; } } } } return newParmas; }, // 究极清空 reset(form){ if(this.$refs[form]) { this.$refs[form].resetFields(); }else { this.$nextTick(() => { this.$refs[form].resetFields(); }); } // 取消按钮,图片清空 this.brandImgFileList= []; this.certImgFileList= []; this.factoryImgFileList= []; this.shopImgFileList= []; }, // 图片转换为base64位 getBase64(file) { return new Promise(function(resolve, reject) { let 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); }; }); }, // 时间戳转换为 标准时间格式 toStandTime(val) { let date = new Date(val * 1000) let Y = date.getFullYear() + '-' let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-' const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ' const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':' const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()) return Y + M + D + h + m + s; }, } } </script> <style lang="scss" type="text/stylus" scoped> .brandInf-add { /deep/.el-dialog { height: 80%; overflow : hidden; } /deep/.el-dialog__body{ height: calc(100% - 60px); overflow-x: hidden; overflow-y: scroll; } } .btnCen { /deep/.el-form-item__content { margin-left: 0!important; text-align : center; margin-top: 30px; } } // 上传图片样式重置 start .uploadData { display: inline-block; /deep/ .el-upload--picture-card { width: 100px; height: 100px; } /deep/ .el-upload { width: 100px; height: 100px; line-height: 100px; } /deep/ .el-upload-list--picture-card .el-upload-list__item { width: 100px; height: 100px; line-height: 100px; } /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail { width: 100px; height: 100px; line-height: 100px; } /deep/ .avatar { width: 100px; height: 100px; } } // 上传图片样式 重置 end // 提示语 样式 start .tips-text { font-size: 14px; color: #C9C9C9; word-break: break-all; } .h-warning:before { color: #e3c300; } // 提示语样式 end </style>