修复机构模板回显效果

src/views/normal/club/components/ClubAuthorizeBrand.vue

@@ -1,7 +1,8 @@
 <template>
   <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
-    <el-form-item label="授权牌:">
+    <el-form-item label="授权牌:" prop="authImageType">
       <el-radio-group v-model="formData.authImageType" size="mini">
+        <el-radio :label="0" border>暂不需要</el-radio>
         <el-radio :label="1" border>模板库生成</el-radio>
         <el-radio :label="2" border>自定义上传</el-radio>
       </el-radio-group>
@@ -16,7 +17,7 @@
           />
           <el-input v-show="false" v-model="formData.authImage" />
         </template>
-        <template v-else>
+        <template v-if="formData.authImageType === 1">
           <template v-if="authTempFlag">
             <preview-image v-if="formData.authImage" width="148px" height="148px" :src="formData.authImage" />
           </template>
@@ -25,7 +26,7 @@
       </div>
     </el-form-item>
 
-    <el-form-item v-if="authTempFlag && formData.authImageType === 1" label="授权牌logo:">
+    <el-form-item v-if="authTempFlag && formData.authImageType === 1" label="授权牌logo:" prop="authImageLogo">
       <div class="form-label-tip">授权牌logo（提示：授权牌logo与机构名称组合）</div>
       <div style="margin-top: 8px">
         <upload-image
@@ -38,11 +39,11 @@
         <el-input v-show="false" v-model="formData.authImageLogo" />
       </div>
     </el-form-item>
-    <el-form-item label="认证编号:" prop="authCode">
+    <el-form-item v-if="formData.authImageType !== 0" label="认证编号:" prop="authCode">
       <el-input v-model="formData.authCode" placeholder="请输认证编号" clearable />
     </el-form-item>
 
-    <el-form-item label="认证日期:" prop="authDate">
+    <el-form-item v-if="formData.authImageType !== 0" label="认证日期:" prop="authDate">
       <el-date-picker v-model="formData.authDate" type="date" placeholder="选择日期" style="width: 100%" />
     </el-form-item>
   </el-form>
@@ -64,12 +65,15 @@ export default {
         // 新增授权牌字段
         authCode: '',
         authDate: '',
-        authImageType: 1,
+        authImageType: 0,
         authImageLogo: '',
         authImage: ''
       },
       rules: {
-        authImageLogo: [{ required: true, message: '请上传授权牌logo', trigger: 'change' }]
+        authImageLogo: [{ required: true, message: '请上传授权牌logo', trigger: 'change' }],
+        authCode: [{ required: true, message: '请填写认证编号', trigger: 'change' }],
+        authDate: [{ required: true, message: '请填写认证日期', trigger: 'change' }],
+        authImageType: [{ required: true, message: '请选择授权牌类型', trigger: 'change' }]
       },
       // 授权牌照图片列表
       authImageList: [],
@@ -91,6 +95,21 @@ export default {
       return `限制尺寸：${this.validatorFields.authImageLogoWidth}px *${this.validatorFields.authImageLogoHeight}px`
     }
   },
+  watch: {
+    'formData.authImageType': {
+      handler(val) {
+        if (val === 1) {
+          this.fetchAuthTempUsed()
+        } else {
+          this.formData.authImageLogo = ''
+          this.formData.authImage = ''
+          this.formData.authCode = ''
+          this.formData.authDate = ''
+        }
+      },
+      deep: true
+    }
+  },
   created() {
     this.fetchAuthTempUsed()
   },
@@ -136,6 +155,10 @@ export default {
           this.validatorFields.authImageLogoWidth = width
           this.validatorFields.authImageLogoHeight = height
           this.authTempFlag = true
+          console.log(res.data)
+          if (this.$route.query.isAdd === 'true') {
+            this.formData.authImage = res.data.templateImage
+          }
         } else {
           this.authTempFlag = false
         }

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

