|
|
@@ -1,28 +1,16 @@
|
|
|
<template>
|
|
|
<div v-loading="isLoading" class="addProduct page-form-container">
|
|
|
<el-form ref="addFormRef" label-width="130px" class="addForm" :model="formData" :rules="rules">
|
|
|
- <!--
|
|
|
- <el-form-item label="设备名称:" prop="productName">
|
|
|
- <el-input v-model="formData.productName" placeholder="建议输入30个字符效果最佳" show-word-limit maxlength="50" />
|
|
|
- </el-form-item>
|
|
|
- -->
|
|
|
-
|
|
|
<el-form-item label="认证方式:">
|
|
|
- <el-radio-group v-model="formData.authType">
|
|
|
+ <el-radio-group v-model="formData.authType" @change="onAuthTypeChange">
|
|
|
<el-radio :label="1">新设备认证</el-radio>
|
|
|
<el-radio :label="2">关联已认证设备</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <template v-if="formData.authType === 1">
|
|
|
+ <template v-if="formData.authType === 1 || (formData.authType === 2 && formData.snCode)">
|
|
|
<el-form-item label="设备名称:" prop="productTypeId">
|
|
|
- <el-select
|
|
|
- v-model="formData.productTypeId"
|
|
|
- filterable
|
|
|
- placeholder="选择设备"
|
|
|
- style="width: 100%"
|
|
|
- @change="onProductTypeIdChange"
|
|
|
- >
|
|
|
+ <el-select v-model="formData.productTypeId" filterable placeholder="选择设备" style="width: 100%" clearable>
|
|
|
<el-option
|
|
|
v-for="item in deviceList"
|
|
|
:key="item.productTypeId"
|
|
|
@@ -34,18 +22,32 @@
|
|
|
</template>
|
|
|
|
|
|
<el-form-item label="设备SN码:" prop="snCode">
|
|
|
- <el-input v-model="formData.snCode" placeholder="请输入设备SN码" />
|
|
|
+ <template v-if="formData.authType === 1">
|
|
|
+ <el-input v-model="formData.snCode" placeholder="请输入设备SN码" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-select
|
|
|
+ v-model="formData.snCode"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择设备SN码"
|
|
|
+ style="width: 100%"
|
|
|
+ clearable
|
|
|
+ @change="onSnCodeChange"
|
|
|
+ >
|
|
|
+ <el-option v-for="code in productSnList" :key="code" :label="code" :value="code" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <template v-if="formData.authType === 1">
|
|
|
+ <template v-if="formData.authType === 1 || (formData.authType === 2 && formData.snCode)">
|
|
|
<!-- **************** 新方法配置授权牌 START ******************* -->
|
|
|
<el-form-item label="授权牌:">
|
|
|
- <el-radio-group v-model="formData.addQrCodeFlag" size="mini">
|
|
|
- <el-radio :label="0" border>模板库生成</el-radio>
|
|
|
- <el-radio :label="1" border>自定义上传</el-radio>
|
|
|
+ <el-radio-group v-model="formData.certificateImageType" size="mini" @change="onCertificateImageTypeChange">
|
|
|
+ <el-radio :label="1" border>模板库生成</el-radio>
|
|
|
+ <el-radio :label="2" border>自定义上传</el-radio>
|
|
|
</el-radio-group>
|
|
|
<div style="margin-top: 12px">
|
|
|
- <template v-if="formData.addQrCodeFlag === 1">
|
|
|
+ <template v-if="formData.certificateImageType === 2">
|
|
|
<upload-image
|
|
|
tip="建议尺寸：150px * 112px"
|
|
|
:image-list="certificateImageList"
|
|
|
@@ -55,37 +57,12 @@
|
|
|
/>
|
|
|
<el-input v-model="formData.certificateImage" class="hiddenInput" />
|
|
|
</template>
|
|
|
- <el-image v-else style="width: 148px; height: 148px" />
|
|
|
+ <template v-else>
|
|
|
+ <preview-image v-if="formData.certificateImage" :src="formData.certificateImage" />
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <!-- **************** 新方法配置授权牌 End ******************* -->
|
|
|
-
|
|
|
- <!-- **************** 旧方法配置授权牌 START ******************* -->
|
|
|
- <!-- 上传授权牌 -->
|
|
|
- <!-- <el-form-item label="授权牌:" prop="certificateImage">
|
|
|
- <upload-image
|
|
|
- tip="建议尺寸：542px * 546px"
|
|
|
- :image-list="certificateImageList"
|
|
|
- :before-upload="beforeCertificateImageUpload"
|
|
|
- @success="uploadCertificateImageSuccess"
|
|
|
- @remove="handleCertificateImageRemove"
|
|
|
- />
|
|
|
- <el-input v-model="formData.certificateImage" class="hiddenInput" />
|
|
|
- </el-form-item> -->
|
|
|
- <!-- 是否生成二维码授权牌 -->
|
|
|
- <!-- <el-form-item label="生成二维码授权牌:">
|
|
|
- <el-radio-group v-model="formData.addQrCodeFlag" size="mini">
|
|
|
- <el-radio :label="0" border>否</el-radio>
|
|
|
- <el-radio :label="1" border :disabled="certificateImageList.length <= 0">是</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item> -->
|
|
|
- <!-- 二维码授权牌模板 -->
|
|
|
- <!-- <el-form-item v-if="formData.addQrCodeFlag === 1" label="选择模板:">
|
|
|
- <auth-card-template v-model="formData.addTemplateType" :image-list="certificateImageList" />
|
|
|
- </el-form-item> -->
|
|
|
- <!-- **************** 旧方法配置授权牌 END ******************* -->
|
|
|
-
|
|
|
<el-form-item label="购买渠道:">
|
|
|
<el-input v-model="formData.purchaseWay" placeholder="请输入购买渠道" />
|
|
|
</el-form-item>
|
|
|
@@ -112,10 +89,15 @@
|
|
|
|
|
|
<script>
|
|
|
import UploadImage from '@/components/UploadImage'
|
|
|
-import { saveProduct, getProductById, fetchProductSelectList } from '@/api/product'
|
|
|
+import {
|
|
|
+ saveProduct,
|
|
|
+ getProductById,
|
|
|
+ fetchProductSelectList,
|
|
|
+ fetchProductSnList,
|
|
|
+ fetchDetialBySnCode
|
|
|
+} from '@/api/product'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import { isSnCode } from '@/utils/validate'
|
|
|
-// import AuthCardTemplate from '@/views/components/AuthCardTemplate/index.vue'
|
|
|
import { getStorage } from '@/utils/storage'
|
|
|
export default {
|
|
|
components: { UploadImage },
|
|
|
@@ -132,20 +114,18 @@ export default {
|
|
|
paramsCount: 4,
|
|
|
brandList: [],
|
|
|
deviceList: [], // 设备列表
|
|
|
+ firstAuthType: '',
|
|
|
formData: {
|
|
|
+ authId: '', // 授权id
|
|
|
+ relationId: '',
|
|
|
authType: 1,
|
|
|
authUserId: '',
|
|
|
- authId: '', // 授权id
|
|
|
- certificateImage: '', // 授权牌照
|
|
|
createBy: '', // 创建人id
|
|
|
+ certificateImage: '', // 授权牌照
|
|
|
// 设备参数列表
|
|
|
productId: '', // 授权设备id
|
|
|
- productImage: '', // 设备图片
|
|
|
snCode: '', // 设备SN码
|
|
|
- status: 2, // 上架状态：0下线，1上线 2待审核
|
|
|
- brandId: '',
|
|
|
- addQrCodeFlag: '',
|
|
|
- addTemplateType: 1,
|
|
|
+ certificateImageType: 1,
|
|
|
productTypeId: '',
|
|
|
purchaseWay: '', // 购买渠道
|
|
|
invoiceImage: '' // 发票
|
|
|
@@ -155,95 +135,127 @@ export default {
|
|
|
snCode: [{ required: true, message: 'SN码不能为空' }, { validator: valideSNcode }],
|
|
|
productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }]
|
|
|
},
|
|
|
-
|
|
|
- // 商品图片列表
|
|
|
- productImageList: [],
|
|
|
// 授权牌照图片列表
|
|
|
certificateImageList: [],
|
|
|
// 发票
|
|
|
- invoiceImageList: []
|
|
|
+ invoiceImageList: [],
|
|
|
+ // sn list
|
|
|
+ productSnList: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['authUserId', 'proxyInfo', 'shopType', 'brandId'])
|
|
|
+ ...mapGetters(['authUserId', 'proxyInfo', 'shopType', 'infoId'])
|
|
|
},
|
|
|
created() {
|
|
|
this.editType = this.$route.query.type || 'add'
|
|
|
+ this.formData.relationId = this.$route.query.relationId
|
|
|
this.formData.productId = this.$route.query.id
|
|
|
- this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
|
|
|
+ // this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
|
|
|
// 获取当前设备所属机构的id
|
|
|
this.formData.authId = getStorage('device-setting-authId')
|
|
|
+ this.fetchDeviceList()
|
|
|
+ this.fetchProductSnList()
|
|
|
if (this.editType === 'edit') {
|
|
|
- this.initFormData()
|
|
|
- }
|
|
|
- // 如果供应商类型为品牌方，则自动设置品牌id
|
|
|
- if (this.shopType === 1) {
|
|
|
- this.formData.brandId = this.proxyInfo?.brandId || this.brandId || ''
|
|
|
+ this.fetchProductDetail()
|
|
|
}
|
|
|
- this.fetchDeviceList()
|
|
|
},
|
|
|
methods: {
|
|
|
- // 设备分类修改
|
|
|
- onProductTypeIdChange(value) {
|
|
|
- const deviceInfo = this.deviceList.find((item) => item.productTypeId === value)
|
|
|
- this.formData.productImage = deviceInfo.image
|
|
|
+ // 授权牌类型变化
|
|
|
+ onCertificateImageTypeChange() {
|
|
|
+ this.certificateImageList = []
|
|
|
+ this.formData.certificateImage = ''
|
|
|
},
|
|
|
- // 初始化表单数据
|
|
|
- initFormData() {
|
|
|
- this.isLoading = true
|
|
|
- getProductById({ productId: this.formData.productId }).then((res) => {
|
|
|
- console.log(res)
|
|
|
- for (const key in res.data) {
|
|
|
- if (Object.hasOwnProperty.call(res.data, key)) {
|
|
|
- if (key === 'productTypeId') {
|
|
|
- this.formData[key] = parseInt(res.data[key])
|
|
|
- } else {
|
|
|
- this.formData[key] = res.data[key]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- this.initImageList()
|
|
|
|
|
|
+ // 设备sn码变化
|
|
|
+ async onSnCodeChange(snCode) {
|
|
|
+ if (!snCode) return
|
|
|
+ try {
|
|
|
+ const res = await fetchDetialBySnCode({ snCode })
|
|
|
+ this.formData.invoiceImage = res.data.invoiceImage
|
|
|
+ this.formData.purchaseWay = res.data.purchaseWay
|
|
|
+ this.formData.certificateImage = res.data.certificateImage
|
|
|
+ this.formData.certificateImageType = res.data.certificateImageType
|
|
|
+ this.formData.productTypeId = res.data.productTypeId
|
|
|
+ // this.formData.productId = res.data.productId
|
|
|
if (res.data.invoiceImage) {
|
|
|
- this.invoiceImageList = [{ name: '', url: res.data.invoiceImage }]
|
|
|
+ this.invoiceImageList = [{ name: '发票', url: res.data.invoiceImage }]
|
|
|
+ }
|
|
|
+ if (res.data.certificateImage) {
|
|
|
+ this.certificateImageList = [{ name: '授权牌图片', url: res.data.invoiceImage }]
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- this.isLoading = false
|
|
|
- })
|
|
|
+ // 设备认证类型变化
|
|
|
+ onAuthTypeChange(authType) {
|
|
|
+ if (authType === 1) return
|
|
|
},
|
|
|
|
|
|
- // 初始化上传图片列表
|
|
|
- initImageList() {
|
|
|
- setTimeout(() => {
|
|
|
- const certificateImage = this.formData.certificateImage
|
|
|
- if (certificateImage) {
|
|
|
- this.certificateImageList.push({ name: 'certificateImage', url: certificateImage })
|
|
|
- }
|
|
|
- }, 200)
|
|
|
+ // 获取设备sn码列表
|
|
|
+ async fetchProductSnList() {
|
|
|
+ try {
|
|
|
+ const res = await fetchProductSnList({ authId: this.formData.authId })
|
|
|
+ this.productSnList = res.data
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
- // 模板选择
|
|
|
- authCardChange(current) {
|
|
|
- console.log(current)
|
|
|
- this.formData.addTemplateType = current
|
|
|
+ // 获取设备信息
|
|
|
+ async fetchProductDetail() {
|
|
|
+ try {
|
|
|
+ this.isLoading = true
|
|
|
+ const { productId, relationId } = this.formData
|
|
|
+ const res = await getProductById({ productId, relationId })
|
|
|
+ this.initFormData(res.data)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
- // 提交表单
|
|
|
- submit() {
|
|
|
- this.$refs.addFormRef.validate((valide) => {
|
|
|
- if (valide) {
|
|
|
- this.save()
|
|
|
+ // 初始化表单数据
|
|
|
+ initFormData(data) {
|
|
|
+ for (const key in data) {
|
|
|
+ if (Object.hasOwnProperty.call(data, key)) {
|
|
|
+ if (key === 'productTypeId') {
|
|
|
+ this.formData[key] = parseInt(data[key])
|
|
|
+ } else {
|
|
|
+ this.formData[key] = data[key]
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
+ }
|
|
|
+ if (data.invoiceImage) {
|
|
|
+ this.invoiceImageList = [{ name: '发票', url: data.invoiceImage }]
|
|
|
+ }
|
|
|
+ if (data.certificateImage) {
|
|
|
+ this.certificateImageList = [{ name: '授权牌图片', url: data.invoiceImage }]
|
|
|
+ }
|
|
|
+ this.firstAuthType = data.authType
|
|
|
+ this.isLoading = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交表单
|
|
|
+ async submit() {
|
|
|
+ try {
|
|
|
+ await this.$refs.addFormRef.validate()
|
|
|
+ this.onSave()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
// 保存表单数据
|
|
|
- save() {
|
|
|
+ onSave() {
|
|
|
this.isLoading = true
|
|
|
// createBy先判断是否为代理操作，是就从代理数据中获取，否则直接获取当前登录用户的信息
|
|
|
this.formData.createBy = this.proxyInfo?.authUserId || this.authUserId
|
|
|
- this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
|
|
|
- this.formData.addQrCodeFlag = 0
|
|
|
+
|
|
|
+ if (this.firstAuthType === 2 && this.formData.authType === 1) {
|
|
|
+ this.formData.productId = ''
|
|
|
+ }
|
|
|
+
|
|
|
saveProduct(this.formData)
|
|
|
.then((res) => {
|
|
|
if (res.code !== 0) return
|
|
|
@@ -274,23 +286,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- // 产品图片上传
|
|
|
- beforeProductImageUpload(file) {
|
|
|
- const flag = file.size / 1024 / 1024 < 1
|
|
|
- if (!flag) {
|
|
|
- this.$message.error('上传产品图片大小不能超过 1MB!')
|
|
|
- }
|
|
|
- return flag
|
|
|
- },
|
|
|
- uploadProductImageSuccess({ response, file, fileList }) {
|
|
|
- this.productImageList = fileList
|
|
|
- this.formData.productImage = response.data
|
|
|
- },
|
|
|
- handleProductImageRemove({ file, fileList }) {
|
|
|
- this.productImageList = fileList
|
|
|
- this.formData.productImage = ''
|
|
|
- },
|
|
|
-
|
|
|
// 授权牌照上传
|
|
|
beforeCertificateImageUpload(file) {
|
|
|
const flag = file.size / 1024 / 1024 < 1
|
|
|
@@ -306,7 +301,6 @@ export default {
|
|
|
handleCertificateImageRemove({ file, fileList }) {
|
|
|
this.certificateImageList = fileList
|
|
|
this.formData.certificateImage = ''
|
|
|
- this.formData.addQrCodeFlag = 0
|
|
|
},
|
|
|
|
|
|
// 发票上传
|
yuwenjun1997