|
|
@@ -1,285 +1,123 @@
|
|
|
<template>
|
|
|
- <div v-loading="isLoading" class="page-form-container">
|
|
|
- <el-form ref="submitFormRef" :model="submitForm" :rules="formDataRules" label-width="120px" class="addForm">
|
|
|
+ <div class="page-form-container">
|
|
|
+ <el-form ref="submitForm" :model="formData" :rules="rules" label-width="140px">
|
|
|
+ <el-form-item label="供应商名称:" prop="shopName">
|
|
|
+ <el-input v-model="formData.shopName" placeholder="请输入供应商名称" maxlength="50" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="供应商类型:" prop="shopType">
|
|
|
- <el-select
|
|
|
- v-model="submitForm.shopType"
|
|
|
- placeholder="请选择供应商类型"
|
|
|
- style="width: 100%"
|
|
|
- :disabled="editType === 'edit'"
|
|
|
- @change="handleTypeChange"
|
|
|
- >
|
|
|
+ <el-select v-model="formData.shopType" placeholder="请选择供应商类型">
|
|
|
<el-option label="品牌方" :value="1" />
|
|
|
<el-option label="代理商" :value="2" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
- <!-- 供应商名称 -->
|
|
|
- <el-form-item v-if="submitForm.shopType === 2" label="供应商名称:" prop="shopName">
|
|
|
- <el-input
|
|
|
- v-model="submitForm.shopName"
|
|
|
- placeholder="请输入供应商名称"
|
|
|
- maxlength="50"
|
|
|
- show-word-limit
|
|
|
- :disabled="editType === 'edit'"
|
|
|
- />
|
|
|
+ <el-form-item label="关联采美供应商:">
|
|
|
+ <el-select v-model="formData.shopType" placeholder="请选择需要关联的供应商" clearable>
|
|
|
+ <el-option label="品牌方" :value="1" />
|
|
|
+ <el-option label="代理商" :value="2" />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
- <template v-if="submitForm.shopType === 1">
|
|
|
- <el-form-item clearable label="供应商名称:" prop="brandId">
|
|
|
- <el-select
|
|
|
- v-if="editType === 'add'"
|
|
|
- v-model="submitForm.brandId"
|
|
|
- placeholder="请选择品牌"
|
|
|
- style="width: 100%"
|
|
|
- filterable
|
|
|
- @change="handleBrandChange"
|
|
|
- >
|
|
|
- <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
+ <el-form-item label="手机号:" prop="mobile">
|
|
|
+ <div class="flex">
|
|
|
<el-input
|
|
|
- v-else
|
|
|
- v-model="submitForm.shopName"
|
|
|
- placeholder="请输入供应商名称"
|
|
|
- maxlength="50"
|
|
|
+ v-model="formData.mobile"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ maxlength="11"
|
|
|
show-word-limit
|
|
|
- :disabled="editType === 'edit'"
|
|
|
+ @input="onMobileInput"
|
|
|
/>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 制造商 -->
|
|
|
- <el-form-item label="制造商:">
|
|
|
- <el-input v-model="submitForm.manufacturer" placeholder="请输入制造商名称" maxlength="50" show-word-limit />
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
- <!-- 供应商名称END -->
|
|
|
-
|
|
|
- <el-form-item label="手机号:" prop="mobile">
|
|
|
- <el-input
|
|
|
- v-model="submitForm.mobile"
|
|
|
- placeholder="请输入手机号"
|
|
|
- maxlength="11"
|
|
|
- show-word-limit
|
|
|
- @input="handleMobileInput"
|
|
|
- />
|
|
|
+ <div class="form-label-tip">（提示：该手机号为登录账号）</div>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="联系人:" prop="linkMan">
|
|
|
- <el-input v-model="submitForm.linkMan" placeholder="请输入联系人" />
|
|
|
+ <el-input v-model="formData.linkMan" placeholder="请输入联系人" maxlength="50" show-word-limit />
|
|
|
</el-form-item>
|
|
|
-
|
|
|
- <!-- 代理商logo -->
|
|
|
- <transition name="fade">
|
|
|
- <el-form-item v-if="submitForm.shopType === 2" label="代理商logo:" prop="logo">
|
|
|
- <el-input v-show="false" v-model="submitForm.logo" />
|
|
|
- <upload-image
|
|
|
- :limit="1"
|
|
|
- tip="建议尺寸：200px * 200px"
|
|
|
- :image-list="logoList"
|
|
|
- @success="uploadLogoImageSuccess"
|
|
|
- @remove="handleLogoImageRemove"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </transition>
|
|
|
- <transition name="fade">
|
|
|
- <el-form-item v-if="submitForm.shopType === 2" label="代理品牌:" prop="shopInfo" class="brand-list">
|
|
|
- <template v-if="supplierBrands !== []">
|
|
|
- <el-tag
|
|
|
- v-for="(brand, index) in supplierBrands"
|
|
|
- :key="index"
|
|
|
- closable
|
|
|
- type="success"
|
|
|
- @close="handleRemoveBrand(brand)"
|
|
|
- @click="handleEditBrand(brand)"
|
|
|
- >{{ brand.brandName }}</el-tag>
|
|
|
- </template>
|
|
|
- <el-tag type="primary" @click="handleAddBrand">添加品牌<span class="el-icon-plus" /></el-tag>
|
|
|
- <el-input v-show="false" v-model="submitForm.shopInfo" />
|
|
|
- </el-form-item>
|
|
|
- </transition>
|
|
|
-
|
|
|
- <template v-if="submitForm.shopType === 1">
|
|
|
- <el-form-item label="产地:" prop="countryId">
|
|
|
- <el-select v-model="submitForm.countryId" placeholder="产地" style="width: 100%" filterable>
|
|
|
- <el-option
|
|
|
- v-for="item in countryList"
|
|
|
- :key="item.countryId"
|
|
|
- :label="item.countryName"
|
|
|
- :value="item.countryId"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
|
|
|
- <upload-image
|
|
|
- tip="建议尺寸：200px * 200px"
|
|
|
- :image-list="brandAuthLogoList"
|
|
|
- @success="uploadBrandAuthSuccess"
|
|
|
- @remove="handleRemoveBrandAuthLogo"
|
|
|
- />
|
|
|
- <el-input v-show="false" v-model="submitForm.brandAuthLogo" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="官网认证链接:">
|
|
|
- <el-input v-model="submitForm.securityLink" placeholder="请输入官网认证链接" />
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 公众号信息 -->
|
|
|
- <el-form-item label="微信公众号:">
|
|
|
- <el-select v-model="submitForm.wxAccountType" placeholder="请选择微信公众号类型" style="width: 100%">
|
|
|
- <el-option label="请选择" :value="0" />
|
|
|
- <el-option label="服务号" :value="2" />
|
|
|
+ <el-form-item label="供应商logo:" prop="logo">
|
|
|
+ <upload-image
|
|
|
+ tip="建议尺寸：200px * 200px"
|
|
|
+ :image-list="logoImageList"
|
|
|
+ @success="onUploadLogoSuccess"
|
|
|
+ @remove="onRemoveLogoImage"
|
|
|
+ />
|
|
|
+ <el-input v-show="false" v-model="formData.logo" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="旗下品牌:" prop="brandList">
|
|
|
+ <template v-for="(item, index) in formData.brandList">
|
|
|
+ <el-tag
|
|
|
+ :key="index"
|
|
|
+ effect="dark"
|
|
|
+ closable
|
|
|
+ type="success"
|
|
|
+ @close="onRemoveBrand(index)"
|
|
|
+ @click="onEditBrand('edit', item, index)"
|
|
|
+ >
|
|
|
+ <span>{{ item.brandName }}</span>
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ <el-tag type="primary" effect="dark" @click="onEditBrand('add')">添加品牌<span class="el-icon-plus" /></el-tag>
|
|
|
+ <el-checkbox-group v-show="false" v-model="formData.brandList" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="微信公众号:" prop="wxAccountType">
|
|
|
+ <el-select v-model="formData.wxAccountType" placeholder="请选择微信公众号类型" clearable>
|
|
|
<el-option label="订阅号" :value="1" />
|
|
|
+ <el-option label="服务号" :value="2" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
- <transition-group name="fade">
|
|
|
- <template v-if="submitForm.wxAccountType !== 0">
|
|
|
- <el-form-item key="appID" label="appID:">
|
|
|
- <el-input v-model="submitForm.appId" placeholder="微信公众号appID" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="submitForm.wxAccountType === 2" key="appSecret" label="appSecret:">
|
|
|
- <el-input v-model="submitForm.appSecret" placeholder="微信公众号appsecret" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item key="qrCodeImage" label="公众号二维码:" prop="qrCodeImage">
|
|
|
- <upload-image
|
|
|
- tip="建议尺寸：200px * 200px"
|
|
|
- :image-list="qrCodeImageList"
|
|
|
- @success="uploadQrCodeImageSuccess"
|
|
|
- @remove="handleRemoveQrCodeImage"
|
|
|
- />
|
|
|
- <el-input v-show="false" v-model="submitForm.qrCodeImage" />
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
- </transition-group>
|
|
|
-
|
|
|
- <!-- 公众号信息END -->
|
|
|
- <el-form-item label="供应商状态:">
|
|
|
- <el-select v-model="submitForm.shopStatus" placeholder="请选择供应商状态" style="width: 100%">
|
|
|
+ <template v-if="formData.wxAccountType === 2">
|
|
|
+ <el-form-item label="appID:" prop="appId">
|
|
|
+ <el-input v-model="formData.appId" placeholder="请输入服务号appId" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="appSecret:" prop="appSecret">
|
|
|
+ <el-input v-model="formData.appSecret" placeholder="请输入服务号appSecret" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item label="供应商状态:" prop="shopStatus">
|
|
|
+ <el-select v-model="formData.shopStatus" placeholder="请选择供应商状态">
|
|
|
<el-option label="启用" :value="1" />
|
|
|
<el-option label="禁用" :value="0" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+
|
|
|
<div class="control-box">
|
|
|
- <el-button type="primary" @click="submit">保存</el-button>
|
|
|
- <el-button type="warning" @click="navigateBack()">返回</el-button>
|
|
|
+ <el-button type="warning" @click="navigateBack">返回</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit">提交</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 供应商添加品牌的对话框 -->
|
|
|
- <el-dialog :title="editBrandText" :visible.sync="dialogAddBrand" width="width" @close="handleDialogAddBrandClosed">
|
|
|
- <el-form ref="subFormRef" :model="subForm" label-width="120px" :rules="formDataRules">
|
|
|
- <el-form-item label="选择品牌:" prop="brandId">
|
|
|
- <el-select
|
|
|
- v-model="subForm.brandId"
|
|
|
- placeholder="请选择品牌"
|
|
|
- style="width: 100%"
|
|
|
- filterable
|
|
|
- @change="handleBrandChange"
|
|
|
- >
|
|
|
- <el-option v-for="item in otherBrandList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="产地:" prop="countryId">
|
|
|
- <el-select v-model="subForm.countryId" placeholder="产地" style="width: 100%" filterable>
|
|
|
- <el-option
|
|
|
- v-for="item in countryList"
|
|
|
- :key="item.countryId"
|
|
|
- :label="item.countryName"
|
|
|
- :value="item.countryId"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="制造商:">
|
|
|
- <el-input v-model="subForm.manufacturer" placeholder="请输入制造商名称" maxlength="50" show-word-limit />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
|
|
|
- <upload-image
|
|
|
- tip="建议尺寸：200px * 200px"
|
|
|
- :image-list="brandAuthLogoList"
|
|
|
- @success="uploadBrandAuthSuccess"
|
|
|
- @remove="handleRemoveBrandAuthLogo"
|
|
|
- />
|
|
|
- <el-input v-show="false" v-model="subForm.brandAuthLogo" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="代理声明:" prop="statementType">
|
|
|
- <el-radio-group v-model="subForm.statementType" @change="handleStatementChange">
|
|
|
- <el-radio :label="1">弹窗</el-radio>
|
|
|
- <el-radio :label="2">链接</el-radio>
|
|
|
- <el-radio :label="3">图片</el-radio>
|
|
|
- <el-radio :label="4">文件</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item v-if="subForm.statementType === 1" ref="statement" label="弹窗:" prop="statementContent">
|
|
|
- <el-input v-model="subForm.statementContent" type="textarea" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item v-else-if="subForm.statementType === 2" ref="statement" label="链接:" prop="statementLink">
|
|
|
- <el-input v-model="subForm.statementLink" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- v-else-if="subForm.statementType === 3"
|
|
|
- ref="statement"
|
|
|
- label="图片:"
|
|
|
- class="no-input"
|
|
|
- prop="statementImage"
|
|
|
- >
|
|
|
- <upload-image
|
|
|
- tip="建议尺寸：200px * 200px"
|
|
|
- :image-list="statementImageList"
|
|
|
- @success="uploadStatementImageSuccess"
|
|
|
- @remove="handleRemoveStatementImage"
|
|
|
- />
|
|
|
- <el-input v-show="false" v-model="subForm.statementImage" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item v-else ref="statement" label="文件:" prop="statementFileId">
|
|
|
- <upload-file
|
|
|
- ref="fileUpload"
|
|
|
- :auto-upload="false"
|
|
|
- :data="uploadParams"
|
|
|
- :file-list="statementFileList"
|
|
|
- :before-upload="beforeUploadStatementFile"
|
|
|
- @success="uploadStatementFileSuccess"
|
|
|
- @remove="removeStatementFile"
|
|
|
- @change="changeStatementFile"
|
|
|
- />
|
|
|
- <el-input v-show="false" v-model="subForm.statementFileId" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="官网认证链接:" prop="securityLink">
|
|
|
- <el-input v-model="subForm.securityLink" placeholder="请输入官网认证链接" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <div slot="footer">
|
|
|
- <el-button @click="addBrandSubmitCancel">取 消</el-button>
|
|
|
- <el-button type="primary" :loading="submitLoading" @click="handleSaveBrand">确 定</el-button>
|
|
|
- </div>
|
|
|
+ <!-- 品牌编辑dialog -->
|
|
|
+ <el-dialog
|
|
|
+ title="编辑品牌信息"
|
|
|
+ width="36%"
|
|
|
+ :visible.sync="brandEditVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <brand-edit-form v-if="brandEditVisible" ref="brandEditForm" :model="brandModel" @change="onBrandFormChange" />
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="onEditBrandCancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onBrandSubmit">确 定</el-button>
|
|
|
+ </span>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
-import UploadFile from '@/components/UploadFile'
|
|
|
import UploadImage from '@/components/UploadImage'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import { isMobile } from '@/utils/validate'
|
|
|
-import { fetchBrandList } from '@/api/brand'
|
|
|
+import { BrandEditForm } from '@/views/components'
|
|
|
import { deepClone } from '@/utils'
|
|
|
-import { addSupplier, getSupplierById } from '@/api/supplier'
|
|
|
-import { Promise } from 'jszip/lib/external'
|
|
|
-let uuid = 0
|
|
|
+import { isMobile } from '@/utils/validate'
|
|
|
+
|
|
|
+const generateBrandInfo = () => ({
|
|
|
+ brandName: '',
|
|
|
+ brandAuthLogo: '',
|
|
|
+ country: '',
|
|
|
+ manufacturer: ''
|
|
|
+})
|
|
|
|
|
|
export default {
|
|
|
- components: { UploadImage, UploadFile },
|
|
|
+ components: {
|
|
|
+ UploadImage,
|
|
|
+ BrandEditForm
|
|
|
+ },
|
|
|
data() {
|
|
|
const validMobile = (rule, value, callback) => {
|
|
|
if (!isMobile(value)) {
|
|
|
@@ -287,540 +125,129 @@ export default {
|
|
|
}
|
|
|
return callback()
|
|
|
}
|
|
|
-
|
|
|
- const validShopInfo = (rule, value, callback) => {
|
|
|
- console.log(value)
|
|
|
- if (value <= 0) {
|
|
|
- return callback(new Error('代理品牌不能为空'))
|
|
|
- }
|
|
|
- return callback()
|
|
|
- }
|
|
|
-
|
|
|
return {
|
|
|
- id: '', // 供应商id
|
|
|
- editType: '',
|
|
|
- isLoading: false,
|
|
|
- submitLoading: false,
|
|
|
- dialogAddBrand: false,
|
|
|
- brandTagClickType: '', // 品牌表单点击类型
|
|
|
- selectedShopType: 1, // 当前选中的供应商类型
|
|
|
- currentBrand: {}, // 当前选中的品牌
|
|
|
- selectedBrandIds: [], // 代理商已添加的品牌id
|
|
|
- editBrandInfo: {},
|
|
|
- // 表单1
|
|
|
- submitForm: {
|
|
|
- shopType: 1, // 供应商类型
|
|
|
+ type: 'add',
|
|
|
+ brandEditVisible: false,
|
|
|
+ brandEditType: 'add',
|
|
|
+ brandEditIndex: 0,
|
|
|
+ formData: {
|
|
|
shopName: '', // 供应商名称
|
|
|
- brandId: '', // 品牌id
|
|
|
+ shopType: '', // 供应商类型
|
|
|
mobile: '', // 手机号
|
|
|
linkMan: '', // 联系人
|
|
|
- countryId: 1, // 产地id
|
|
|
- brandAuthLogo: '', // 品牌logo
|
|
|
- securityLink: '', // 官网认证链接
|
|
|
- shopStatus: 1, // 供应商状态,
|
|
|
- shopInfo: '',
|
|
|
- wxAccountType: 0,
|
|
|
+ logo: '', // 代理商logo
|
|
|
+ brandList: [],
|
|
|
+ wxAccountType: '',
|
|
|
appId: '',
|
|
|
appSecret: '',
|
|
|
- qrCodeImage: '', // 微信公众号二维码
|
|
|
- logo: '', // 代理商logo
|
|
|
- manufacturer: '' // 制造商
|
|
|
- },
|
|
|
- // 表单2
|
|
|
- subForm: {
|
|
|
- brandId: '', // 品牌id
|
|
|
- countryId: 1, // 产地id
|
|
|
- brandAuthLogo: '', // 品牌logo
|
|
|
- securityLink: '', // 官网认证链接
|
|
|
- statementType: 1, // 代理声明类型
|
|
|
- statementContent: '', // 声明内容
|
|
|
- statementFileId: null, // 声明文件id
|
|
|
- statementImage: '', // 声明图片
|
|
|
- statementLink: '', // 声明链接
|
|
|
- manufacturer: '' // 制造商
|
|
|
+ shopStatus: 1 // 供应商状态,
|
|
|
},
|
|
|
- supplierBrands: [],
|
|
|
- brandList: [],
|
|
|
- // 表单数据校验
|
|
|
- formDataRules: {
|
|
|
- shopType: { required: true, message: '供应商类型不能为空', tigger: 'change', type: 'number' },
|
|
|
- shopName: { required: true, message: '供应名称不能为空', tigger: 'change' },
|
|
|
+ rules: {
|
|
|
+ shopName: [{ required: true, message: '请输入供应商名称', trigger: ['blur'] }],
|
|
|
+ shopType: [{ required: true, message: '请选择供应商类型', trigger: ['change'] }],
|
|
|
mobile: [
|
|
|
- { required: true, message: '手机号不能为空', tigger: 'change' },
|
|
|
- { validator: validMobile, tigger: 'change' }
|
|
|
+ { required: true, message: '请输入手机号', trigger: ['blur'] },
|
|
|
+ { validator: validMobile, tigger: ['blur'] }
|
|
|
],
|
|
|
- linkMan: { required: true, message: '联系人不能为空', tigger: 'blur' },
|
|
|
- countryId: { required: true, message: '产地不能为空', tigger: 'change', type: 'number' },
|
|
|
- brandAuthLogo: { required: true, message: '品牌logo不能为空', tigger: 'change' },
|
|
|
- shopInfo: [
|
|
|
- { required: true, message: '代理品牌不能为空', tigger: 'change', type: 'number' },
|
|
|
- { validator: validShopInfo, tigger: 'change' }
|
|
|
- ],
|
|
|
- brandId: { required: true, message: '品牌不能为空', tigger: 'change', type: 'number' },
|
|
|
- statementContent: { required: true, message: '声明内容不能为空', tigger: 'change' }, // 声明内容
|
|
|
- statementFileId: { required: true, message: '声明文件不能为空', tigger: 'change', type: 'number' }, // 声明文件id
|
|
|
- statementImage: { required: true, message: '声明图片不能为空', tigger: 'change' }, // 声明图片
|
|
|
- statementLink: { required: true, message: '声明链接不能为空', tigger: 'change' }, // 声明链接,
|
|
|
- logo: { required: true, message: '代理商logo不能为空', tigger: 'change' }
|
|
|
+ linkMan: [{ required: true, message: '请输入联系人', trigger: ['blur'] }],
|
|
|
+ logo: [{ required: true, message: '请上传供应商logo', trigger: ['change'] }],
|
|
|
+ brandList: [{ required: true, type: 'array', message: '请至少添加一个品牌', trigger: ['change'] }],
|
|
|
+ shopStatus: [{ required: true, message: '请选择供应商状态', trigger: ['change'] }],
|
|
|
+ appId: [{ required: true, message: '请输入服务号appId', trigger: ['blur'] }],
|
|
|
+ appSecret: [{ required: true, message: '请输入服务号appSecret', trigger: ['blur'] }]
|
|
|
},
|
|
|
-
|
|
|
- // 上传图片列表
|
|
|
- logoList: [],
|
|
|
- brandAuthLogoList: [],
|
|
|
- qrCodeImageList: [],
|
|
|
- // brandAuthLogoList:[],
|
|
|
- statementImageList: [],
|
|
|
- // 上传的文件列表
|
|
|
- statementFileList: [], // 文件
|
|
|
- statementFileName: '' // 声明文件名称 临时
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['countryList', 'authUserId']),
|
|
|
- // 去除重复的品牌后的列表
|
|
|
- otherBrandList() {
|
|
|
- if (this.brandTagClickType === 'add') {
|
|
|
- return this.brandList.filter((item) => this.selectedBrandIds.indexOf(item.id) === -1)
|
|
|
- }
|
|
|
-
|
|
|
- if (this.brandTagClickType === 'edit') {
|
|
|
- const exclude = this.selectedBrandIds.filter((id) => id !== this.editBrandInfo.brandId)
|
|
|
- return this.brandList.filter((item) => exclude.indexOf(item.id) === -1)
|
|
|
- }
|
|
|
-
|
|
|
- return this.brandList
|
|
|
- },
|
|
|
- // 文件上传参数
|
|
|
- uploadParams() {
|
|
|
- return {
|
|
|
- brandId: this.currentBrand.id,
|
|
|
- authUserId: this.id
|
|
|
- }
|
|
|
- },
|
|
|
- // 文案提示
|
|
|
- editTypeText() {
|
|
|
- return this.editType === 'edit' ? '修改' : '添加'
|
|
|
- },
|
|
|
- editBrandText() {
|
|
|
- return this.brandTagClickType === 'edit' ? '修改品牌' : '添加品牌'
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 根据供应商类型变化获取品牌列表
|
|
|
- selectedShopType(nVal) {
|
|
|
- this.getBrandList(nVal)
|
|
|
+ brandModel: generateBrandInfo(),
|
|
|
+ logoImageList: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.editType = this.$route.query.type || 'add'
|
|
|
- this.id = parseInt(this.$route.query.id) || ''
|
|
|
- this.getBrandList(this.selectedShopType)
|
|
|
- this.fetchSupplierInfo()
|
|
|
+ this.type = this.$route.query.type || 'add'
|
|
|
+ if (this.type === 'edit') {
|
|
|
+ this.initFormData()
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- /** 数据回显 */
|
|
|
- // 获取供应商信息
|
|
|
- fetchSupplierInfo() {
|
|
|
- if (!this.id) return
|
|
|
- getSupplierById({ authUserId: this.id }).then((res) => {
|
|
|
- this.initSupplierInfo(res.data)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 初始化供应商信息
|
|
|
- initSupplierInfo(info) {
|
|
|
- for (const key in this.submitForm) {
|
|
|
- if (Object.hasOwnProperty.call(info, key)) {
|
|
|
- this.submitForm[key] = info[key]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.selectedShopType = info.shopType
|
|
|
- if (this.selectedShopType === 1) {
|
|
|
- // 品牌方
|
|
|
- const shopInfo = info.shopInfo[0]
|
|
|
- this.submitForm.brandId = shopInfo.brandId
|
|
|
- this.submitForm.countryId = shopInfo.countryId
|
|
|
- this.submitForm.brandAuthLogo = shopInfo.brandAuthLogo
|
|
|
- this.submitForm.securityLink = shopInfo.securityLink
|
|
|
- this.submitForm.manufacturer = shopInfo.manufacturer
|
|
|
- this.submitForm.brandName = shopInfo.brandName
|
|
|
-
|
|
|
- if (shopInfo.brandAuthLogo) {
|
|
|
- this.brandAuthLogoList = [{ name: shopInfo.brandName, url: shopInfo.brandAuthLogo }]
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 代理商
|
|
|
- this.supplierBrands = info.shopInfo.map((item) => {
|
|
|
- item.uuid = ++uuid
|
|
|
- this.selectedBrandIds.push(item.brandId)
|
|
|
- return item
|
|
|
- })
|
|
|
-
|
|
|
- // 代理商logo
|
|
|
- if (this.submitForm.logo) {
|
|
|
- this.logoList = [{ name: this.submitForm.brandName, url: this.submitForm.logo }]
|
|
|
- }
|
|
|
-
|
|
|
- this.submitForm.shopInfo = this.supplierBrands.length
|
|
|
- }
|
|
|
-
|
|
|
- // 微信公众号二维码
|
|
|
- if (this.submitForm.qrCodeImage) {
|
|
|
- this.qrCodeImageList = [{ name: '', url: this.submitForm.qrCodeImage }]
|
|
|
- }
|
|
|
- },
|
|
|
- /** 数据回显END */
|
|
|
-
|
|
|
- // 提交保存
|
|
|
- async submit() {
|
|
|
+ // 初始化表单信息
|
|
|
+ initFormData() {},
|
|
|
+ // 保存
|
|
|
+ onSave() {
|
|
|
+ console.log(this.formData)
|
|
|
+ },
|
|
|
+ // 提交供应商信息
|
|
|
+ async onSubmit() {
|
|
|
try {
|
|
|
- await this.$refs.submitFormRef.validate()
|
|
|
- } catch (err) {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- this.isLoading = true
|
|
|
- let params = {}
|
|
|
- if (this.selectedShopType === 1) {
|
|
|
- params = this.getBrandParams()
|
|
|
- } else {
|
|
|
- params = this.getShopParams()
|
|
|
- }
|
|
|
-
|
|
|
- // 设置创建人
|
|
|
- params.createBy = this.authUserId
|
|
|
- params.authUserId = this.id
|
|
|
-
|
|
|
- console.log(params)
|
|
|
- addSupplier(params)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success(`${this.editTypeText}供应商成功`)
|
|
|
- this.$store.dispatch('tagsView/delView', this.$route)
|
|
|
- this.$router.replace('/supplier/list')
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- this.isLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /** 封装请求参数 */
|
|
|
- // 代理商参数
|
|
|
- getShopParams() {
|
|
|
- const params = {
|
|
|
- shopType: 2, // 供应商类型
|
|
|
- shopName: '', // 供应商名称
|
|
|
- logo: '', // 代理商logo
|
|
|
- mobile: '', // 手机号
|
|
|
- linkMan: '', // 联系人
|
|
|
- securityLink: '', // 官网认证链接
|
|
|
- shopStatus: 1, // 供应商状态,
|
|
|
- wxAccountType: 2,
|
|
|
- appId: '',
|
|
|
- appSecret: '',
|
|
|
- qrCodeImage: '', // 微信公众号二维码
|
|
|
- manufacturer: '' // 制造商
|
|
|
- }
|
|
|
- for (const key in params) {
|
|
|
- if (Object.hasOwnProperty.call(this.submitForm, key)) {
|
|
|
- params[key] = this.submitForm[key]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- params.shopInfo = deepClone(this.supplierBrands).map((item) => {
|
|
|
- delete item.statementFileName
|
|
|
- delete item.uuid
|
|
|
- return item
|
|
|
- })
|
|
|
-
|
|
|
- return params
|
|
|
- },
|
|
|
-
|
|
|
- // 品牌方参数
|
|
|
- getBrandParams() {
|
|
|
- const params = {
|
|
|
- shopType: 1, // 供应商类型
|
|
|
- mobile: '', // 手机号
|
|
|
- linkMan: '', // 联系人
|
|
|
- wxAccountType: 2,
|
|
|
- appId: '',
|
|
|
- appSecret: '',
|
|
|
- qrCodeImage: '', // 微信公众号二维码
|
|
|
- shopStatus: 1 // 供应商状态,
|
|
|
- }
|
|
|
- for (const key in params) {
|
|
|
- if (Object.hasOwnProperty.call(this.submitForm, key)) {
|
|
|
- params[key] = this.submitForm[key]
|
|
|
- }
|
|
|
+ await this.$refs.submitForm.validate()
|
|
|
+ this.onSave()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
}
|
|
|
-
|
|
|
- params.shopName = this.currentBrand.name
|
|
|
- params.shopInfo = [
|
|
|
- {
|
|
|
- brandId: this.submitForm.brandId,
|
|
|
- countryId: this.submitForm.countryId,
|
|
|
- brandAuthLogo: this.submitForm.brandAuthLogo,
|
|
|
- securityLink: this.submitForm.securityLink,
|
|
|
- manufacturer: this.submitForm.manufacturer, // 制造商
|
|
|
- statementType: 1,
|
|
|
- statementContent: '',
|
|
|
- statementFileId: null,
|
|
|
- statementImage: '',
|
|
|
- statementLink: ''
|
|
|
- }
|
|
|
- ]
|
|
|
- return params
|
|
|
- },
|
|
|
- // 大理上添加
|
|
|
- /** 封装请求参数 end */
|
|
|
-
|
|
|
- // 品牌改变事件
|
|
|
- handleBrandChange(id) {
|
|
|
- console.log(id)
|
|
|
- this.currentBrand = this.brandList.find((item) => item.id === id)
|
|
|
- this.brandAuthLogoList = [{ name: this.currentBrand.name, url: this.currentBrand.authLogo }]
|
|
|
- this.submitForm.brandAuthLogo = this.currentBrand.authLogo
|
|
|
- this.subForm.brandAuthLogo = this.currentBrand.authLogo
|
|
|
},
|
|
|
-
|
|
|
- /** 品牌标签操作 */
|
|
|
- // 添加品牌对话框
|
|
|
- handleAddBrand() {
|
|
|
- this.brandTagClickType = 'add'
|
|
|
- // 文件上传参数
|
|
|
- this.dialogAddBrand = true
|
|
|
- },
|
|
|
- // 修改品牌
|
|
|
- handleEditBrand(row) {
|
|
|
- this.brandTagClickType = 'edit'
|
|
|
- // 等待dialog表单渲染完成后再设置值
|
|
|
- this.$nextTick(() => {
|
|
|
- this.editBrandInfo = row
|
|
|
- // 设置选中品牌信息
|
|
|
- this.currentBrand.id = row.brandId
|
|
|
- this.currentBrand.name = row.brandName
|
|
|
- this.currentBrand.authLogo = row.brandAuthLogo
|
|
|
- this.statementFileName = row.statementFileName
|
|
|
-
|
|
|
- if (row.brandAuthLogo) {
|
|
|
- this.brandAuthLogoList = [{ name: row.brandName, url: row.brandAuthLogo }]
|
|
|
- }
|
|
|
-
|
|
|
- if (row.statementImage) {
|
|
|
- this.statementImageList = [{ name: row.brandName, url: row.statementImage }]
|
|
|
- }
|
|
|
-
|
|
|
- if (row.statementFileId) {
|
|
|
- this.statementFileList = [{ name: row.statementFileName }]
|
|
|
- }
|
|
|
-
|
|
|
- for (const key in this.subForm) {
|
|
|
- if (Object.hasOwnProperty.call(this.editBrandInfo, key)) {
|
|
|
- this.subForm[key] = this.editBrandInfo[key]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- console.log(this.subForm)
|
|
|
- })
|
|
|
-
|
|
|
- this.dialogAddBrand = true
|
|
|
+ // 品牌信息变化
|
|
|
+ onBrandFormChange(data) {
|
|
|
+ this.brandModel = data
|
|
|
},
|
|
|
- // 移除品牌
|
|
|
- handleRemoveBrand(row) {
|
|
|
- // 从已选品牌id列表中移除
|
|
|
- this.selectedBrandIds.splice(this.selectedBrandIds.indexOf(row.brandId), 1)
|
|
|
- // 从已添加品牌列表中移除
|
|
|
- const findIndex = this.supplierBrands.findIndex((item) => item.uuid === row.uuid)
|
|
|
- this.supplierBrands.splice(findIndex, 1)
|
|
|
- this.submitForm.shopInfo = this.supplierBrands.length
|
|
|
- },
|
|
|
- // 保存品牌
|
|
|
- async handleSaveBrand() {
|
|
|
- if (this.subForm.statementType === 4) {
|
|
|
- console.log('有文件上传')
|
|
|
- if (!this.subForm.statementFileId || this.subForm.statementFileId === -1) {
|
|
|
- this.submitLoading = true
|
|
|
- this.$refs.fileUpload.$refs.fileUpload.submit()
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
+ // 品牌信息确认
|
|
|
+ async onBrandSubmit() {
|
|
|
try {
|
|
|
- await this.$refs.subFormRef.validate()
|
|
|
- this.handleSaveBrandAction()
|
|
|
+ await this.$refs.brandEditForm.validate()
|
|
|
+ if (this.brandEditType === 'add') {
|
|
|
+ this.formData.brandList.push(deepClone(this.brandModel))
|
|
|
+ } else {
|
|
|
+ this.formData.brandList.splice(this.brandEditIndex, 1, deepClone(this.brandModel))
|
|
|
+ }
|
|
|
+ this.brandEditVisible = false
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- // 取消保存品牌
|
|
|
- addBrandSubmitCancel() {
|
|
|
- // 取消上传文件
|
|
|
- if (this.$refs.fileUpload) {
|
|
|
- this.$refs.fileUpload.$refs.fileUpload.abort()
|
|
|
- this.$message.info('文件上传已取消')
|
|
|
- }
|
|
|
- this.dialogAddBrand = false
|
|
|
- },
|
|
|
-
|
|
|
- // 保存品牌操作
|
|
|
- handleSaveBrandAction() {
|
|
|
- // 深度克隆数据
|
|
|
- const brandInfo = deepClone(this.subForm)
|
|
|
- // 保存已添加品牌id
|
|
|
- this.selectedBrandIds.push(this.currentBrand.id)
|
|
|
- // 设置品牌名称（显示使用）
|
|
|
- brandInfo.brandName = this.currentBrand.name
|
|
|
- brandInfo.brandAuthLogo = this.currentBrand.authLogo
|
|
|
- brandInfo.statementFileName = this.statementFileName
|
|
|
- if (this.brandTagClickType === 'add') {
|
|
|
- // 设置唯一id
|
|
|
- brandInfo.uuid = ++uuid
|
|
|
- // 保存数据到代理商品牌列表
|
|
|
- this.supplierBrands.push(brandInfo)
|
|
|
- }
|
|
|
- if (this.brandTagClickType === 'edit') {
|
|
|
- // 使用新数据替换旧数据
|
|
|
- const findIndex = this.supplierBrands.findIndex((item) => item.uuid === this.editBrandInfo.uuid)
|
|
|
- this.supplierBrands.splice(findIndex, 1, brandInfo)
|
|
|
- }
|
|
|
- this.dialogAddBrand = false
|
|
|
- },
|
|
|
-
|
|
|
- // 添加品牌对话框关闭
|
|
|
- handleDialogAddBrandClosed() {
|
|
|
- this.subForm.securityLink = ''
|
|
|
- this.subForm.manufacturer = ''
|
|
|
- this.subForm.statementType = 1
|
|
|
- this.statementFileName = ''
|
|
|
- this.statementImageList = []
|
|
|
- this.statementFileList = []
|
|
|
- this.brandAuthLogoList = []
|
|
|
- this.currentBrand = {}
|
|
|
- this.submitForm.shopInfo = this.supplierBrands.length
|
|
|
- // 按钮loading结束
|
|
|
- this.submitLoading = false
|
|
|
- // 初始化表单
|
|
|
- this.$refs.subFormRef.resetFields()
|
|
|
- console.log(this.subForm)
|
|
|
- },
|
|
|
-
|
|
|
- // 声明类型切换
|
|
|
- handleStatementChange() {
|
|
|
- this.$refs.statement.clearValidate()
|
|
|
- },
|
|
|
- // 供应商类型改变事件
|
|
|
- handleTypeChange(type) {
|
|
|
- this.selectedShopType = type
|
|
|
- this.brandAuthLogoList = []
|
|
|
- this.statementImageList = []
|
|
|
- this.currentBrand = {}
|
|
|
- },
|
|
|
- // 获取品牌列表
|
|
|
- getBrandList(type) {
|
|
|
- fetchBrandList({ type }).then((res) => {
|
|
|
- if (res.code !== 0) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.brandList = res.data
|
|
|
- })
|
|
|
- },
|
|
|
- /** 品牌标签操作END */
|
|
|
-
|
|
|
- // 输入框输入时
|
|
|
- handleMobileInput() {
|
|
|
- this.submitForm.mobile = this.submitForm.mobile.replace(/[^\w\.\/]/gi, '')
|
|
|
- },
|
|
|
-
|
|
|
- /** 图片上传 */
|
|
|
- // 代理商logo
|
|
|
- uploadLogoImageSuccess({ response, file, fileList }) {
|
|
|
- this.logoList = fileList
|
|
|
- this.submitForm.logo = response.data
|
|
|
- },
|
|
|
- handleLogoImageRemove({ file, fileList }) {
|
|
|
- this.logoList = fileList
|
|
|
- this.submitForm.logo = ''
|
|
|
- },
|
|
|
-
|
|
|
- // 品牌logo
|
|
|
- uploadBrandAuthSuccess({ response, file, fileList }) {
|
|
|
- this.brandAuthLogoList = fileList
|
|
|
- this.submitForm.brandAuthLogo = response.data
|
|
|
- this.subForm.brandAuthLogo = response.data
|
|
|
- },
|
|
|
- handleRemoveBrandAuthLogo({ file, fileList }) {
|
|
|
- this.brandAuthLogoList = fileList
|
|
|
- this.submitForm.brandAuthLogo = ''
|
|
|
- this.subForm.brandAuthLogo = ''
|
|
|
- },
|
|
|
-
|
|
|
- // 公众号二维码
|
|
|
- uploadQrCodeImageSuccess({ response, file, fileList }) {
|
|
|
- this.qrCodeImageList = fileList
|
|
|
- this.submitForm.qrCodeImage = response.data
|
|
|
- },
|
|
|
- handleRemoveQrCodeImage({ file, fileList }) {
|
|
|
- this.qrCodeImageList = fileList
|
|
|
- this.submitForm.qrCodeImage = ''
|
|
|
- },
|
|
|
-
|
|
|
- // 声明图片
|
|
|
- uploadStatementImageSuccess({ response, file, fileList }) {
|
|
|
- this.statementImageList = fileList
|
|
|
- this.subForm.statementImage = response.data
|
|
|
+ // 编辑品牌事件
|
|
|
+ onEditBrand(type, row, index) {
|
|
|
+ this.brandEditType = type
|
|
|
+ this.brandEditIndex = index
|
|
|
+ this.brandModel = type === 'add' ? generateBrandInfo() : row
|
|
|
+ this.brandEditVisible = true
|
|
|
},
|
|
|
- handleRemoveStatementImage({ file, fileList }) {
|
|
|
- this.statementImageList = fileList
|
|
|
- this.subForm.statementImage = ''
|
|
|
+ // 品牌编辑取消
|
|
|
+ onEditBrandCancel() {
|
|
|
+ this.$refs.brandEditForm.clearValidate()
|
|
|
+ this.brandEditVisible = false
|
|
|
},
|
|
|
-
|
|
|
- /** 文件上传 */
|
|
|
- uploadStatementFileSuccess({ response, file, fileList }) {
|
|
|
- this.statementFileList = fileList
|
|
|
- this.subForm.statementFileId = response.data.fileId
|
|
|
- this.statementFileName = response.data.fileName
|
|
|
- // 验证表单数据并保存
|
|
|
- this.$refs.subFormRef.validate((valide) => {
|
|
|
- if (!valide) return
|
|
|
- this.handleSaveBrandAction()
|
|
|
- })
|
|
|
+ // 删除品牌
|
|
|
+ onRemoveBrand(index) {
|
|
|
+ this.formData.brandList.splice(index, 1)
|
|
|
},
|
|
|
- removeStatementFile({ file, fileList }) {
|
|
|
- this.statementFileList = []
|
|
|
- this.subForm.statementFileId = null
|
|
|
+ // 供应商logo上传成功
|
|
|
+ onUploadLogoSuccess({ response, file, fileList }) {
|
|
|
+ this.logoImageList = fileList
|
|
|
+ this.formData.logo = response.data
|
|
|
},
|
|
|
- changeStatementFile({ file, fileList }) {
|
|
|
- this.statementFileList = fileList
|
|
|
- this.subForm.statementFileId = -1
|
|
|
+ // 移除供应商logo
|
|
|
+ onRemoveLogoImage() {
|
|
|
+ this.logoImageList = []
|
|
|
+ this.formData.logo = ''
|
|
|
},
|
|
|
- beforeUploadStatementFile(file) {
|
|
|
- const maxSize = 30
|
|
|
- if (file.size <= maxSize * 1024 * 1024) return true
|
|
|
- return this.$confirm(`您上传的文件大于${maxSize}MB，是否继续上传？文件上传过程中请您耐心等待!`, '文件上传提示', {
|
|
|
- confirmButtonText: '继续',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- return Promise.resolve()
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.$message.info('已取消上传')
|
|
|
- this.submitLoading = false
|
|
|
- return Promise.reject()
|
|
|
- })
|
|
|
+ // 输入手机号时
|
|
|
+ onMobileInput() {
|
|
|
+ this.formData.mobile = this.formData.mobile.replace(/[^\w\.\/]/gi, '')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
-.addForm {
|
|
|
- .brand-list {
|
|
|
- .el-tag {
|
|
|
- margin-right: 5px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+.el-tag {
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+.el-select {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+ .form-label-tip {
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-left: 6px;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
yuwenjun1997