@@ -1,325 +1,349 @@
-<template>
-  <div class="device-edit page-form-container">
-    <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
-      <el-tabs v-model="activeName">
-        <!-- 基础资料 -->
-        <el-tab-pane label="基础资料" name="first">
-          <el-form-item label="设备名称：" prop="productTypeId">
-            <el-select v-model="formData.productTypeId" style="width: 100%" clearable>
-              <el-option
-                v-for="item in productCateList"
-                :key="item.productTypeId"
-                :label="item.name"
-                :value="item.productTypeId"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="设备SN码：" prop="snCode">
-            <el-input v-model="formData.snCode" placeholder="设备SN码" />
-          </el-form-item>
-          <el-form-item label="购买渠道：" prop="purchaseWay">
-            <el-input v-model="formData.purchaseWay" placeholder="购买渠道" />
-          </el-form-item>
-          <el-form-item label="发票：" prop="invoiceImage">
-            <upload-image
-              tip="建议图片分辨率：242px*242px"
-              :limit="1"
-              :image-list="invoiceImageList"
-              :before-upload="beforeInvoiceImageUpload"
-              @success="uploadInvoiceImageSuccess"
-              @remove="handleInvoiceImageRemove"
-            />
-            <el-input v-show="false" v-model="formData.invoiceImage" />
-          </el-form-item>
-          <el-form-item label="认证方式：">
-            <span>{{ authTypeName }}</span>
-          </el-form-item>
-        </el-tab-pane>
-        <!-- 授权牌资料 -->
-        <el-tab-pane label="授权牌资料" name="second">
-          <el-form-item label="授权牌：" prop="certificateImageType">
-            <el-radio-group v-model="formData.certificateImageType" size="mini">
-              <el-radio :label="1">模板库生成</el-radio>
-              <el-radio :label="2">自定义上传</el-radio>
-            </el-radio-group>
-            <template v-if="formData.certificateImageType === 1">
-              <div v-if="authTempFlag">
-                <preview-image v-if="formData.certificateImage" :src="formData.certificateImage" />
-              </div>
-              <div v-else>无</div>
-            </template>
-            <template v-else>
-              <upload-image
-                tip="建议尺寸：150px * 112px"
-                :image-list="certificateImageList"
-                :before-upload="beforeCertificateImageUpload"
-                @success="uploadCertificateImageSuccess"
-                @remove="handleCertificateImageRemove"
-              />
-            </template>
-          </el-form-item>
-          <el-form-item v-if="authTempFlag && formData.certificateImageType === 1" label="授权牌logo:">
-            <div class="form-label-tip">授权牌logo（提示：授权牌logo与机构名称组合）</div>
-            <div style="margin-top: 8px">
-              <upload-image
-                :tip="authImageLogoUploadTip"
-                :image-list="authImageLogoList"
-                :before-upload="beforeAuthImageLogoUpload"
-                @success="uploadAuthImageLogoSuccess"
-                @remove="handleAuthImageLogoRemove"
-              />
-              <el-input v-show="false" v-model="formData.authImageLogo" />
-            </div>
-          </el-form-item>
-          <el-form-item label="认证日期:" prop="authDate">
-            <el-date-picker v-model="formData.authDate" type="date" placeholder="选择日期" style="width: 100%" />
-          </el-form-item>
-
-        </el-tab-pane>
-      </el-tabs>
-
-      <!-- 表单提交 返回 -->
-      <div class="control-box">
-        <el-button type="primary" @click="submit">保存</el-button>
-        <el-button type="warning" @click="navigateBack">返回</el-button>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import UploadImage from '@/components/UploadImage'
-import { fetchProductSelectList, getProductById, saveProduct } from '@/api/product'
-import { isSnCode } from '@/utils/validate'
-import { getStorage } from '@/utils/storage'
-import { authTempUsed } from '@/api/system'
-import { formatDate } from '@/utils'
-export default {
-  components: { UploadImage },
-  data() {
-    const valideSNcode = (rules, value, callback) => {
-      if (!isSnCode(value)) {
-        return callback(new Error('只能是字母+数字组合'))
-      }
-      callback()
-    }
-    return {
-      activeName: 'first',
-      editType: 'add',
-      formData: {
-        authId: '', //	授权id
-        relationId: '',
-        authType: 1, // 认证类型
-        authUserId: '',
-        certificateImage: '', //	授权牌照
-        // 	设备参数
-        productId: '', //	授权设备id
-        snCode: '', //	设备SN码
-        certificateImageType: 1,
-        productTypeId: '',
-        purchaseWay: '', // 购买渠道
-        invoiceImage: '', // 发票
-        authDate: '',
-        authImageLogo: ''
-      },
-      productCateList: [],
-      certificateImageList: [],
-      invoiceImageList: [],
-      rules: {
-        certificateImage: [{ required: true, message: '授权牌照不能为空', trigger: 'change' }],
-        snCode: [{ required: true, message: 'SN码不能为空' }, { validator: valideSNcode }],
-        productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }]
-      },
-      authTempFlag: false,
-      // 验证
-      validatorFields: {
-        authImageLogoWidth: 100,
-        authImageLogoHeight: 100
-      },
-      authImageLogoList: []
-    }
-  },
-  computed: {
-    authTypeName() {
-      return this.formData.authType === 1 ? '新设备认证' : '关联已认证设备'
-    },
-    // 授权牌logo上传提示
-    authImageLogoUploadTip() {
-      return `限制尺寸：${this.validatorFields.authImageLogoWidth}px *${this.validatorFields.authImageLogoHeight}px`
-    }
-  },
-  created() {
-    this.editType = this.$route.query.type || 'add'
-    this.formData.relationId = this.$route.query.relationId
-    this.formData.productId = this.$route.query.id
-    // 获取当前设备所属机构的id
-    this.formData.authId = getStorage('device-setting-authId')
-    this.fetchProductCateList()
-    if (this.editType === 'edit') {
-      this.fetchProductDetail()
-    }
-    this.fetchAuthTempUsed()
-  },
-  methods: {
-    // 提交
-    async submit() {
-      try {
-        await this.$refs.form.validate()
-        this.onSave()
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 保存
-    async onSave() {
-      try {
-        this.formData.authDate = this.formData.authDate ? formatDate(this.formData.authDate, 'yyyy.MM.DD') : ''
-        await saveProduct(this.formData)
-        const h = this.$createElement
-        const tip = this.editType === 'add' ? '添加' : '修改'
-        this.$notify.success({
-          title: tip + '设备',
-          message: h('i', { style: 'color: #333' }, `已${tip}设备`),
-          duration: 2000
-        })
-        this.$store.dispatch('tagsView/delView', this.$route)
-        this.$router.push(`/club/device-list?id=${this.formData.authId}`)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 获取设备信息
-    async fetchProductDetail() {
-      try {
-        const { productId, relationId } = this.formData
-        const res = await getProductById({ productId, relationId })
-        this.initFormData(res.data)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 初始化表单数据
-    initFormData(data) {
-      for (const key in this.formData) {
-        if (Object.hasOwnProperty.call(data, key)) {
-          if (key === 'productTypeId') {
-            this.formData[key] = parseInt(data[key])
-          } else {
-            this.formData[key] = data[key]
-          }
-        }
-
-        this.formData.authImageLogo = data.authImageLogo
-        if (data.authImageLogo) {
-          this.authImageLogoList = [{ name: '授权牌logo', url: data.authImageLogo }]
-        }
-      }
-      if (data.invoiceImage) {
-        this.invoiceImageList = [{ name: '发票', url: data.invoiceImage }]
-      }
-      if (data.certificateImage) {
-        this.certificateImageList = [{ name: '授权牌图片', url: data.certificateImage }]
-      }
-    },
-
-    // 获取设备分类列表
-    async fetchProductCateList() {
-      try {
-        const res = await fetchProductSelectList({ authUserId: this.authUserId })
-        this.productCateList = res.data
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 获取当前机构可用授权牌模板
-    async fetchAuthTempUsed() {
-      try {
-        const res = await authTempUsed({
-          authUserId: this.authUserId,
-          authFlag: 1,
-          status: 1
-        })
-        this.authTempFlag = res.data != null
-        const [width, height] = res.data.logoSize.split(',')
-        this.validatorFields.authImageLogoWidth = width
-        this.validatorFields.authImageLogoHeight = height
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 授权牌照上传
-    beforeCertificateImageUpload(file) {
-      const flag = file.size / 1024 / 1024 < 1
-      if (!flag) {
-        this.$message.error('上传授权牌图片大小不能超过 1MB!')
-      }
-      return flag
-    },
-    uploadCertificateImageSuccess({ response, file, fileList }) {
-      this.certificateImageList = fileList
-      this.formData.certificateImage = response.data
-    },
-    handleCertificateImageRemove({ file, fileList }) {
-      this.certificateImageList = fileList
-      this.formData.certificateImage = ''
-    },
-
-    // 发票上传
-    beforeInvoiceImageUpload(file) {
-      const flag = file.size / 1024 / 1024 < 1
-      if (!flag) {
-        this.$message.error('上传授权牌图片大小不能超过 1MB!')
-      }
-      return flag
-    },
-    uploadInvoiceImageSuccess({ response, file, fileList }) {
-      this.invoiceImageList = fileList
-      this.formData.invoiceImage = response.data
-    },
-    handleInvoiceImageRemove({ file, fileList }) {
-      this.invoiceImageList = fileList
-      this.formData.invoiceImage = ''
-    },
-    // 授权牌logo上传
-    beforeAuthImageLogoUpload(file) {
-      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 { naturalWidth, naturalHeight } = e.path ? e.path[0] : e.target
-          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
-      this.formData.authImageLogo = response.data
-    },
-    handleAuthImageLogoRemove({ file, fileList }) {
-      this.authImageLogoList = fileList
-      this.formData.authImageLogo = ''
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-tab-pane {
-  margin-top: 24px;
-}
-</style>
+<template>
+  <div class="device-edit page-form-container">
+    <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
+      <el-tabs v-model="activeName">
+        <!-- 基础资料 -->
+        <el-tab-pane label="基础资料" name="first">
+          <el-form-item label="设备名称：" prop="productTypeId">
+            <el-select v-model="formData.productTypeId" style="width: 100%" clearable>
+              <el-option
+                v-for="item in productCateList"
+                :key="item.productTypeId"
+                :label="item.name"
+                :value="item.productTypeId"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备SN码：" prop="snCode">
+            <el-input v-model="formData.snCode" placeholder="设备SN码" />
+          </el-form-item>
+          <el-form-item label="购买渠道：" prop="purchaseWay">
+            <el-input v-model="formData.purchaseWay" placeholder="购买渠道" />
+          </el-form-item>
+          <el-form-item label="发票：" prop="invoiceImage">
+            <upload-image
+              tip="建议图片分辨率：242px*242px"
+              :limit="1"
+              :image-list="invoiceImageList"
+              :before-upload="beforeInvoiceImageUpload"
+              @success="uploadInvoiceImageSuccess"
+              @remove="handleInvoiceImageRemove"
+            />
+            <el-input v-show="false" v-model="formData.invoiceImage" />
+          </el-form-item>
+          <el-form-item label="认证方式：">
+            <span>{{ authTypeName }}</span>
+          </el-form-item>
+        </el-tab-pane>
+        <!-- 授权牌资料 -->
+        <el-tab-pane label="授权牌资料" name="second">
+          <el-form-item label="授权牌：" prop="certificateImageType">
+            <el-radio-group v-model="formData.certificateImageType" size="mini">
+              <el-radio :label="0">暂不需要</el-radio>
+              <el-radio :label="1">模板库生成</el-radio>
+              <el-radio :label="2">自定义上传</el-radio>
+            </el-radio-group>
+            <template v-if="formData.certificateImageType === 1">
+              <div v-if="authTempFlag">
+                <preview-image v-if="formData.certificateImage" :src="formData.certificateImage" />
+              </div>
+              <div v-else>无</div>
+            </template>
+            <template v-if="formData.certificateImageType === 2">
+              <upload-image
+                tip="建议尺寸：150px * 112px"
+                :image-list="certificateImageList"
+                :before-upload="beforeCertificateImageUpload"
+                @success="uploadCertificateImageSuccess"
+                @remove="handleCertificateImageRemove"
+              />
+            </template>
+          </el-form-item>
+          <el-form-item v-if="authTempFlag && formData.certificateImageType === 1" label="授权牌logo:" prop="authImageLogo">
+            <div class="form-label-tip">授权牌logo（提示：授权牌logo与机构名称组合）</div>
+            <div style="margin-top: 8px">
+              <upload-image
+                :tip="authImageLogoUploadTip"
+                :image-list="authImageLogoList"
+                :before-upload="beforeAuthImageLogoUpload"
+                @success="uploadAuthImageLogoSuccess"
+                @remove="handleAuthImageLogoRemove"
+              />
+              <el-input v-show="false" v-model="formData.authImageLogo" />
+            </div>
+          </el-form-item>
+          <el-form-item v-if="formData.certificateImageType !== 0" label="认证日期:" prop="authDate">
+            <el-date-picker v-model="formData.authDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 表单提交 返回 -->
+      <div class="control-box">
+        <el-button type="primary" @click="submit">保存</el-button>
+        <el-button type="warning" @click="navigateBack">返回</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import UploadImage from '@/components/UploadImage'
+import { fetchProductSelectList, getProductById, saveProduct } from '@/api/product'
+import { isSnCode } from '@/utils/validate'
+import { getStorage } from '@/utils/storage'
+import { authTempUsed } from '@/api/system'
+import { formatDate } from '@/utils'
+export default {
+  components: { UploadImage },
+  data() {
+    const valideSNcode = (rules, value, callback) => {
+      if (!isSnCode(value)) {
+        return callback(new Error('只能是字母+数字组合'))
+      }
+      callback()
+    }
+    return {
+      activeName: 'first',
+      editType: 'add',
+      formData: {
+        authId: '', //	授权id
+        relationId: '',
+        authType: 1, // 认证类型
+        authUserId: '',
+        certificateImage: '', //	授权牌照
+        // 	设备参数
+        productId: '', //	授权设备id
+        snCode: '', //	设备SN码
+        certificateImageType: 0,
+        productTypeId: '',
+        purchaseWay: '', // 购买渠道
+        invoiceImage: '', // 发票
+        authDate: '',
+        authImageLogo: ''
+      },
+      productCateList: [],
+      certificateImageList: [],
+      invoiceImageList: [],
+      rules: {
+        certificateImage: [{ required: true, message: '授权牌照不能为空', trigger: 'change' }],
+        certificateImageType: [{ required: true, message: '授权牌照不能为空', trigger: 'change' }],
+        snCode: [{ required: true, message: 'SN码不能为空' }, { validator: valideSNcode }],
+        productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }],
+        // purchaseWay: [{ required: true, message: '购买渠道不能为空', trigger: 'change' }],
+        invoiceImage: [{ required: true, message: '发票不能为空', trigger: 'change' }],
+        authDate: [{ required: true, message: '认证日期不能为空', trigger: 'change' }],
+        authImageLogo: [{ required: true, message: '授权牌logo不能为空', trigger: 'change' }]
+      },
+      authTempFlag: true,
+      // 验证
+      validatorFields: {
+        authImageLogoWidth: 100,
+        authImageLogoHeight: 100
+      },
+      authImageLogoList: []
+    }
+  },
+  computed: {
+    authTypeName() {
+      return this.formData.authType === 1 ? '新设备认证' : '关联已认证设备'
+    },
+    // 授权牌logo上传提示
+    authImageLogoUploadTip() {
+      return `限制尺寸：${this.validatorFields.authImageLogoWidth}px *${this.validatorFields.authImageLogoHeight}px`
+    }
+  },
+  watch: {
+    'formData.certificateImageType': {
+      handler(val) {
+        if (val === 1) {
+          this.fetchAuthTempUsed()
+        } else {
+          this.formData.certificateImage = ''
+          this.formData.authDate = ''
+        }
+        console.log(this.formData)
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.editType = this.$route.query.type || 'add'
+    this.formData.relationId = this.$route.query.relationId
+    this.formData.productId = this.$route.query.id
+    // 获取当前设备所属机构的id
+    this.formData.authId = getStorage('device-setting-authId')
+    this.fetchProductCateList()
+    if (this.editType === 'edit') {
+      this.fetchProductDetail()
+    }
+    this.fetchAuthTempUsed()
+  },
+  methods: {
+    // 提交
+    async submit() {
+      try {
+        await this.$refs.form.validate()
+        this.onSave()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 保存
+    async onSave() {
+      try {
+        this.formData.authDate = this.formData.authDate ? formatDate(this.formData.authDate, 'yyyy.MM.DD') : ''
+        await saveProduct(this.formData)
+        const h = this.$createElement
+        const tip = this.editType === 'add' ? '添加' : '修改'
+        this.$notify.success({
+          title: tip + '设备',
+          message: h('i', { style: 'color: #333' }, `已${tip}设备`),
+          duration: 2000
+        })
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.push(`/club/device-list?id=${this.formData.authId}`)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 获取设备信息
+    async fetchProductDetail() {
+      try {
+        const { productId, relationId } = this.formData
+        const res = await getProductById({ productId, relationId })
+        this.initFormData(res.data)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 初始化表单数据
+    initFormData(data) {
+      for (const key in this.formData) {
+        if (Object.hasOwnProperty.call(data, key)) {
+          if (key === 'productTypeId') {
+            this.formData[key] = parseInt(data[key])
+          } else {
+            this.formData[key] = data[key]
+          }
+        }
+
+        this.formData.authImageLogo = data.authImageLogo
+        if (data.authImageLogo) {
+          this.authImageLogoList = [{ name: '授权牌logo', url: data.authImageLogo }]
+        }
+      }
+      if (data.invoiceImage) {
+        this.invoiceImageList = [{ name: '发票', url: data.invoiceImage }]
+      }
+      if (data.certificateImage) {
+        this.certificateImageList = [{ name: '授权牌图片', url: data.certificateImage }]
+      }
+    },
+
+    // 获取设备分类列表
+    async fetchProductCateList() {
+      try {
+        const res = await fetchProductSelectList({ authUserId: this.authUserId })
+        this.productCateList = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 获取当前机构可用授权牌模板
+    async fetchAuthTempUsed() {
+      try {
+        const res = await authTempUsed({
+          authUserId: this.authUserId,
+          authFlag: 1,
+          status: 1
+        })
+        this.authTempFlag = !!res.data.templateImage
+        console.log(this.authTempFlag)
+        if (this.$route.query.isAdd === 'true') {
+          this.formData.certificateImage = res.data.templateImage
+        }
+        const [width, height] = res.data.logoSize.split(',')
+        this.validatorFields.authImageLogoWidth = width
+        this.validatorFields.authImageLogoHeight = height
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 授权牌照上传
+    beforeCertificateImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 1
+      if (!flag) {
+        this.$message.error('上传授权牌图片大小不能超过 1MB!')
+      }
+      return flag
+    },
+    uploadCertificateImageSuccess({ response, file, fileList }) {
+      this.certificateImageList = fileList
+      this.formData.certificateImage = response.data
+    },
+    handleCertificateImageRemove({ file, fileList }) {
+      this.certificateImageList = fileList
+      this.formData.certificateImage = ''
+    },
+
+    // 发票上传
+    beforeInvoiceImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 1
+      if (!flag) {
+        this.$message.error('上传授权牌图片大小不能超过 1MB!')
+      }
+      return flag
+    },
+    uploadInvoiceImageSuccess({ response, file, fileList }) {
+      this.invoiceImageList = fileList
+      this.formData.invoiceImage = response.data
+    },
+    handleInvoiceImageRemove({ file, fileList }) {
+      this.invoiceImageList = fileList
+      this.formData.invoiceImage = ''
+    },
+    // 授权牌logo上传
+    beforeAuthImageLogoUpload(file) {
+      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 { naturalWidth, naturalHeight } = e.path ? e.path[0] : e.target
+          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
+      this.formData.authImageLogo = response.data
+    },
+    handleAuthImageLogoRemove({ file, fileList }) {
+      this.authImageLogoList = fileList
+      this.formData.authImageLogo = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-tab-pane {
+  margin-top: 24px;
+}
+</style>

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

@@ -1,305 +1,305 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-control">
-        <span>设备名称:</span>
-        <el-input v-model="listQuery.productName" placeholder="设备名称" @keyup.enter.native="handleFilter" />
-      </div>
-      <div class="filter-control">
-        <span>设备SN码:</span>
-        <el-input v-model="listQuery.snCode" placeholder="设备SN码" @keyup.enter.native="handleFilter" />
-      </div>
-      <div class="filter-control">
-        <span>审核状态:</span>
-        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
-          <el-option label="全部" value="" />
-          <el-option label="待审核" :value="2" />
-          <el-option label="审核通过" :value="1" />
-          <el-option label="审核未通过" :value="0" />
-        </el-select>
-      </div>
-      <div class="filter-control">
-        <span>上线状态:</span>
-        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
-          <el-option label="全部" value="" />
-          <el-option label="已上线" :value="1" />
-          <el-option label="待上线" :value="2" />
-          <el-option label="未上线" :value="0" />
-        </el-select>
-      </div>
-      <div class="filter-control">
-        <permission-button type="primary" @click="handleFilter">查询</permission-button>
-        <permission-button
-          type="primary"
-          @click="navigationTo(`device-add?type=add`)"
-        >添加新设备认证</permission-button>
-        <permission-button type="primary" @click="navigationTo(`device-bind`)">关联已认证设备</permission-button>
-      </div>
-    </div>
-    <!-- 表格区域 -->
-    <el-table
-      :key="tableKey"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      header-row-class-name="tableHeader"
-    >
-      <el-table-column label="序号" :index="indexMethod" type="index" align="center" width="80" />
-      <el-table-column label="设备名称" align="center" prop="productName" />
-      <el-table-column label="设备SN码" align="center" prop="snCode" />
-
-      <el-table-column label="审核状态" width="120px" align="center">
-        <template slot-scope="{ row }">
-          <audit-status :status="row.auditStatus" :reason="row.invalidReason" />
-        </template>
-      </el-table-column>
-
-      <el-table-column label="上线状态" width="160px" align="center">
-        <template slot-scope="{ row }">
-          <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
-          <template v-if="row.auditStatus === 1">
-            <template v-if="row.status === 0">
-              <span style="margin-right: 10px" class="status danger">已下线</span>
-              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上架</permission-button>
-            </template>
-            <template v-else>
-              <span style="margin-right: 10px" class="status success">已上线</span>
-              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下架</permission-button>
-            </template>
-          </template>
-          <template v-else>
-            <!-- <el-tag type="warning">待上线</el-tag> -->
-            <span style="margin-right: 10px" class="status warning">待上线</span>
-          </template>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="访问次数" align="center" prop="scanCount" width="80" />
-
-      <el-table-column label="创建时间" class-name="status-col" width="160px" align="center">
-        <template slot-scope="{ row }">
-          <span>{{ row.createTime | formatTime }}</span>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
-      <el-table-column label="操作" align="center" width="340px" class-name="small-padding fixed-width">
-        <template slot-scope="{ row }">
-          <permission-button
-            type="primary"
-            size="mini"
-            @click="navigationTo(`device-edit?type=edit&id=${row.productId}&relationId=${row.relationId}`)"
-          >
-            编辑
-          </permission-button>
-          <permission-button v-if="row.auditStatus === 1" type="primary" size="mini" @click="handleShowQRcode(row)">
-            二维码
-          </permission-button>
-          <permission-button v-else type="info" size="mini" disabled> 二维码 </permission-button>
-          <permission-button type="primary" size="mini" @click="fetchDeviceAssClubList(row)">
-            其他关联机构
-          </permission-button>
-          <permission-button type="danger" size="mini" @click="handleRemoveProduct(row)"> 删除 </permission-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 页码 -->
-    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
-
-    <!-- 二维码 -->
-    <transition name="fade">
-      <qrcode-device v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
-    </transition>
-
-    <!-- 关联机构 -->
-    <el-dialog title="其他关联机构" :visible.sync="dialogClubVisible" width="30%">
-      <associated-club-list
-        class="associated-club-list"
-        :selection="false"
-        :control="true"
-        :show-filter="false"
-        height="300"
-        :list="assClubList"
-      >
-        <template #control="{ row }">
-          <el-button size="mini" type="primary" @click="onToClubDetail(row)">查看</el-button>
-        </template>
-      </associated-club-list>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { getProdList, setProductStatus, removeProduct, fetchDeviceAssClubList } from '@/api/product'
-import { AssociatedClubList } from '@/views/components/index'
-import QrcodeDevice from '@/components/QrcodeDevice'
-import { mapGetters } from 'vuex'
-import { setStorage } from '@/utils/storage'
-export default {
-  name: 'ComplexTable',
-  components: { QrcodeDevice, AssociatedClubList },
-  data() {
-    return {
-      authParty: '',
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listQuery: {
-        status: '',
-        auditStatus: '',
-        authId: '',
-        productName: '',
-        snCode: '',
-        pageNum: 1,
-        pageSize: 10
-      },
-      showQRcode: false,
-      productInfo: {},
-      // 审核未通过
-      auditFailedList: [],
-      auditNoticeFlag: true,
-      dialogClubVisible: false,
-      assClubList: []
-    }
-  },
-  computed: {
-    ...mapGetters(['userIdentity'])
-  },
-  created() {
-    this.initPage()
-  },
-
-  activated() {
-    this.initPage()
-  },
-
-  methods: {
-    initPage() {
-      this.listQuery.authId = this.$route.query.id
-      this.authParty = this.$route.query.authParty
-      // 保存机构id，用于设备管理
-      setStorage('device-setting-authId', this.listQuery.authId)
-      this.getList()
-    },
-
-    // 机构详情
-    onToClubDetail(row) {
-      this.dialogClubVisible = false
-      const fullPath = `/club/device-list?id=${row.authId}`
-      this.$router.replace({
-        path: '/redirect' + fullPath
-      })
-    },
-
-    // 获取设备关联机构列表
-    async fetchDeviceAssClubList(row) {
-      try {
-        const res = await fetchDeviceAssClubList({ snCode: row.snCode })
-        this.assClubList = res.data
-        this.dialogClubVisible = true
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 获取列表信息
-    getList() {
-      getProdList(this.listQuery)
-        .then((res) => {
-          const { total, list } = res.data
-          this.total = total
-          this.list = list
-          // this.checkAuditFailedList(list)
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    },
-    // 过滤列表
-    handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
-    },
-    // 改变启用状态
-    handleChangeStatus(item) {
-      if (this.userIdentity === 2 || this.proxyInfo !== null) {
-        const { status, productId } = item
-        const newStatus = status === 0 ? 1 : 0
-        setProductStatus({ status: newStatus, productId })
-          .then((res) => {
-            // this.$message.success(res.data)
-            this.$message({
-              message: '操作成功',
-              duration: 500,
-              type: 'success'
-            })
-          })
-          .catch((error) => {
-            console.log(error)
-          })
-          .finally(() => {
-            this.getList()
-          })
-      }
-    },
-    // 删除商品
-    async handleRemoveProduct(item) {
-      const text = await this.$confirm(
-        '确定删除该设备认证吗？删除后，其他机构已关联此设备认证的也将一并删除，请慎重操作。',
-        '提示',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }
-      ).catch(() => {
-        this.$message.info('已取消操作')
-      })
-      if (text !== 'confirm') return
-
-      removeProduct({ productId: item.productId })
-        .then((res) => {
-          const h = this.$createElement
-          this.$notify.success({
-            title: '删除商品',
-            message: h('i', { style: 'color: #333' }, `已删除商品："${item.productName}"`),
-            duration: 2000
-          })
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-        .finally(() => {
-          this.getList()
-        })
-    },
-    // 显示二维码
-    handleShowQRcode(item) {
-      this.productInfo = item
-      this.productInfo.authParty = this.authParty
-      this.showQRcode = true
-    },
-    // 获取审核未通过条数
-    // Audit failed 审核未通过
-    checkAuditFailedList(data) {
-      this.auditFailedList = data.filter((item) => item.auditStatus === 0)
-      if (this.auditFailedList.length > 0 && this.auditNoticeFlag) {
-        this.$notify.info({
-          title: '消息通知',
-          dangerouslyUseHTMLString: true,
-          message: `共有<b style="color:red">${this.auditFailedList.length}</b>件商品未能通过审核，请查看原因并及时修改！`,
-          duration: 3000
-        })
-        this.auditNoticeFlag = false
-      }
-    },
-    indexMethod(index) {
-      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>设备名称:</span>
+        <el-input v-model="listQuery.productName" placeholder="设备名称" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>设备SN码:</span>
+        <el-input v-model="listQuery.snCode" placeholder="设备SN码" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <permission-button type="primary" @click="handleFilter">查询</permission-button>
+        <permission-button
+          type="primary"
+          @click="navigationTo(`device-add?type=add&isAdd=true`)"
+        >添加新设备认证</permission-button>
+        <permission-button type="primary" @click="navigationTo(`device-bind`)">关联已认证设备</permission-button>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table
+      :key="tableKey"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      header-row-class-name="tableHeader"
+    >
+      <el-table-column label="序号" :index="indexMethod" type="index" align="center" width="80" />
+      <el-table-column label="设备名称" align="center" prop="productName" />
+      <el-table-column label="设备SN码" align="center" prop="snCode" />
+
+      <el-table-column label="审核状态" width="120px" align="center">
+        <template slot-scope="{ row }">
+          <audit-status :status="row.auditStatus" :reason="row.invalidReason" />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="上线状态" width="160px" align="center">
+        <template slot-scope="{ row }">
+          <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
+          <template v-if="row.auditStatus === 1">
+            <template v-if="row.status === 0">
+              <span style="margin-right: 10px" class="status danger">已下线</span>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上架</permission-button>
+            </template>
+            <template v-else>
+              <span style="margin-right: 10px" class="status success">已上线</span>
+              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下架</permission-button>
+            </template>
+          </template>
+          <template v-else>
+            <!-- <el-tag type="warning">待上线</el-tag> -->
+            <span style="margin-right: 10px" class="status warning">待上线</span>
+          </template>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="访问次数" align="center" prop="scanCount" width="80" />
+
+      <el-table-column label="创建时间" class-name="status-col" width="160px" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.createTime | formatTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
+      <el-table-column label="操作" align="center" width="340px" class-name="small-padding fixed-width">
+        <template slot-scope="{ row }">
+          <permission-button
+            type="primary"
+            size="mini"
+            @click="navigationTo(`device-edit?type=edit&id=${row.productId}&relationId=${row.relationId}&&isAdd=false`)"
+          >
+            编辑
+          </permission-button>
+          <permission-button v-if="row.auditStatus === 1" type="primary" size="mini" @click="handleShowQRcode(row)">
+            二维码
+          </permission-button>
+          <permission-button v-else type="info" size="mini" disabled> 二维码 </permission-button>
+          <permission-button type="primary" size="mini" @click="fetchDeviceAssClubList(row)">
+            其他关联机构
+          </permission-button>
+          <permission-button type="danger" size="mini" @click="handleRemoveProduct(row)"> 删除 </permission-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
+    <!-- 二维码 -->
+    <transition name="fade">
+      <qrcode-device v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
+    </transition>
+
+    <!-- 关联机构 -->
+    <el-dialog title="其他关联机构" :visible.sync="dialogClubVisible" width="30%">
+      <associated-club-list
+        class="associated-club-list"
+        :selection="false"
+        :control="true"
+        :show-filter="false"
+        height="300"
+        :list="assClubList"
+      >
+        <template #control="{ row }">
+          <el-button size="mini" type="primary" @click="onToClubDetail(row)">查看</el-button>
+        </template>
+      </associated-club-list>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getProdList, setProductStatus, removeProduct, fetchDeviceAssClubList } from '@/api/product'
+import { AssociatedClubList } from '@/views/components/index'
+import QrcodeDevice from '@/components/QrcodeDevice'
+import { mapGetters } from 'vuex'
+import { setStorage } from '@/utils/storage'
+export default {
+  name: 'ComplexTable',
+  components: { QrcodeDevice, AssociatedClubList },
+  data() {
+    return {
+      authParty: '',
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listQuery: {
+        status: '',
+        auditStatus: '',
+        authId: '',
+        productName: '',
+        snCode: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      showQRcode: false,
+      productInfo: {},
+      // 审核未通过
+      auditFailedList: [],
+      auditNoticeFlag: true,
+      dialogClubVisible: false,
+      assClubList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['userIdentity'])
+  },
+  created() {
+    this.initPage()
+  },
+
+  activated() {
+    this.initPage()
+  },
+
+  methods: {
+    initPage() {
+      this.listQuery.authId = this.$route.query.id
+      this.authParty = this.$route.query.authParty
+      // 保存机构id，用于设备管理
+      setStorage('device-setting-authId', this.listQuery.authId)
+      this.getList()
+    },
+
+    // 机构详情
+    onToClubDetail(row) {
+      this.dialogClubVisible = false
+      const fullPath = `/club/device-list?id=${row.authId}`
+      this.$router.replace({
+        path: '/redirect' + fullPath
+      })
+    },
+
+    // 获取设备关联机构列表
+    async fetchDeviceAssClubList(row) {
+      try {
+        const res = await fetchDeviceAssClubList({ snCode: row.snCode })
+        this.assClubList = res.data
+        this.dialogClubVisible = true
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 获取列表信息
+    getList() {
+      getProdList(this.listQuery)
+        .then((res) => {
+          const { total, list } = res.data
+          this.total = total
+          this.list = list
+          // this.checkAuditFailedList(list)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    // 过滤列表
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    // 改变启用状态
+    handleChangeStatus(item) {
+      if (this.userIdentity === 2 || this.proxyInfo !== null) {
+        const { status, productId } = item
+        const newStatus = status === 0 ? 1 : 0
+        setProductStatus({ status: newStatus, productId })
+          .then((res) => {
+            // this.$message.success(res.data)
+            this.$message({
+              message: '操作成功',
+              duration: 500,
+              type: 'success'
+            })
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+          .finally(() => {
+            this.getList()
+          })
+      }
+    },
+    // 删除商品
+    async handleRemoveProduct(item) {
+      const text = await this.$confirm(
+        '确定删除该设备认证吗？删除后，其他机构已关联此设备认证的也将一并删除，请慎重操作。',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(() => {
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+
+      removeProduct({ productId: item.productId })
+        .then((res) => {
+          const h = this.$createElement
+          this.$notify.success({
+            title: '删除商品',
+            message: h('i', { style: 'color: #333' }, `已删除商品："${item.productName}"`),
+            duration: 2000
+          })
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+        .finally(() => {
+          this.getList()
+        })
+    },
+    // 显示二维码
+    handleShowQRcode(item) {
+      this.productInfo = item
+      this.productInfo.authParty = this.authParty
+      this.showQRcode = true
+    },
+    // 获取审核未通过条数
+    // Audit failed 审核未通过
+    checkAuditFailedList(data) {
+      this.auditFailedList = data.filter((item) => item.auditStatus === 0)
+      if (this.auditFailedList.length > 0 && this.auditNoticeFlag) {
+        this.$notify.info({
+          title: '消息通知',
+          dangerouslyUseHTMLString: true,
+          message: `共有<b style="color:red">${this.auditFailedList.length}</b>件商品未能通过审核，请查看原因并及时修改！`,
+          duration: 3000
+        })
+        this.auditNoticeFlag = false
+      }
+    },
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/normal/club/index.vue

@@ -1,565 +1,565 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-control">
-        <span>机构名称:</span>
-        <el-input v-model="listQuery.authParty" placeholder="机构名称" @keyup.enter.native="handleFilter" />
-      </div>
-      <div class="filter-control">
-        <span>审核状态:</span>
-        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
-          <el-option label="全部" value="" />
-          <el-option label="待审核" :value="2" />
-          <el-option label="审核通过" :value="1" />
-          <el-option label="审核未通过" :value="0" />
-        </el-select>
-      </div>
-      <div class="filter-control">
-        <span>上线状态:</span>
-        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
-          <el-option label="全部" value="" />
-          <el-option label="已上线" :value="1" />
-          <el-option label="待上线" :value="2" />
-          <el-option label="未上线" :value="0" />
-        </el-select>
-      </div>
-      <div class="filter-control">
-        <span>明星机构</span>
-        <el-checkbox v-model="listQuery.starFlag" :true-label="1" :false-label="null" @change="getList" />
-      </div>
-      <div class="filter-control">
-        <span>设备名称:</span>
-        <el-input v-model="listQuery.name" placeholder="设备名称" @keyup.enter.native="handleFilter" />
-      </div>
-      <div class="filter-control">
-        <span>设备SN码:</span>
-        <el-input v-model="listQuery.snCode" placeholder="设备SN码" @keyup.enter.native="handleFilter" />
-      </div>
-      <div class="filter-control">
-        <permission-button type="primary" @click="getList">查询</permission-button>
-        <permission-button type="primary" @click="navigationTo('club-add?type=edit')">添加</permission-button>
-      </div>
-      <div class="filter-control">
-        <permission-button type="primary" @click="downLoadTemplate">机构导入模板</permission-button>
-      </div>
-      <!-- 机构设备信息导出  -->
-      <div class="filter-control">
-        <permission-button type="primary" @click="improtDialogVisible = true">导入机构信息</permission-button>
-        <permission-button type="primary" @click="onHandleExport(5)">导出机构信息</permission-button>
-        <permission-button type="primary" @click="onHandleExport(6)">导出设备信息</permission-button>
-      </div>
-      <!-- 机构设备授权牌导出 -->
-      <div class="filter-control">
-        <permission-button type="primary" @click="onHandleExport(1)">下载机构授权牌</permission-button>
-        <permission-button type="primary" @click="onHandleExport(2)">下载设备授权牌</permission-button>
-      </div>
-      <!-- 机构设备二维码下载 -->
-      <div class="filter-control">
-        <permission-button type="primary" @click="onHandleExport(3)">一键下载机构二维码</permission-button>
-        <permission-button type="primary" @click="onHandleExport(4)">一键下载设备二维码</permission-button>
-      </div>
-    </div>
-    <!-- 表格区域 -->
-    <el-table
-      :key="tableKey"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      header-row-class-name="tableHeader"
-    >
-      <el-table-column label="序号" :index="indexMethod" align="center" width="80" type="index" />
-
-      <el-table-column label="机构名称" align="center" prop="authParty" />
-
-      <el-table-column label="审核状态" width="120px" align="center">
-        <template slot-scope="{ row }">
-          <audit-status :status="row.auditStatus" :reason="row.invalidReason" />
-        </template>
-      </el-table-column>
-
-      <el-table-column label="上线状态" width="160px" align="center">
-        <template slot-scope="{ row }">
-          <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
-          <template v-if="row.auditStatus === 1">
-            <template v-if="row.status === 0">
-              <span style="margin-right: 10px" class="status danger">已下线</span>
-              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
-            </template>
-            <template v-else>
-              <span style="margin-right: 10px" class="status success">已上线</span>
-              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
-            </template>
-          </template>
-          <template v-else>
-            <span style="margin-right: 10px" class="status warning">待上线</span>
-          </template>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="访问次数" align="center" prop="scanCount" width="80" />
-
-      <el-table-column label="明星机构/排序" align="center" width="160">
-        <template slot-scope="{ row }">
-          <div class="star-sort">
-            <el-checkbox v-model="row.starFlag" :true-label="1" :false-label="0" @change="onStarChange(row, $event)" />
-            <el-input
-              v-model="row.starNum"
-              placeholder="排序"
-              size="mini"
-              maxlength="20"
-              @blur="onStarChange(row, row.starFlag)"
-              @input="filterNotNumber(row)"
-            />
-          </div>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="创建时间" class-name="status-col" width="160px">
-        <template slot-scope="{ row }">
-          <span>{{ row.createTime | formatTime }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="创建人" class-name="status-col" width="180px" prop="createBy" />
-      <el-table-column label="操作" align="center" width="430px" class-name="small-padding fixed-width">
-        <template slot-scope="{ row }">
-          <permission-button type="primary" size="mini" @click="navigationTo(`club-edit?type=edit&id=${row.authId}`)">
-            编辑
-          </permission-button>
-          <!-- <permission-button type="danger" size="mini" @click="handleRemoveAuth(row)"> 删除 </permission-button> -->
-          <permission-button type="primary" size="mini" @click="navigationTo(`device-list?id=${row.authId}`)">
-            设备认证
-          </permission-button>
-          <permission-button type="primary" size="mini" :disabled="row.status !== 1" @click="createClubQrcode(row)">
-            二维码
-          </permission-button>
-          <permission-button type="primary" size="mini" @click="cotyClubLink($event, row)">
-            复制注册链接
-          </permission-button>
-          <permission-button
-            type="primary"
-            size="mini"
-            :disabled="row.status !== 1 || row.sendStatus === 0"
-            @click="navigationTo(`logistics-licensed?id=${row.authId}`)"
-          >
-            授权牌物流
-          </permission-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 页码 -->
-    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
-
-    <!-- 导入对话框 -->
-    <el-dialog title="导入" :visible.sync="improtDialogVisible" width="30%" @close="improtDialogClose">
-      <el-form ref="dialogForm" :model="improtDialogFormData" label-width="86px" :rules="improtDialogFormRules">
-        <el-form-item label="文件路径:" prop="fileUrl">
-          <file-upload ref="fileUpload" :file-list="uploadFileList" @change="fileUploadChange" />
-          <el-input v-show="false" v-model="improtDialogFormData.fileUrl" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <permission-button @click="improtDialogVisible = false">取 消</permission-button>
-        <permission-button
-          type="primary"
-          :disabled="!saveBtnClickable"
-          :loading="requestLoading"
-          @click="submitUpload"
-        >确 定</permission-button>
-      </span>
-    </el-dialog>
-
-    <!-- 导出时选择机构 -->
-    <el-dialog title="选择机构" :visible.sync="exportDialogVisible" width="70%">
-      <club-list-selector v-if="exportDialogVisible" @cancel="onSelectorCancel" @confirm="onSelectorConfirm" />
-    </el-dialog>
-
-    <!-- 二维码 -->
-    <transition name="fade">
-      <qrcode-club v-if="showQRcode" :qrcode-data="clubInfo" @close="showQRcode = false" />
-    </transition>
-  </div>
-</template>
-
-<script>
-import FileUpload from '@/components/FileUpload'
-import QrcodeClub from '@/components/QrcodeClub'
-import { ClubListSelector } from '@/views/components'
-import { fecthAuthListAll, changeAuthStatus, removeAuth, authImportExcel, setStarClub } from '@/api/auth'
-import { mapGetters } from 'vuex'
-import { debounce, downloadWithUrl } from '@/utils/tools'
-import handleClipboard from '@/utils/clipboard'
-export default {
-  name: 'ClubList',
-  components: { FileUpload, QrcodeClub, ClubListSelector },
-  data() {
-    return {
-      showQRcode: false,
-      clubInfo: {},
-      noticeTitle: '添加',
-      dialogFlag: true, // 对话框状态
-      tableKey: 0,
-      list: null,
-      total: 0,
-      // 查询参数
-      listQuery: {
-        authParty: '', // 授权机构
-        authUserId: '', // 供应商用户id
-        pageNum: 1, // 页码
-        pageSize: 10, // 分页
-        status: '',
-        starFlag: null,
-        name: '',
-        snCode: ''
-      },
-
-      improtDialogVisible: false,
-      requestLoading: false,
-      uploadFileList: [],
-      improtDialogFormData: {
-        fileUrl: ''
-      },
-      improtDialogFormRules: {
-        fileUrl: [
-          {
-            required: true,
-            message: '请选择文件',
-            trigger: 'change'
-          }
-        ]
-      },
-      chooseFile: '',
-      exportDialogVisible: false,
-      exportType: '',
-      exportClubList: []
-    }
-  },
-  computed: {
-    ...mapGetters(['authUserId', 'userIdentity', 'UserInfo', 'prefix']),
-    saveBtnClickable() {
-      return this.uploadFileList.length > 0
-    }
-  },
-  created() {
-    this.initPage()
-  },
-  activated() {
-    this.initPage()
-  },
-  methods: {
-    initPage() {
-      this.listQuery.authUserId = this.authUserId
-      const type = this.$route.query.type
-      // 如果是通过路由参数传递的type,则需要同步到store
-      if (type) {
-        this.$store.commit('user/SET_SHOP_TYPE', parseInt(type))
-      }
-      this.getList()
-    },
-
-    // 明星机构设置
-    async onStarChange(row, value) {
-      console.log(row)
-      try {
-        await setStarClub({ authId: row.authId, starFlag: value, starNum: row.starNum })
-        this.$message.success('操作成功')
-        this.getList()
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    filterNotNumber(row) {
-      let val = row.starNum.trim()
-      val = val.replaceAll(/\D/gi, '')
-      if (val) {
-        val = parseInt(val)
-      }
-      row.starNum = val.toString()
-    },
-
-    // 机构二维码
-    createClubQrcode(item) {
-      this.clubInfo = item
-      this.showQRcode = true
-      console.log('机构二维码')
-    },
-
-    // 复制链接
-    async cotyClubLink($event, row) {
-      console.log(row)
-      if (row.productNum === 0) {
-        return this.$confirm('请在该机构下完善至少一条设备认证，再复制该注册链接', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-          .then(() => {})
-          .catch(() => {})
-      }
-      const prefix = this.prefix || 'app'
-      handleClipboard(
-        `${process.env.VUE_APP_WWW_HOST}/${row.authUserId}/${prefix}/form/club-bind?authId=${row.authId}`,
-        '链接已复制到粘贴板',
-        $event
-      )
-    },
-
-    // 上传文件
-    submitUpload() {
-      this.$refs.dialogForm.validate((valid) => {
-        console.log(valid)
-        if (!valid) return
-        this.requestLoading = true
-        this.handleSave()
-      })
-    },
-
-    // 监听上传文件的状态变化
-    async fileUploadChange(fileList) {
-      this.uploadFileList = fileList
-      try {
-        await this.handleFileUploadStatus(fileList)
-        this.handleSave.apply(this)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 取消选择机构
-    onSelectorCancel() {
-      this.exportType = ''
-      this.exportClubList = []
-      this.exportDialogVisible = false
-    },
-
-    // 选择确认机构
-    onSelectorConfirm(list) {
-      this.exportClubList = list
-      this.onExport(this.exportType)
-      this.exportDialogVisible = false
-    },
-
-    // 导出下载机构信息
-    onHandleExport(type) {
-      this.exportDialogVisible = true
-      this.exportType = type
-    },
-
-    // 导出
-    async onExport(type) {
-      const confirmText = ['', '机构授权牌', '设备授权牌', '机构二维码', '设备二维码', '机构信息', '设备信息'][type]
-      const downloadLinkMap = {
-        1: '/shop/image?type=1&',
-        2: '/shop/image?type=2&',
-        3: '/shop/image?type=3&',
-        4: '/shop/image?type=4&',
-        5: '/auth/excel?',
-        6: '/product/excel?'
-      }
-      const text = await this.$confirm(`确认下载所选${confirmText}?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).catch(() => {
-        this.exportClubList = []
-        this.$message.info('已取消操作')
-      })
-      if (text !== 'confirm') return
-      let notification = null
-      notification = this.$notify({
-        title: '提示',
-        message: `正在下载${confirmText}，请勿重复操作！`,
-        duration: 0
-      })
-      const authIds = this.exportClubList.map((item) => item.authId)
-      // 使用a链接下载
-      const downUrl = `${process.env.VUE_APP_BASE_API}/download${downloadLinkMap[type]}authIds=${authIds}`
-      downloadWithUrl(downUrl, confirmText)
-        .catch((err) => {
-          console.log(err)
-          this.$message.error(`下载${confirmText}失败`)
-        })
-        .finally(() => {
-          notification.close()
-          this.onSelectorCancel()
-        })
-    },
-
-    // 下载机构导入模板
-    downLoadTemplate() {
-      const downUrl = `${process.env.VUE_APP_BASE_API}/download/auth/template`
-      let notification = null
-      notification = this.$notify({
-        title: '提示',
-        message: '正在下载机构导入模板，请勿重复操作！',
-        duration: 0
-      })
-      downloadWithUrl(downUrl, '机构导入模板.xlsx')
-        .catch((err) => {
-          console.log(err)
-          this.$message.error(`下载机构导入模板失败`)
-        })
-        .finally(() => {
-          notification.close()
-        })
-    },
-
-    // 导入Excel 并提交
-    handleSave: debounce(function() {
-      console.log('保存')
-      // 上传文件使用 multipart/form-data
-      const formData = new FormData()
-
-      formData.append('authUserId', this.authUserId)
-      formData.append('createBy', this.authUserId)
-      formData.append('file', this.chooseFile)
-
-      authImportExcel(formData)
-        .then((res) => {
-          this.$message.success(res.data)
-          this.improtDialogVisible = false
-          this.getList()
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.requestLoading = false
-        })
-    }, 200),
-
-    // 处理文件上传状态
-    handleFileUploadStatus(fileList) {
-      console.log(fileList)
-      this.chooseFile = fileList[0].raw
-      // 文件列表为空
-      if (fileList.length <= 0) {
-        this.improtDialogFormData.fileUrl = ''
-        return Promise.reject('faild')
-      }
-      // 取第一个文件
-      const { response, status } = fileList[0]
-      // 文件已选择但未上传
-      if (status === 'ready') {
-        this.improtDialogFormData.fileUrl = status
-        return Promise.reject('faild')
-      }
-      // 文件已上传
-      if (status === 'success') {
-        this.improtDialogFormData.fileUrl = response.previewUrl
-        return Promise.resolve('success')
-      }
-    },
-
-    improtDialogClose() {
-      console.log(123)
-      // this.uploadFileList = []
-      this.$refs.fileUpload.clearAllFiles()
-      this.$refs.dialogForm.resetFields()
-    },
-
-    // 获取授权列表
-    getList() {
-      fecthAuthListAll(this.listQuery)
-        .then((response) => {
-          if (response.code !== 0) {
-            return this.$message.error('授权列表信息获取失败')
-          }
-          const { list, total } = response.data
-          // this.formatList(list)
-          this.list = list
-          this.total = total
-        })
-        .catch((err) => {
-          console.log(err)
-          return this.$message.error('授权列表信息获取失败')
-        })
-    },
-
-    // 删除品牌授权
-    async handleRemoveAuth(item) {
-      const text = await this.$confirm('确认删除该数据吗？删除后，对应的商品数据也将全部删除', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).catch(() => {
-        this.$message.info('已取消操作')
-      })
-      if (text !== 'confirm') return
-      // 要执行的操作
-      removeAuth({ authId: item.authId })
-        .then((res) => {
-          if (res.code !== 0) return
-          const h = this.$createElement
-          this.$notify.success({
-            title: '移除授权机构',
-            message: h('i', { style: 'color: #333' }, `移除授权机构："${item.authParty}"`),
-            duration: 3000
-          })
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.getList()
-        })
-    },
-
-    // 格式化列表数据
-    formatList(list = []) {
-      list.forEach((i) => {
-        i.status = i.status === 1
-      })
-    },
-
-    // 供应商状态改变
-    handleChangeStatus(item) {
-      const params = {
-        authId: item.authId,
-        status: item.status === 1 ? 0 : 1
-      }
-      changeAuthStatus(params)
-        .then((res) => {
-          // this.$message.success(res.data)
-          this.$message({
-            message: res.data,
-            duration: 500,
-            type: 'success'
-          })
-          this.getList()
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-    },
-
-    // 过滤列表
-    handleFilter() {
-      this.listQuery.page = 1
-      this.list = []
-      this.getList()
-    },
-
-    indexMethod(index) {
-      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.star-sort {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .el-input {
-    width: 50%;
-    margin-left: 16px;
-  }
-}
-</style>
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.authParty" placeholder="机构名称" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>明星机构</span>
+        <el-checkbox v-model="listQuery.starFlag" :true-label="1" :false-label="null" @change="getList" />
+      </div>
+      <div class="filter-control">
+        <span>设备名称:</span>
+        <el-input v-model="listQuery.name" placeholder="设备名称" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>设备SN码:</span>
+        <el-input v-model="listQuery.snCode" placeholder="设备SN码" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <permission-button type="primary" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="navigationTo('club-add?type=edit&isAdd=true')">添加</permission-button>
+      </div>
+      <div class="filter-control">
+        <permission-button type="primary" @click="downLoadTemplate">机构导入模板</permission-button>
+      </div>
+      <!-- 机构设备信息导出  -->
+      <div class="filter-control">
+        <permission-button type="primary" @click="improtDialogVisible = true">导入机构信息</permission-button>
+        <permission-button type="primary" @click="onHandleExport(5)">导出机构信息</permission-button>
+        <permission-button type="primary" @click="onHandleExport(6)">导出设备信息</permission-button>
+      </div>
+      <!-- 机构设备授权牌导出 -->
+      <div class="filter-control">
+        <permission-button type="primary" @click="onHandleExport(1)">下载机构授权牌</permission-button>
+        <permission-button type="primary" @click="onHandleExport(2)">下载设备授权牌</permission-button>
+      </div>
+      <!-- 机构设备二维码下载 -->
+      <div class="filter-control">
+        <permission-button type="primary" @click="onHandleExport(3)">一键下载机构二维码</permission-button>
+        <permission-button type="primary" @click="onHandleExport(4)">一键下载设备二维码</permission-button>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table
+      :key="tableKey"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      header-row-class-name="tableHeader"
+    >
+      <el-table-column label="序号" :index="indexMethod" align="center" width="80" type="index" />
+
+      <el-table-column label="机构名称" align="center" prop="authParty" />
+
+      <el-table-column label="审核状态" width="120px" align="center">
+        <template slot-scope="{ row }">
+          <audit-status :status="row.auditStatus" :reason="row.invalidReason" />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="上线状态" width="160px" align="center">
+        <template slot-scope="{ row }">
+          <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
+          <template v-if="row.auditStatus === 1">
+            <template v-if="row.status === 0">
+              <span style="margin-right: 10px" class="status danger">已下线</span>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
+            </template>
+            <template v-else>
+              <span style="margin-right: 10px" class="status success">已上线</span>
+              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
+            </template>
+          </template>
+          <template v-else>
+            <span style="margin-right: 10px" class="status warning">待上线</span>
+          </template>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="访问次数" align="center" prop="scanCount" width="80" />
+
+      <el-table-column label="明星机构/排序" align="center" width="160">
+        <template slot-scope="{ row }">
+          <div class="star-sort">
+            <el-checkbox v-model="row.starFlag" :true-label="1" :false-label="0" @change="onStarChange(row, $event)" />
+            <el-input
+              v-model="row.starNum"
+              placeholder="排序"
+              size="mini"
+              maxlength="20"
+              @blur="onStarChange(row, row.starFlag)"
+              @input="filterNotNumber(row)"
+            />
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="创建时间" class-name="status-col" width="160px">
+        <template slot-scope="{ row }">
+          <span>{{ row.createTime | formatTime }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="创建人" class-name="status-col" width="180px" prop="createBy" />
+      <el-table-column label="操作" align="center" width="430px" class-name="small-padding fixed-width">
+        <template slot-scope="{ row }">
+          <permission-button type="primary" size="mini" @click="navigationTo(`club-edit?type=edit&id=${row.authId}&isAdd=false`)">
+            编辑
+          </permission-button>
+          <!-- <permission-button type="danger" size="mini" @click="handleRemoveAuth(row)"> 删除 </permission-button> -->
+          <permission-button type="primary" size="mini" @click="navigationTo(`device-list?id=${row.authId}`)">
+            设备认证
+          </permission-button>
+          <permission-button type="primary" size="mini" :disabled="row.status !== 1" @click="createClubQrcode(row)">
+            二维码
+          </permission-button>
+          <permission-button type="primary" size="mini" @click="cotyClubLink($event, row)">
+            复制注册链接
+          </permission-button>
+          <permission-button
+            type="primary"
+            size="mini"
+            :disabled="row.status !== 1 || row.sendStatus === 0"
+            @click="navigationTo(`logistics-licensed?id=${row.authId}`)"
+          >
+            授权牌物流
+          </permission-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
+    <!-- 导入对话框 -->
+    <el-dialog title="导入" :visible.sync="improtDialogVisible" width="30%" @close="improtDialogClose">
+      <el-form ref="dialogForm" :model="improtDialogFormData" label-width="86px" :rules="improtDialogFormRules">
+        <el-form-item label="文件路径:" prop="fileUrl">
+          <file-upload ref="fileUpload" :file-list="uploadFileList" @change="fileUploadChange" />
+          <el-input v-show="false" v-model="improtDialogFormData.fileUrl" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <permission-button @click="improtDialogVisible = false">取 消</permission-button>
+        <permission-button
+          type="primary"
+          :disabled="!saveBtnClickable"
+          :loading="requestLoading"
+          @click="submitUpload"
+        >确 定</permission-button>
+      </span>
+    </el-dialog>
+
+    <!-- 导出时选择机构 -->
+    <el-dialog title="选择机构" :visible.sync="exportDialogVisible" width="70%">
+      <club-list-selector v-if="exportDialogVisible" @cancel="onSelectorCancel" @confirm="onSelectorConfirm" />
+    </el-dialog>
+
+    <!-- 二维码 -->
+    <transition name="fade">
+      <qrcode-club v-if="showQRcode" :qrcode-data="clubInfo" @close="showQRcode = false" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import FileUpload from '@/components/FileUpload'
+import QrcodeClub from '@/components/QrcodeClub'
+import { ClubListSelector } from '@/views/components'
+import { fecthAuthListAll, changeAuthStatus, removeAuth, authImportExcel, setStarClub } from '@/api/auth'
+import { mapGetters } from 'vuex'
+import { debounce, downloadWithUrl } from '@/utils/tools'
+import handleClipboard from '@/utils/clipboard'
+export default {
+  name: 'ClubList',
+  components: { FileUpload, QrcodeClub, ClubListSelector },
+  data() {
+    return {
+      showQRcode: false,
+      clubInfo: {},
+      noticeTitle: '添加',
+      dialogFlag: true, // 对话框状态
+      tableKey: 0,
+      list: null,
+      total: 0,
+      // 查询参数
+      listQuery: {
+        authParty: '', // 授权机构
+        authUserId: '', // 供应商用户id
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页
+        status: '',
+        starFlag: null,
+        name: '',
+        snCode: ''
+      },
+
+      improtDialogVisible: false,
+      requestLoading: false,
+      uploadFileList: [],
+      improtDialogFormData: {
+        fileUrl: ''
+      },
+      improtDialogFormRules: {
+        fileUrl: [
+          {
+            required: true,
+            message: '请选择文件',
+            trigger: 'change'
+          }
+        ]
+      },
+      chooseFile: '',
+      exportDialogVisible: false,
+      exportType: '',
+      exportClubList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId', 'userIdentity', 'UserInfo', 'prefix']),
+    saveBtnClickable() {
+      return this.uploadFileList.length > 0
+    }
+  },
+  created() {
+    this.initPage()
+  },
+  activated() {
+    this.initPage()
+  },
+  methods: {
+    initPage() {
+      this.listQuery.authUserId = this.authUserId
+      const type = this.$route.query.type
+      // 如果是通过路由参数传递的type,则需要同步到store
+      if (type) {
+        this.$store.commit('user/SET_SHOP_TYPE', parseInt(type))
+      }
+      this.getList()
+    },
+
+    // 明星机构设置
+    async onStarChange(row, value) {
+      console.log(row)
+      try {
+        await setStarClub({ authId: row.authId, starFlag: value, starNum: row.starNum })
+        this.$message.success('操作成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    filterNotNumber(row) {
+      let val = row.starNum.trim()
+      val = val.replaceAll(/\D/gi, '')
+      if (val) {
+        val = parseInt(val)
+      }
+      row.starNum = val.toString()
+    },
+
+    // 机构二维码
+    createClubQrcode(item) {
+      this.clubInfo = item
+      this.showQRcode = true
+      console.log('机构二维码')
+    },
+
+    // 复制链接
+    async cotyClubLink($event, row) {
+      console.log(row)
+      if (row.productNum === 0) {
+        return this.$confirm('请在该机构下完善至少一条设备认证，再复制该注册链接', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {})
+          .catch(() => {})
+      }
+      const prefix = this.prefix || 'app'
+      handleClipboard(
+        `${process.env.VUE_APP_WWW_HOST}/${row.authUserId}/${prefix}/form/club-bind?authId=${row.authId}`,
+        '链接已复制到粘贴板',
+        $event
+      )
+    },
+
+    // 上传文件
+    submitUpload() {
+      this.$refs.dialogForm.validate((valid) => {
+        console.log(valid)
+        if (!valid) return
+        this.requestLoading = true
+        this.handleSave()
+      })
+    },
+
+    // 监听上传文件的状态变化
+    async fileUploadChange(fileList) {
+      this.uploadFileList = fileList
+      try {
+        await this.handleFileUploadStatus(fileList)
+        this.handleSave.apply(this)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 取消选择机构
+    onSelectorCancel() {
+      this.exportType = ''
+      this.exportClubList = []
+      this.exportDialogVisible = false
+    },
+
+    // 选择确认机构
+    onSelectorConfirm(list) {
+      this.exportClubList = list
+      this.onExport(this.exportType)
+      this.exportDialogVisible = false
+    },
+
+    // 导出下载机构信息
+    onHandleExport(type) {
+      this.exportDialogVisible = true
+      this.exportType = type
+    },
+
+    // 导出
+    async onExport(type) {
+      const confirmText = ['', '机构授权牌', '设备授权牌', '机构二维码', '设备二维码', '机构信息', '设备信息'][type]
+      const downloadLinkMap = {
+        1: '/shop/image?type=1&',
+        2: '/shop/image?type=2&',
+        3: '/shop/image?type=3&',
+        4: '/shop/image?type=4&',
+        5: '/auth/excel?',
+        6: '/product/excel?'
+      }
+      const text = await this.$confirm(`确认下载所选${confirmText}?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        this.exportClubList = []
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+      let notification = null
+      notification = this.$notify({
+        title: '提示',
+        message: `正在下载${confirmText}，请勿重复操作！`,
+        duration: 0
+      })
+      const authIds = this.exportClubList.map((item) => item.authId)
+      // 使用a链接下载
+      const downUrl = `${process.env.VUE_APP_BASE_API}/download${downloadLinkMap[type]}authIds=${authIds}`
+      downloadWithUrl(downUrl, confirmText)
+        .catch((err) => {
+          console.log(err)
+          this.$message.error(`下载${confirmText}失败`)
+        })
+        .finally(() => {
+          notification.close()
+          this.onSelectorCancel()
+        })
+    },
+
+    // 下载机构导入模板
+    downLoadTemplate() {
+      const downUrl = `${process.env.VUE_APP_BASE_API}/download/auth/template`
+      let notification = null
+      notification = this.$notify({
+        title: '提示',
+        message: '正在下载机构导入模板，请勿重复操作！',
+        duration: 0
+      })
+      downloadWithUrl(downUrl, '机构导入模板.xlsx')
+        .catch((err) => {
+          console.log(err)
+          this.$message.error(`下载机构导入模板失败`)
+        })
+        .finally(() => {
+          notification.close()
+        })
+    },
+
+    // 导入Excel 并提交
+    handleSave: debounce(function() {
+      console.log('保存')
+      // 上传文件使用 multipart/form-data
+      const formData = new FormData()
+
+      formData.append('authUserId', this.authUserId)
+      formData.append('createBy', this.authUserId)
+      formData.append('file', this.chooseFile)
+
+      authImportExcel(formData)
+        .then((res) => {
+          this.$message.success(res.data)
+          this.improtDialogVisible = false
+          this.getList()
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+        .finally(() => {
+          this.requestLoading = false
+        })
+    }, 200),
+
+    // 处理文件上传状态
+    handleFileUploadStatus(fileList) {
+      console.log(fileList)
+      this.chooseFile = fileList[0].raw
+      // 文件列表为空
+      if (fileList.length <= 0) {
+        this.improtDialogFormData.fileUrl = ''
+        return Promise.reject('faild')
+      }
+      // 取第一个文件
+      const { response, status } = fileList[0]
+      // 文件已选择但未上传
+      if (status === 'ready') {
+        this.improtDialogFormData.fileUrl = status
+        return Promise.reject('faild')
+      }
+      // 文件已上传
+      if (status === 'success') {
+        this.improtDialogFormData.fileUrl = response.previewUrl
+        return Promise.resolve('success')
+      }
+    },
+
+    improtDialogClose() {
+      console.log(123)
+      // this.uploadFileList = []
+      this.$refs.fileUpload.clearAllFiles()
+      this.$refs.dialogForm.resetFields()
+    },
+
+    // 获取授权列表
+    getList() {
+      fecthAuthListAll(this.listQuery)
+        .then((response) => {
+          if (response.code !== 0) {
+            return this.$message.error('授权列表信息获取失败')
+          }
+          const { list, total } = response.data
+          // this.formatList(list)
+          this.list = list
+          this.total = total
+        })
+        .catch((err) => {
+          console.log(err)
+          return this.$message.error('授权列表信息获取失败')
+        })
+    },
+
+    // 删除品牌授权
+    async handleRemoveAuth(item) {
+      const text = await this.$confirm('确认删除该数据吗？删除后，对应的商品数据也将全部删除', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+      // 要执行的操作
+      removeAuth({ authId: item.authId })
+        .then((res) => {
+          if (res.code !== 0) return
+          const h = this.$createElement
+          this.$notify.success({
+            title: '移除授权机构',
+            message: h('i', { style: 'color: #333' }, `移除授权机构："${item.authParty}"`),
+            duration: 3000
+          })
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+        .finally(() => {
+          this.getList()
+        })
+    },
+
+    // 格式化列表数据
+    formatList(list = []) {
+      list.forEach((i) => {
+        i.status = i.status === 1
+      })
+    },
+
+    // 供应商状态改变
+    handleChangeStatus(item) {
+      const params = {
+        authId: item.authId,
+        status: item.status === 1 ? 0 : 1
+      }
+      changeAuthStatus(params)
+        .then((res) => {
+          // this.$message.success(res.data)
+          this.$message({
+            message: res.data,
+            duration: 500,
+            type: 'success'
+          })
+          this.getList()
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+
+    // 过滤列表
+    handleFilter() {
+      this.listQuery.page = 1
+      this.list = []
+      this.getList()
+    },
+
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.star-sort {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .el-input {
+    width: 50%;
+    margin-left: 16px;
+  }
+}
+</style>

src/views/normal/personalized/banner.vue

@@ -2,13 +2,13 @@
   <div class="app-container">
     <div class="form-container">
       <el-form ref="form" :model="formData" :rules="rules" label-width="140px">
-        <el-form-item label="移动端banner:" prop="filesBanner">
+        <el-form-item label="PC端banner:" prop="filesBanner">
           <div class="banner" :style="pcImageStyle" @click="handleChooseFile(0)">
             <img v-if="formData.filesBanner[0]" :src="formData.filesBanner[0]">
             <span class="tip">请上传图片（1920*530px）</span>
           </div>
         </el-form-item>
-        <el-form-item label="PC端banner:" prop="filesBanner">
+        <el-form-item label="移动端banner:" prop="filesBanner">
           <div class="banner" :style="mobileImageStyle" @click="handleChooseFile(1)">
             <img v-if="formData.filesBanner[1]" :src="formData.filesBanner[1]">
             <span class="tip">请上传图片（800*800px）</span>
@@ -21,13 +21,33 @@
             <el-radio :label="2">链接</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="formData.jumpStatus === 1" label="跳转图片:" prop="linkImage">
+        <!-- <el-form-item
+          v-if="formData.jumpStatus === 1"
+          label="PC端banner:"
+          prop="filesPicture"
+        >
           <UploadImage
             :image-list="linkImageList"
             :limit="1"
             @success="uploadLinkImageSuccess"
             @remove="handleLinkImageRemove"
           />
+        </el-form-item> -->
+        <el-form-item
+          v-if="formData.jumpStatus === 1"
+          label="PC端banner:"
+          prop="filesPicture"
+        >
+          <div class="banner" :style="pcImageStyle" @click="handleChooseFilePic(0)">
+            <img v-if="formData.filesPicture[0]" :src="formData.filesPicture[0]">
+            <span class="tip">请上传图片（1920*530px）</span>
+          </div>
+        </el-form-item>
+        <el-form-item v-if="formData.jumpStatus === 1" label="移动端banner:" prop="filesPicture">
+          <div class="banner" :style="mobileImageStyle" @click="handleChooseFilePic(1)">
+            <img v-if="formData.filesPicture[1]" :src="formData.filesPicture[1]">
+            <span class="tip">请上传图片（800*800px）</span>
+          </div>
         </el-form-item>
         <el-form-item v-if="formData.jumpStatus === 2" label="跳转链接:" prop="jumpLink">
           <el-input v-model="formData.jumpLink" />
@@ -47,12 +67,20 @@
       :limit="99"
       @success="uploadImageSuccess"
     />
+    <UploadImage
+      v-show="false"
+      ref="uploadPic"
+      :image-list="linkImageList"
+      :trigger="true"
+      :limit="99"
+      @success="uploadLinkImageSuccess"
+    />
   </div>
 </template>
 
 <script>
 import UploadImage from '@/components/UploadImage'
-import { saveBannerData } from '@/api/personalized'
+import { saveBannerData, fetchBannerData } from '@/api/personalized'
 export default {
   name: 'PersonalBanner',
   components: {
@@ -68,14 +96,20 @@ export default {
         linkImage: ''
       },
       currentIndex: 0,
+      currentPicIndex: 0,
       rules: {
-        filesBanner: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
-        filesPicture: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
-        linkImage: [{ required: true, message: '请上传图片', trigger: 'change' }],
+        filesBanner: [
+          { type: 'array', required: true, message: '请上传图片', trigger: 'change' }
+        ],
+        filesPicture: [
+          { type: 'array', required: true, message: '请上传图片', trigger: 'change' }
+        ],
+        // linkImage: [{ required: true, message: '请上传图片', trigger: 'change' }],
         jumpLink: [{ required: true, message: '请输入链接', trigger: 'blur' }]
       },
       linkImageList: [],
-      imageList: []
+      imageList: [],
+      dataImageList: [] // 数据回显
     }
   },
   computed: {
@@ -94,6 +128,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.network().fetchBannerData()
+  },
   methods: {
     async submit() {
       try {
@@ -105,8 +142,18 @@ export default {
     },
     // 保存banner
     async saveBanner() {
+      const imgFormData = {
+        jumpStatus: this.formData.jumpStatus,
+        jumpLink: this.formData.jumpLink,
+        headPcBanner: this.formData.filesBanner[0],
+        headAppBanner: this.formData.filesBanner[1],
+        jumpPcPicture: this.formData.filesPicture[0],
+        jumpAppPicture: this.formData.filesPicture[1],
+        linkImage: this.formData.linkImage
+      }
       try {
-        await saveBannerData(this.formData)
+        console.log(imgFormData)
+        await saveBannerData(imgFormData)
         this.$message.success('保存成功')
       } catch (error) {
         console.log(error)
@@ -117,18 +164,34 @@ export default {
       this.currentIndex = index
       this.$refs.upload.handleClick()
     },
+    handleChooseFilePic(index) {
+      this.currentPicIndex = index
+      this.$refs.uploadPic.handleClick()
+    },
     // 图片上传
     uploadImageSuccess({ response, file, fileList }) {
       this.$set(this.formData.filesBanner, this.currentIndex, response.data)
     },
     // 跳转链接为图片，上传图片
     uploadLinkImageSuccess({ response, file, fileList }) {
-      this.linkImageList = fileList
-      this.$set(this.formData.filesPicture, 0, response.data)
+      this.$set(this.formData.filesPicture, this.currentPicIndex, response.data)
     },
-    handleLinkImageRemove({ file, fileList }) {
-      this.linkImageList = []
-      this.formData.filesPicture = []
+    // handleLinkImageRemove({ file, fileList }) {
+    //   this.linkImageList = []
+    //   this.formData.filesPicture = []
+    // }
+    // 数据回显
+    network() {
+      return {
+        fetchBannerData: async() => {
+          const { data } = await fetchBannerData()
+          this.dataImageList = data
+          this.formData.filesBanner = [data.headPcBanner, data.headAppBanner]
+          this.formData.filesPicture = [data.jumpPcPicture, data.jumpAppPicture]
+          this.formData.jumpStatus = data.jumpStatus
+          this.formData.jumpLink = data.jumpLink
+        }
+      }
     }
   }
 }