认证通机构授权牌，品牌制造商添加

.env.development

@@ -4,12 +4,12 @@ NODE_ENV = development
 ENV = 'development'
 
 # 测试地址 API接口
-# VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
-VUE_APP_BASE_API = 'http://192.168.2.68:8012'
+VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
+# VUE_APP_BASE_API = 'http://192.168.2.68:8012'
 
 # 文件上传 API接口地址
-# VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
-VUE_APP_UPLOAD_API='http://192.168.2.68:8012'
+VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
+# VUE_APP_UPLOAD_API='http://192.168.2.68:8012'
 
 # 二维码生成链接location
 VUE_APP_BASE_SERVER = 'https://www-b.caimei365.com'

src/api/system.js

@@ -168,9 +168,22 @@ export function authTempSave(data) {
 
 /** 添加编辑保存授权牌模板 */
 export function authTempUpdate(data) {
+  // return request({
+  //   url: '/shop/authImage/update/all',
+  //   method: 'post',
+  //   data
+  // })
+  return fetch(`${process.env.VUE_APP_BASE_API}/shop/authImage/update/all`, {
+    body: JSON.stringify(data),
+    method: 'POST'
+  })
+}
+
+/** 获取机构可用模板（供应商可用模板） */
+export function authTempUsed(params) {
   return request({
-    url: '/shop/authImage/update/all',
-    method: 'post',
-    data
+    url: '/auth/template/form/data',
+    method: 'GET',
+    params
   })
 }

src/components/qrcode/index.vue

@@ -9,15 +9,16 @@
       <div class="btn down-btn" @click="handleDown">下载二维码</div>
       <div class="btn close-btn" @click="handleClose">关闭</div>
     </div>
-    <canvas id="canvas" style="display:none" />
+    <canvas id="canvas" style="display: none" />
     <div v-if="isVisible" class="mask" @click="handleClose" />
-    <a id="downloadLink" href="#" style="display:none" />
+    <a id="downloadLink" href="#" style="display: none" />
   </div>
 </template>
 
 <script>
 import QRCode from 'qrcode'
 import downImage from '@/assets/img/qrcode-bg-down.jpg'
+import { mapGetters } from 'vuex'
 export default {
   name: 'Qrcode',
   props: {
@@ -34,9 +35,13 @@ export default {
     return {
       imgUrl: '',
       wwwServer: process.env.VUE_APP_BASE_SERVER,
+      wwwHost: process.env.VUE_APP_WWW_HOST,
       qrcodePath: ''
     }
   },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
   created() {
     this.initQrcode()
   },
@@ -60,7 +65,11 @@ export default {
     // 初始化二维码
     async initQrcode() {
       console.log(this.productInfo)
-      this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
+      if (this.authUserId === 12) {
+        this.qrcodePath = `${this.wwwHost}/12/ross/approve/device/detail?id=${this.productInfo?.productId}`
+      } else {
+        this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
+      }
       // 二维码配置
       const options = {
         width: 192,
@@ -75,7 +84,11 @@ export default {
     },
     // 生成下载的文件
     async createDownFile(callback) {
-      this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
+      if (this.authUserId === 12) {
+        this.qrcodePath = `${this.wwwHost}/12/ross/approve/device/detail?id=${this.productInfo?.productId}`
+      } else {
+        this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
+      }
       const strHeader = this.productInfo.productName
       const strFooter1 = '仪器SN码：'
       const strFooter2 = this.hanldeSNcode(this.productInfo.snCode)
@@ -117,7 +130,7 @@ export default {
         let temp = ''
         const row = []
         for (let a = 0; a < chr.length; a++) {
-          if (ctx.measureText(temp).width >= (w - 290)) {
+          if (ctx.measureText(temp).width >= w - 290) {
             row.push(temp)
             temp = ''
           }
@@ -150,20 +163,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.code-container{
+.code-container {
   position: relative;
   z-index: 999999;
 }
-.mask{
+.mask {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999998;
   width: 100vw;
   height: 100vh;
-  background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
 }
-.qrcode{
+.qrcode {
   z-index: 999999;
   position: fixed;
   left: 50%;
@@ -172,31 +185,31 @@ export default {
   width: 300px;
   height: 400px;
   background: url(../../assets/img/qrcode-bg-show.png) no-repeat center;
-  .content{
+  .content {
     width: 192px;
     height: 192px;
     position: absolute;
     left: 54px;
     bottom: 46px;
   }
-  .down-btn{
+  .down-btn {
     left: 0;
   }
-  .close-btn{
+  .close-btn {
     right: 0;
   }
-  .title{
+  .title {
     position: absolute;
     top: 32px;
     left: 50%;
     transform: translateX(-50%);
-    width:256px;
+    width: 256px;
     text-align: center;
     font-size: 16px;
     color: #fff;
     font-weight: bold;
   }
-  .sncode{
+  .sncode {
     position: absolute;
     top: 78px;
     left: 50%;
@@ -205,19 +218,18 @@ export default {
     width: 192px;
     color: #0e9ef0;
     font-size: 14px;
-    span{
+    span {
       font-weight: bold;
     }
   }
-
 }
-.btn  {
+.btn {
   position: absolute;
   bottom: -60px;
-	width: 108px;
-	height: 32px;
-	background-image: linear-gradient(-90deg,	#50c0ff 0%,#0e90dc 100%);
-	border-radius: 4px;
+  width: 108px;
+  height: 32px;
+  background-image: linear-gradient(-90deg, #50c0ff 0%, #0e90dc 100%);
+  border-radius: 4px;
   text-align: center;
   line-height: 32px;
   color: #fff;

src/router/module/normal/settings.js

@@ -53,7 +53,7 @@ const settingRoutes = [
         path: 'auth-card',
         name: 'NormalSettingsAuthCard',
         hidden: true,
-        meta: { title: '授权牌模板', noCache: true },
+        meta: { title: '授权牌模板', noCache: false },
         component: () => import('@/views/normal/settings/auth-card')
       }
     ]

src/views/admin/settings/auth-card/index.vue

@@ -31,9 +31,10 @@
         </template>
       </el-table-column>
       <el-table-column prop="shopName" label="所属供应商" align="center" />
-      <el-table-column label="操作" align="center" width="280px">
+      <el-table-column label="操作" align="center" width="320px">
         <template slot-scope="{ row }">
           <el-button type="primary" size="mini" @click="onChangeSupplier(row)">更换供应商</el-button>
+          <el-button type="primary" size="mini" @click="onTempEdit(row)">编辑</el-button>
           <!-- 隐藏其一 -->
           <el-button v-if="row.status === 0" type="info" size="mini" @click="onTempStatusChange(row)">启用</el-button>
           <el-button v-else type="danger" size="mini" @click="onTempStatusChange(row)">停用</el-button>
@@ -45,16 +46,16 @@
       <supplier-list @cancel="selectSupplierVisible = false" @confirm="onSupplierConfirm('edit', $event)" />
     </el-dialog>
     <!-- 上传图片 -->
-    <el-dialog title="添加授权牌模板" :visible.sync="addCardVisible" width="40%" @close="onAddCardClose">
+    <el-dialog title="添加授权牌模板" :visible.sync="addCardVisible" width="40%" @closed="onAddCardClose">
       <el-dialog width="66%" title="选择供应商" :visible.sync="addCardInnerVisible" append-to-body>
         <supplier-list @cancel="addCardInnerVisible = false" @confirm="onSupplierConfirm('add', $event)" />
       </el-dialog>
       <el-form ref="addCardForm" :model="formData" label-width="120px" :rules="rules">
-        <el-form-item label="授权牌模板：" prop="image">
+        <el-form-item label="授权牌模板：" prop="templateImage">
           <el-input v-show="false" v-model="formData.templateImage" />
           <upload-image
             :limit="1"
-            tip="建议尺寸：200px * 200px"
+            tip="建议尺寸：542px * 546px"
             :image-list="tempList"
             @success="uploadTempImageSuccess"
             @remove="handleLogoImageRemove"
@@ -63,11 +64,14 @@
         <el-form-item label="二维码位置：" prop="qrPosition">
           <el-input
             v-model="formData.qrPosition"
-            placeholder="请输入二维码位置坐标，以英文逗号隔开，分别为二维码左上角X,Y轴坐标（例如100,100）"
+            placeholder="请输入二维码位置坐标，以英文逗号隔开，分别为二维码左上角X,Y轴坐标（例如：100,100）"
           />
         </el-form-item>
         <el-form-item label="二维码大小：" prop="qrSize">
-          <el-input v-model.number="formData.qrSize" placeholder="请输入二维码大小（例如：120）" />
+          <el-input v-model.number="formData.qrSize" placeholder="请输入二维码大小（例如：53）" />
+        </el-form-item>
+        <el-form-item label="LOGO大小：" prop="logoSize">
+          <el-input v-model="formData.logoSize" placeholder="请输入授权牌logo建议尺寸宽高（例如：212,98）" />
         </el-form-item>
         <el-form-item label="所属供应商：" prop="authUserId">
           <el-input v-show="false" v-model="formData.authUserId" />
@@ -113,6 +117,14 @@ export default {
       callback(new Error('二维码坐标格式不正确，请改为（X坐标,Y坐标） => (100,100)'))
     }
 
+    const validateLogoSize = (rule, value, callback) => {
+      if (!value) return callback()
+      if (value.split(',').length === 2) {
+        return callback()
+      }
+      callback(new Error('logo建议尺寸格式不正确，请改为（宽,高）格式'))
+    }
+
     return {
       listLoading: false,
       isLoading: false,
@@ -129,7 +141,8 @@ export default {
         templateImage: '',
         authUserId: '',
         qrPosition: '',
-        qrSize: ''
+        qrSize: '',
+        logoSize: ''
       },
       addCardVisible: false,
       addCardInnerVisible: false,
@@ -143,7 +156,11 @@ export default {
         templateImage: [{ required: true, message: '请上传授权牌模板', trigger: ['change'] }],
         authUserId: [{ required: true, message: '请选择供应商', trigger: ['change'] }],
         qrPosition: [{ validator: validateQrPosition, trigger: ['blur'] }],
-        qrSize: [{ required: true, message: '请填写二维码大小', trigger: ['blur'] }]
+        qrSize: [{ required: true, message: '请填写二维码大小', trigger: ['blur'] }],
+        logoSize: [
+          { required: true, message: '请输入授权牌logo建议尺寸宽高', trigger: ['blur'] },
+          { validator: validateLogoSize, trigger: ['blur'] }
+        ]
       }
     }
   },
@@ -172,6 +189,20 @@ export default {
       }
     },
 
+    // 编辑授权牌模板
+    onTempEdit(row) {
+      this.formData.templateId = row.templateId
+      this.formData.authUserId = row.authUserId
+      this.formData.qrPosition = row.qrPosition
+      this.formData.qrSize = row.qrSize
+      this.formData.logoSize = row.logoSize
+      this.formData.templateImage = row.templateImage
+      if (row.templateImage) {
+        this.tempList = [{ name: '授权牌模板', url: row.templateImage }]
+      }
+      this.addCardVisible = true
+    },
+
     // 获取供应商列表
     async fetchSupplierList() {
       try {
@@ -228,7 +259,11 @@ export default {
     // 添加授权牌弹窗关闭
     onAddCardClose() {
       this.selectSupplier = null
+      this.formData.templateId = ''
       this.formData.authUserId = ''
+      this.formData.qrPosition = ''
+      this.formData.qrSize = ''
+      this.formData.logoSize = ''
       this.formData.templateImage = ''
       this.tempList = []
       this.$refs.addCardForm?.clearValidate()
@@ -256,6 +291,7 @@ export default {
           authUserId: '',
           status: 1,
           qrPosition: '',
+          logoSize: '',
           qrSize: ''
         },
         data

src/views/admin/supplier/edit.vue

@@ -25,26 +25,33 @@
         />
       </el-form-item>
 
-      <el-form-item v-if="submitForm.shopType === 1" 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-input
-          v-else
-          v-model="submitForm.shopName"
-          placeholder="请输入供应商名称"
-          maxlength="50"
-          show-word-limit
-          :disabled="editType === 'edit'"
-        />
-      </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-input
+            v-else
+            v-model="submitForm.shopName"
+            placeholder="请输入供应商名称"
+            maxlength="50"
+            show-word-limit
+            :disabled="editType === 'edit'"
+          />
+        </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">
@@ -186,6 +193,10 @@
           </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"
@@ -312,7 +323,8 @@ export default {
         appId: '',
         appSecret: '',
         qrCodeImage: '', // 微信公众号二维码
-        logo: '' // 代理商logo
+        logo: '', // 代理商logo
+        manufacturer: '' // 制造商
       },
       // 表单2
       subForm: {
@@ -324,7 +336,8 @@ export default {
         statementContent: '', // 声明内容
         statementFileId: null, // 声明文件id
         statementImage: '', // 声明图片
-        statementLink: '' // 声明链接
+        statementLink: '', // 声明链接
+        manufacturer: '' // 制造商
       },
       supplierBrands: [],
       brandList: [],
@@ -430,6 +443,7 @@ export default {
         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) {
@@ -504,7 +518,8 @@ export default {
         wxAccountType: 2,
         appId: '',
         appSecret: '',
-        qrCodeImage: '' // 微信公众号二维码
+        qrCodeImage: '', // 微信公众号二维码
+        manufacturer: '' // 制造商
       }
       for (const key in params) {
         if (Object.hasOwnProperty.call(this.submitForm, key)) {
@@ -546,6 +561,7 @@ export default {
           countryId: this.submitForm.countryId,
           brandAuthLogo: this.submitForm.brandAuthLogo,
           securityLink: this.submitForm.securityLink,
+          manufacturer: this.submitForm.manufacturer, // 制造商
           statementType: 1,
           statementContent: '',
           statementFileId: null,
@@ -553,7 +569,6 @@ export default {
           statementLink: ''
         }
       ]
-
       return params
     },
     // 大理上添加
@@ -674,6 +689,7 @@ export default {
     // 添加品牌对话框关闭
     handleDialogAddBrandClosed() {
       this.subForm.securityLink = ''
+      this.subForm.manufacturer = ''
       this.subForm.statementType = 1
       this.statementFileName = ''
       this.statementImageList = []

src/views/normal/club/device/edit.vue

@@ -72,7 +72,7 @@
 
       <!-- **************** 旧方法配置授权牌 START ******************* -->
       <!-- 上传授权牌 -->
-      <el-form-item v-if="formData.addQrCodeFlag === 1" label="授权牌:" prop="certificateImage">
+      <el-form-item label="授权牌:" prop="certificateImage">
         <upload-image
           tip="建议尺寸：542px * 546px"
           :image-list="certificateImageList"
@@ -83,16 +83,16 @@
         <el-input v-model="formData.certificateImage" class="hiddenInput" />
       </el-form-item>
       <!-- 是否生成二维码授权牌 -->
-      <!-- <el-form-item label="生成二维码授权牌:">
+      <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>
       <!-- 二维码授权牌模板 -->
-      <!-- <el-form-item v-if="formData.addQrCodeFlag === 1" label="选择模板:">
+      <el-form-item v-if="formData.addQrCodeFlag === 1" label="选择模板:">
         <auth-card-template v-model="formData.addTemplateType" :image-list="certificateImageList" />
-      </el-form-item> -->
+      </el-form-item>
       <!-- **************** 旧方法配置授权牌 END ******************* -->
 
       <el-form-item label="购买渠道:">
@@ -133,10 +133,10 @@ import { saveProduct, getProductById, fetchProductSelectList } from '@/api/produ
 import { fetchBrandList } from '@/api/brand'
 import { mapGetters } from 'vuex'
 import { isSnCode } from '@/utils/validate'
-// import AuthCardTemplate from '@/views/components/AuthCardTemplate/index.vue'
+import AuthCardTemplate from '@/views/components/AuthCardTemplate/index.vue'
 import { getStorage } from '@/utils/storage'
 export default {
-  components: { UploadImage },
+  components: { UploadImage, AuthCardTemplate },
   data() {
     const valideSNcode = (rules, value, callback) => {
       if (!isSnCode(value)) {

src/views/normal/club/edit.vue

@@ -98,7 +98,7 @@
         <div class="form-label-tip">授权牌logo（提示：授权牌logo与机构名称组合）</div>
         <div style="margin-top: 8px">
           <upload-image
-            tip="建议尺寸：212px * 98px"
+            :tip="authImageLogoUploadTip"
             :image-list="authImageLogoList"
             :before-upload="beforeAuthImageLogoUpload"
             @success="uploadAuthImageLogoSuccess"
@@ -200,6 +200,7 @@ import { saveBrandAuth, getAuthFormData } from '@/api/auth'
 import { getAddress } from '@/api/common'
 import { isPoint, isMobile, isNumber } from '@/utils/validate'
 import { formatDate } from '@/utils'
+import { authTempUsed } from '@/api/system'
 
 export default {
   components: {
@@ -299,7 +300,12 @@ export default {
       // 授权牌照图片列表
       authImageList: [],
       // 授权牌logo列表
-      authImageLogoList: []
+      authImageLogoList: [],
+      // 验证
+      validatorFields: {
+        authImageLogoWidth: 100,
+        authImageLogoHeight: 100
+      }
     }
   },
   computed: {
@@ -330,12 +336,17 @@ export default {
     // 位置坐标
     lnglat() {
       return this.formData.point ? this.formData.point.split(',') : null
+    },
+    // 授权牌logo上传提示
+    authImageLogoUploadTip() {
+      return `限制尺寸：${this.validatorFields.authImageLogoWidth}px *${this.validatorFields.authImageLogoHeight}px`
     }
   },
   created() {
     this.editType = this.$route.query.type || 'add'
     this.authId = this.$route.query.id
     this.initFormData()
+    this.fetchAuthTempUsed()
   },
   methods: {
     // 地图定位
@@ -505,6 +516,25 @@ export default {
       if (node.length <= 0) return
       this.address = node[0].pathLabels.join()
     },
+
+    // 获取当前机构可用授权牌模板
+    async fetchAuthTempUsed() {
+      try {
+        const res = await authTempUsed({
+          authUserId: this.authUserId,
+          authFlag: 1,
+          status: 1
+        })
+        if (res.data) {
+          const [width, height] = res.data.logoSize.split(',')
+          this.validatorFields.authImageLogoWidth = width
+          this.validatorFields.authImageLogoHeight = height
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
     // logo上传
     uploadLogoSuccess({ response, file, fileList }) {
       this.logoList = fileList
@@ -577,11 +607,25 @@ export default {
 
     // 授权牌logo上传
     beforeAuthImageLogoUpload(file) {
-      const flag = file.size / 1024 / 1024 < 5
-      if (!flag) {
-        this.$message.error('上传授权牌图片大小不能超过 5MB!')
-      }
-      return flag
+      return new Promise((resolve, reject) => {
+        if (file.size > 5 * 1024 * 1024) {
+          this.$message.error('授权牌logo图片大小不能超过 5MB!')
+          reject('图片大小超出最大限制')
+        }
+        const image = new Image()
+        image.src = URL.createObjectURL(file)
+        image.onload = (e) => {
+          const { path } = e
+          const { naturalWidth, naturalHeight } = path[0]
+          const { authImageLogoWidth: width, authImageLogoHeight: height } = this.validatorFields
+          if (naturalWidth > width || naturalHeight > height) {
+            this.$message.error('图片尺寸校验未通过')
+            reject('图片尺寸校验未通过')
+          } else {
+            resolve('图片尺寸校验通过')
+          }
+        }
+      })
     },
     uploadAuthImageLogoSuccess({ response, file, fileList }) {
       this.authImageLogoList = fileList

src/views/normal/settings/auth-card/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="app-container">
     <!-- 筛选 -->
-    <div class="filter-container">
+    <!-- <div class="filter-container">
       <div class="filter-control">
-        <el-button type="primary" @click="authTempUpdate">一键生效</el-button>
+        <el-button type="primary" :loading="isLoading" @click="authTempUpdate">
+          <span>{{ isLoading ? '正在更新...' : '一键生效' }}</span>
+        </el-button>
       </div>
-    </div>
-    <div class="tip">提示：请勿频繁更新授权牌模板，如有需要，在更新授权牌模板后点击左上角一键生效按钮即可</div>
+    </div> -->
+    <!-- <div class="tip">提示：请勿频繁更新授权牌模板，如有需要，在更新授权牌模板后点击左上角一键生效按钮即可</div> -->
 
     <!-- 列表 -->
     <el-table v-loading="listLoading" style="width: 100%" header-row-class-name="tableHeader" :data="list" border fit>
@@ -63,11 +65,13 @@ import { authTempSave, authTempUpdate, fetchAuthTempList } from '@/api/system'
 import { mapGetters } from 'vuex'
 
 export default {
+  name: 'NormalSettingsAuthCard',
   components: {
     DragLayout
   },
   data() {
     return {
+      isLoading: false,
       dragDialogVisible: false,
       dragVisible: false,
       listLoading: false,
@@ -95,11 +99,23 @@ export default {
   methods: {
     // 一键生效
     async authTempUpdate() {
+      this.isLoading = true
+      let notification = null
+      notification = this.$notify({
+        title: '提示',
+        message: `模板生效同步中，请勿重复操作！`,
+        duration: 0
+      })
       try {
-        await authTempUpdate({ authUserId: this.authUserId })
+        const res = await authTempUpdate({ authUserId: this.authUserId })
+        console.log(res)
         this.$message.success('模板更新成功')
       } catch (error) {
         console.log(error)
+        this.$message.error(`生效失败，请重试！`)
+      } finally {
+        notification.close()
+        this.isLoading = false
       }
     },