认证通v1.7版本页面新增修改

src/views/admin/audit/club/device/review.vue

@@ -1,114 +1,147 @@
 <template>
-  <div v-loading="isLoading" class="shop-detail">
-    <el-form v-if="product!==null" ref="formRef" :model="formData" :rules="formRules" label-width="120px">
-      <el-form-item label="设备名称：">
-        <span>{{ product.productName }}</span>
-      </el-form-item>
-      <el-form-item label="设备SN码：">
-        <span>{{ product.snCode }}</span>
-      </el-form-item>
-      <el-form-item label="设备图片：">
-        <el-image
-          style="width: 140px; height: 140px"
-          :src="product.productImage"
-          :preview-src-list="imgList"
-        />
-      </el-form-item>
-      <el-form-item label="授权牌：">
-        <el-image
-          style="width: 140px; height: 140px"
-          :src="product.certificateImage"
-          :preview-src-list="imgList"
-        />
-      </el-form-item>
-      <template v-if="product.paramList.length>0">
-        <el-form-item label="相关参数：">
-          <table>
-            <tr v-for="(params,index) in product.paramList" :key="index">
-              <td>{{ params.paramName }}：</td>
-              <td>{{ params.paramContent }}</td>
-            </tr>
-          </table>
-        </el-form-item>
-      </template>
+  <div class="app-container">
+    <div class="audit-content">
+      <div class="grid">
+        <div class="row">
+          <div class="col">设备名称：</div>
+          <div class="col">{{ productInfo.productName }}</div>
+        </div>
+        <div class="row">
+          <div class="col">设备SN码：</div>
+          <div class="col">{{ productInfo.snCode }}</div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">设备图片：</div>
+        <div class="col">
+          <el-image
+            style="width: 120px; height: 120px"
+            :src="productInfo.productImage"
+            :preview-src-list="[productInfo.productImage]"
+          />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col">所属品牌：</div>
+        <div class="col">{{ productInfo.brandName }}</div>
+      </div>
+
+      <div class="row">
+        <div class="col">购买渠道：</div>
+        <div class="col">{{ productInfo.buyChannel }}</div>
+      </div>
+
+      <div class="row">
+        <div class="col">发票：</div>
+        <div class="col">
+          <el-image
+            style="width: 120px; height: 120px"
+            :src="productInfo.invoiceImage"
+            :preview-src-list="[productInfo.invoiceImage]"
+          />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col">设备参数：</div>
+        <div class="col">
+          <template v-for="(param, index) in productInfo.paramList">
+            <div :key="index" class="param">
+              <div class="label">{{ param.paramName }}：</div>
+              <div class="content">{{ param.paramContent }}</div>
+            </div>
+          </template>
+        </div>
+      </div>
 
-      <el-form-item label="审核状态：">
-        <el-radio-group v-model="formData.auditStatus">
-          <el-radio :label="1">通过</el-radio>
-          <el-radio :label="0">不通过</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-if="formData.auditStatus!==1" prop="invalidReason" label="原因：">
-        <el-input v-model="formData.invalidReason" type="textarea" placeholder="请说明原因" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="info" @click="$_back">返回</el-button>
-        <el-button type="primary" @click="submit">提交</el-button>
-      </el-form-item>
-    </el-form>
+      <div class="row">
+        <div class="col">审核状态：</div>
+        <div class="col">待审核</div>
+      </div>
+      <el-form ref="auditForm" label-width="112px" :model="auditForm" :rules="rules">
+        <el-form-item label="审核：">
+          <el-radio-group v-model="auditForm.auditStatus">
+            <el-radio :label="1">通过</el-radio>
+            <el-radio :label="0">不通过</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="auditForm.auditStatus === 0" label="原因：" prop="invalidReason">
+          <el-input v-model="auditForm.invalidReason" type="textarea" :rows="3" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="$_back">返回</el-button>
+          <el-button type="primary" @click="submit">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProductById, auditProduct } from '@/api/product'
-import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      authId: '', // 当前产品所属授权机构id
-      isLoading: false,
-      formData: {
+      productInfo: {
+        productId: '',
+        productName: '',
+        snCode: '',
+        productImage: '',
+        certificateImage: '',
+        paramList: [],
+        invoiceImage: '',
+        brandName: '',
+        buyChannel: ''
+      },
+      auditForm: {
         auditBy: '', // 审核人id
-        productId: '', // 商品id
-        auditStatus: 1, // 商品审核状态
+        authId: '', // 机构id
+        auditStatus: 1, // 审核状态
         invalidReason: '' // 审核信息
       },
-      formRules: {
+      rules: {
         invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
-      },
-      imgList: [], // 图片列表
-      product: null // 商品信息
+      }
     }
   },
   computed: {
     ...mapGetters(['authUserId'])
   },
   created() {
-    this.formData.productId = this.$route.query.id
+    this.productInfo.productId = this.$route.query.id
     this.authId = this.$route.query.authId
     this.getDetail()
   },
   methods: {
-    ...mapMutations({ setMessageState: 'webSocket/SET_MESSAGE_STATE' }),
     // 获取商品详情
     getDetail() {
       this.isLoading = true
-      getProductById({ productId: this.formData.productId })
-        .then(res => {
-          if (res.code !== 0) return
-          this.product = res.data
-          this.imgList = [this.product.productImage, this.product.certificateImage]
-        }).finally(() => {
+      getProductById({ productId: this.productInfo.productId })
+        .then((res) => {
+          this.productInfo = { ...this.productInfo, ...res.data }
+        })
+        .finally(() => {
           this.isLoading = false
         })
     },
     // 提交审核信息
     submit() {
-      this.$refs.formRef.validate(valid => {
+      this.$refs.auditForm.validate((valid) => {
         if (valid) {
           this.isLoading = true
           // 指定审核人
-          this.formData.auditBy = this.authUserId
-          // 提交审核信息
-          auditProduct(this.formData).then(res => {
-            if (res.code !== 0) return
-            this.$message.success(res.data)
-            this.$store.dispatch('tagsView/delView', this.$route)
-            this.$router.back()
-            // this.setMessageState({ id: parseInt(this.formData.productId), type: 2 })
-          }).finally(() => {
-            this.isLoading = false
-          })
+          this.auditForm.auditBy = this.authUserId
+          auditProduct(this.auditForm)
+            .then((res) => {
+              this.$message.success(res.data)
+              this.$store.dispatch('tagsView/delView', this.$route)
+              this.$router.back()
+            })
+            .finally(() => {
+              this.isLoading = false
+            })
         }
       })
     }
@@ -117,24 +150,59 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.shop-detail{
-  margin-bottom: 80px;
-  font-size: 14px;
-  color: #444;
-  .params-list{
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    li{
-      margin-bottom: 15px;
+.app-container {
+  .audit-content {
+    max-width: 1000px;
+    margin: 0 auto;
+    margin-top: 25px;
+  }
+  .grid,
+  .param {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    // grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+
+  .param {
+    div {
+      padding-bottom: 16px;
+      text-align: left;
+
+      &:first-child {
+        text-align: right;
+      }
     }
   }
-  .el-form {
-    width: 800px;
-    margin: 25px auto 0;
-    .el-button{
-      width: 120px;
+
+  .row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 25px;
+    .col {
+      font-size: 14px;
+      color: #333;
+      &:first-child {
+        min-width: 100px;
+        text-align: right;
+        margin-right: 8px;
+        font-weight: bold;
+        color: #666;
+      }
+
+      .el-image {
+        margin-left: 12px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
     }
   }
+
+  .el-button {
+    width: 120px;
+  }
 }
 </style>

src/views/admin/audit/club/review.vue

@@ -1,94 +1,172 @@
 <template>
-  <div v-if="!isLoading" class="club-edit">
-    <el-form ref="formRef" class="club-edit-form" label-width="120px" :model="formData" :rules="formRules">
-      <el-form-item label="机构名称:">
-        <span>{{ authInfo.authParty }}</span>
-      </el-form-item>
-      <el-form-item label="所在地区:">
-        <span>{{ authInfo.area }}</span>
-      </el-form-item>
-      <el-form-item label="详细地址:">
-        <span>{{ authInfo.address }}</span>
-      </el-form-item>
-      <el-form-item label="经纬度:">
-        <span>{{ authInfo.lngAndLat }}</span>
-      </el-form-item>
-      <el-form-item label="联系方式:" prop="mobile">
-        <span>{{ authInfo.mobile }}</span>
-      </el-form-item>
-      <el-form-item label="机构logo:">
-        <el-image
-          style="width: 140px; height: 140px"
-          :src="authInfo.logo"
-        />
-      </el-form-item>
-      <el-form-item label="轮播图:">
-        <el-image
-          v-for="(image,index) in authInfo.bannerList"
-          :key="index"
-          style="width: 140px; height: 140px;margin-right: 16px;"
-          :src="image"
-          :preview-src-list="imgList"
-        />
-      </el-form-item>
+  <div class="app-container">
+    <div class="audit-content">
+      <div class="grid">
+        <div class="row">
+          <div class="col">机构名称：</div>
+          <div class="col">{{ clubInfo.authParty }}</div>
+        </div>
+        <div class="row">
+          <div class="col">联系电话：</div>
+          <div class="col">{{ clubInfo.mobile }}</div>
+        </div>
+        <div class="row">
+          <div class="col">所在地区：</div>
+          <div class="col">{{ clubInfo.area }}</div>
+        </div>
+        <div class="row">
+          <div class="col">详细地址：</div>
+          <div class="col">{{ clubInfo.address }}</div>
+        </div>
+        <div class="row">
+          <div class="col">所在位置：</div>
+          <div class="col">
+            <div class="map" @click="dialogMapVisible = true">
+              <i class="el-icon-map-location" />
+              <span>点击查看</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">logo：</div>
+        <div class="col">
+          <el-image style="width: 120px; height: 120px" :src="clubInfo.logo" :preview-src-list="[clubInfo.logo]" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">门头照：</div>
+        <div class="col">
+          <template v-for="(image, index) in clubInfo.bannerList">
+            <el-image
+              :key="index"
+              style="width: 120px; height: 120px"
+              :src="image"
+              :preview-src-list="clubInfo.bannerList"
+            />
+          </template>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">机构类型：</div>
+        <div class="col">
+          <el-radio-group v-model="clubInfo.clubType">
+            <el-radio
+              v-for="item in clubTypeList"
+              :key="item.id"
+              :label="item.id"
+              :disabled="clubInfo.clubType !== item.id"
+            >{{ item.name }}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">医美类型：</div>
+        <div class="col">
+          <el-radio-group v-model="clubInfo.medicalType">
+            <el-radio
+              v-for="item in medicalTypeList"
+              :key="item.id"
+              :label="item.id"
+              :disabled="clubInfo.clubType !== item.id"
+            >{{ item.name }}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">医疗许可证：</div>
+        <div class="col">
+          <el-image
+            style="width: 120px; height: 120px"
+            :src="clubInfo.licenseImage"
+            :preview-src-list="[clubInfo.licenseImage]"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">员工人数：</div>
+        <div class="col">{{ clubInfo.memberCount }}人</div>
+      </div>
 
-      <el-form-item label="自定义属性:">
-        <span v-if="authInfo.customFlag">是</span>
-        <span v-else>否</span>
-      </el-form-item>
+      <div class="row">
+        <div class="col">自定义属性：</div>
+        <div class="col">
+          <el-radio-group v-model="clubInfo.customFlag">
+            <el-radio :label="1" :disabled="clubInfo.customFlag !== 1">是</el-radio>
+            <el-radio :label="0" :disabled="clubInfo.customFlag !== 0">否</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div v-if="clubInfo.customFlag > 0" class="row">
+        <div class="col">店铺备注：</div>
+        <div class="col">{{ clubInfo.remarks }}人</div>
+      </div>
 
-      <el-form-item v-if="authInfo.customFlag" label="店铺备注:">
-        <span v-text="authInfo.remarks" />
-      </el-form-item>
+      <div class="row">
+        <div class="col">审核状态：</div>
+        <div class="col">待审核</div>
+      </div>
+      <el-form ref="auditForm" label-width="112px" :model="auditForm" :rules="rules">
+        <el-form-item label="审核：">
+          <el-radio-group v-model="auditForm.auditStatus">
+            <el-radio :label="1">通过</el-radio>
+            <el-radio :label="0">不通过</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="auditForm.auditStatus === 0" label="原因：" prop="invalidReason">
+          <el-input v-model="auditForm.invalidReason" type="textarea" :rows="3" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="$_back">返回</el-button>
+          <el-button type="primary" @click="submit">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
 
-      <!-- 审核表单 -->
-      <el-form-item label="审核状态：">
-        <el-radio-group v-model="formData.auditStatus">
-          <el-radio :label="1">通过</el-radio>
-          <el-radio :label="0">不通过</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-if="formData.auditStatus!==1" prop="invalidReason" label="原因：">
-        <el-input v-model="formData.invalidReason" type="textarea" placeholder="请说明原因" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="info" @click="$_back">返回</el-button>
-        <el-button type="primary" @click="submit">提交</el-button>
-      </el-form-item>
-    </el-form>
+    <!-- 地图坐标拾取 -->
+    <el-dialog class="map-dialog" title="地图信息" :visible.sync="dialogMapVisible" width="80%">
+      <!-- <location v-if="dialogMapVisible" :init-point="formData.point" @point="handlePointChange" /> -->
+      <map-ui :init-point="clubInfo.lngAndLat" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-// import Location from '@/components/location'
+import AMapUI from '@/components/AMapUI'
 import { getAuthFormData, auditAuth } from '@/api/auth'
 import { mapGetters } from 'vuex'
-
 export default {
-
+  components: {
+    [AMapUI.name]: AMapUI
+  },
   data() {
     return {
       isLoading: false,
-
+      dialogMapVisible: false,
+      clubTypeList: [
+        { id: 1, name: '医美' },
+        { id: 2, name: '生美' },
+        { id: 3, name: '项目公司' },
+        { id: 4, name: '个人' },
+        { id: 5, name: '其他' }
+      ],
+      medicalTypeList: [
+        { id: 1, name: '诊所' },
+        { id: 2, name: '门诊' },
+        { id: 3, name: '医院' },
+        { id: 4, name: '其他' }
+      ],
       authId: '',
-
-      formData: {
-        auditBy: '', // 审核人id
-        authId: '', // 机构id
-        auditStatus: 1, // 审核状态
-        invalidReason: '' // 审核信息
-      },
-
-      formRules: {
-        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
-      },
-
-      authInfo: {
+      clubInfo: {
+        medicalType: 1,
+        clubType: 1,
+        licenseImage: '',
+        memberCount: '',
         address: '',
         area: '',
         authId: '',
         authParty: '',
-        bannerList: '',
+        bannerList: [],
         cityId: '',
         lngAndLat: '',
         logo: '',
@@ -98,53 +176,48 @@ export default {
         customFlag: 0,
         remarks: ''
       },
-
-      // 预览图片
-      imgList: []
+      auditForm: {
+        auditBy: '', // 审核人id
+        authId: '', // 机构id
+        auditStatus: 1, // 审核状态
+        invalidReason: '' // 审核信息
+      },
+      rules: {
+        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
+      }
     }
   },
   computed: {
     ...mapGetters(['authUserId'])
   },
   created() {
-    this.authId = this.formData.authId = this.$route.query.authId
+    this.auditForm.authId = this.$route.query.authId
     this.getDetail()
   },
   methods: {
     // 数据回显
     getDetail() {
-      getAuthFormData({ authId: this.authId }).then(res => {
-        this.authInfo.address = res.data.address
-        this.authInfo.area = res.data.area
-        this.authInfo.authId = res.data.authId
-        this.authInfo.authParty = res.data.authParty
-        this.authInfo.bannerList = this.imgList = res.data.bannerList
-        this.authInfo.cityId = res.data.cityId
-        this.authInfo.lngAndLat = res.data.lngAndLat
-        this.authInfo.logo = res.data.logo
-        this.authInfo.mobile = res.data.mobile
-        this.authInfo.provinceId = res.data.provinceId
-        this.authInfo.townId = res.data.townId
-        this.authInfo.customFlag = res.data.customFlag
-        this.authInfo.remarks = res.data.remarks
+      getAuthFormData({ authId: this.auditForm.authId }).then((res) => {
+        this.clubInfo = { ...this.clubInfo, ...res.data }
       })
     },
     // 提交审核信息
     submit() {
-      this.$refs.formRef.validate(valid => {
+      this.$refs.auditForm.validate((valid) => {
         if (valid) {
           this.isLoading = true
           // 指定审核人
-          this.formData.auditBy = this.authUserId
+          this.auditForm.auditBy = this.authUserId
           // 提交审核信息
-          auditAuth(this.formData).then(res => {
-            if (res.code !== 0) return
-            this.$message.success(res.data)
-            this.$store.dispatch('tagsView/delView', this.$route)
-            this.$router.back()
-          }).finally(() => {
-            this.isLoading = false
-          })
+          auditAuth(this.auditForm)
+            .then((res) => {
+              this.$message.success(res.data)
+              this.$store.dispatch('tagsView/delView', this.$route)
+              this.$router.back()
+            })
+            .finally(() => {
+              this.isLoading = false
+            })
         }
       })
     }
@@ -153,19 +226,55 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.club-edit {
-  margin-bottom: 80px;
-}
+.app-container {
+  .audit-content {
+    max-width: 1000px;
+    margin: 0 auto;
+    margin-top: 25px;
+  }
+
+  .map {
+    cursor: pointer;
+    span {
+      margin-left: 4px;
+      color: #409eff;
+    }
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    // grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+  .row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 25px;
+    .col {
+      font-size: 14px;
+      color: #333;
+      &:first-child {
+        min-width: 100px;
+        text-align: right;
+        margin-right: 8px;
+        font-weight: bold;
+        color: #666;
+      }
+
+      .el-image {
+        margin-left: 12px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
 
-.club-edit-form {
-  width: 600px;
-  margin: 0 auto;
-  margin-top: 80px;
-}
-.submit-btn {
-  text-align: center;
   .el-button {
-    width: 140px;
+    width: 120px;
   }
 }
 </style>

src/views/admin/logistics-licensed/club/device/index.vue

@@ -1,9 +1,151 @@
 <template>
-  <div>设备列表</div>
+  <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">
+        <permission-button type="primary" @click="handleFilter">查询</permission-button>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :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="创建时间" class-name="status-col" width="300px" 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="240px" class-name="small-padding fixed-width">
+        <template slot-scope="{ row }">
+          <permission-button
+            type="default"
+            size="mini"
+            @click="$_navigationTo(`device-detail?id=${row.productId}`)"
+          >
+            查看
+          </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>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 二维码 -->
+    <transition name="fade">
+      <qrcode v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
+    </transition>
+  </div>
 </template>
 
 <script>
-export default {}
+import PermissionButton from '@/views/components/PermissionButton'
+import { getProdList } from '@/api/product'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import Qrcode from '@/components/qrcode'
+import { formatDate } from '@/utils'
+import { mapGetters } from 'vuex'
+import { setStorage } from '@/utils/storage'
+export default {
+  name: 'ComplexTable',
+  components: { Pagination, Qrcode, PermissionButton },
+  filters: {
+    formatTime(time) {
+      if (!time) {
+        return ''
+      }
+      return formatDate(time, 'yyyy-MM-DD HH:mm:ss')
+    }
+  },
+
+  data() {
+    return {
+      authParty: '',
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        status: '',
+        auditStatus: '',
+        authId: '',
+        productName: '',
+        snCode: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      showQRcode: false,
+      productInfo: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['userIdentity'])
+  },
+  created() {
+    this.listQuery.authId = this.$route.query.id
+    this.authParty = this.$route.query.authParty
+    // 保存机构id，用于设备管理
+    setStorage('device-setting-authId', this.listQuery.authId)
+    this.getList()
+  },
+
+  methods: {
+    // 获取列表信息
+    getList() {
+      getProdList(this.listQuery)
+        .then((res) => {
+          const { total, list } = res.data
+          this.total = total
+          this.list = list
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
+    },
+    // 过滤列表
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    // 显示二维码
+    handleShowQRcode(item) {
+      this.productInfo = item
+      this.productInfo.authParty = this.authParty
+      this.showQRcode = true
+    },
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
 </script>
 
-<style></style>
+<style lang="scss" scoped></style>

src/views/admin/logistics-licensed/club/index.vue

@@ -1,207 +1,31 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-control">
-        <span>机构名称:</span>
-        <el-input
-          v-model="listQuery.authParty"
-          placeholder="授权机构"
-          style="width: 280px"
-          class="filter-item"
-          @keyup.enter.native="handleFilter"
-        />
-      </div>
-      <div class="filter-control">
-        <el-button type="primary" @click="getList">查询</el-button>
-      </div>
-    </div>
-    <!-- 表格区域 -->
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :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="创建时间" class-name="status-col" width="360px">
-        <template slot-scope="{ row }">
-          <span>{{ row.createTime | formatTime }}</span>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="创建人" class-name="status-col" width="160px" prop="createBy" /> -->
-      <el-table-column label="寄送状态" width="140px" 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>
-            </template>
-            <template v-else>
-              <span style="margin-right: 10px" class="status success">已寄送</span>
-            </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" class-name="small-padding fixed-width" width="300">
-        <template slot-scope="{ row }">
-          <el-button
-            type="primary"
-            size="mini"
-            @click="$_navigationTo(`club-detail?id=${row.authId}&authParty=${row.authParty}`)"
-          >
-            查看
-          </el-button>
-          <el-button
-            type="primary"
-            size="mini"
-            @click="$_navigationTo(`club-device-list?id=${row.authId}&authParty=${row.authParty}`)"
-          >
-            查看设备认证
-          </el-button>
-          <el-button type="primary" size="mini" @click="onSend(row)"> 寄送 </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 页码 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="listQuery.pageNum"
-      :limit.sync="listQuery.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 物流信息 -->
-    <el-dialog title="机构授权牌寄送" :visible.sync="dialogVisible" width="40%">
-      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px">
-        <el-form-item label="快递公司：" prop="company">
-          <el-select v-model="formData.company" placeholder="请选择快递公司" clearable>
-            <el-option label="请选择快递公司" value="" />
-            <el-option label="顺丰快递" :value="1" />
-            <el-option label="京东快递" :value="2" />
-            <el-option label="圆通速递" :value="3" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="物流编号：" prop="num">
-          <el-input v-model="formData.num" placeholder="请输入物流编号" />
-        </el-form-item>
-        <el-form-item label="图片备注：" prop="imageRemark">
-          <el-input v-show="false" v-model="formData.imageRemark" />
-          <upload-image
-            tip="请上传jpg/png格式的图片，最大不超过5M，最多可上传6张"
-            :multiple="true"
-            :limit="6"
-            accept=".jpg,.png"
-          />
-        </el-form-item>
-        <el-form-item label="备注：" prop="remark">
-          <el-input v-model="formData.remark" type="textarea" rows="4" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-      </span>
-    </el-dialog>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="未寄送" name="first">
+        <club-list />
+      </el-tab-pane>
+      <el-tab-pane label="已寄送" name="second">
+        <club-list />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import { fecthAuthList } from '@/api/auth'
-import Pagination from '@/components/Pagination'
-import UploadImage from '@/components/UploadImage'
-import { formatDate } from '@/utils'
+import ClubList from '../components/club-list.vue'
 export default {
-  name: 'ComplexTable',
-  components: { Pagination, UploadImage },
-  filters: {
-    formatTime(time) {
-      if (!time) {
-        return ''
-      }
-      return formatDate(time, 'yyyy-MM-DD HH:mm:ss')
-    }
+  components: {
+    ClubList
   },
   data() {
     return {
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      dialogVisible: false,
-      // 查询参数
-      listQuery: {
-        authParty: '', // 授权机构
-        authUserId: '', // 供应商用户id
-        pageNum: 1, // 页码
-        pageSize: 10, // 分页
-        status: ''
-      },
-      formData: {
-        company: '',
-        num: '',
-        imageRemark: '',
-        remark: ''
-      },
-      rules: {
-        company: [{ required: true, message: '快递公司名称不能为空', trigger: ['blur'] }],
-        num: [{ required: true, message: '物流编号不能为空', trigger: ['blur'] }]
-      }
+      activeName: 'first'
     }
   },
-  created() {
-    this.listQuery.authUserId = this.$route.query.id
-    this.getList()
-  },
   methods: {
-    // 获取授权列表
-    getList() {
-      this.listLoading = true
-      fecthAuthList(this.listQuery)
-        .then((response) => {
-          if (response.code !== 0) {
-            return this.$message.error('授权列表信息获取失败')
-          }
-          const { list, total } = response.data
-          this.list = list
-          this.total = total
-        })
-        .catch((err) => {
-          console.log(err)
-          return this.$message.error('授权列表信息获取失败')
-        })
-        .finally(() => {
-          this.listLoading = false
-        })
-    },
-    // 过滤列表
-    handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
-    },
-
-    onSend(row) {
-      console.log(row)
-      this.dialogVisible = true
-    },
-
-    indexMethod(index) {
-      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
-    }
+    handleClick() {}
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style></style>

src/views/admin/logistics-licensed/components/club-list.vue

@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input
+          v-model="listQuery.authParty"
+          placeholder="授权机构"
+          style="width: 280px"
+          class="filter-item"
+          @keyup.enter.native="handleFilter"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList">查询</el-button>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :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="创建时间" class-name="status-col" width="360px">
+        <template slot-scope="{ row }">
+          <span>{{ row.createTime | formatTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="创建人" class-name="status-col" width="160px" prop="createBy" /> -->
+      <el-table-column label="寄送状态" width="140px" 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>
+            </template>
+            <template v-else>
+              <span style="margin-right: 10px" class="status success">已寄送</span>
+            </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" class-name="small-padding fixed-width" width="300">
+        <template slot-scope="{ row }">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="$_navigationTo(`club-detail?id=${row.authId}&authParty=${row.authParty}`)"
+          >
+            查看
+          </el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="$_navigationTo(`device-list?id=${row.authId}&authParty=${row.authParty}`)"
+          >
+            查看设备认证
+          </el-button>
+          <el-button type="primary" size="mini" @click="onSend(row)"> 寄送 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 物流信息 -->
+    <el-dialog title="机构授权牌寄送" :visible.sync="dialogVisible" width="40%">
+      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="快递公司：" prop="company">
+          <el-select v-model="formData.company" placeholder="请选择快递公司" clearable>
+            <el-option label="请选择快递公司" value="" />
+            <el-option label="顺丰快递" :value="1" />
+            <el-option label="京东快递" :value="2" />
+            <el-option label="圆通速递" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="物流编号：" prop="num">
+          <el-input v-model="formData.num" placeholder="请输入物流编号" />
+        </el-form-item>
+        <el-form-item label="图片备注：" prop="imageRemark">
+          <el-input v-show="false" v-model="formData.imageRemark" />
+          <upload-image
+            tip="请上传jpg/png格式的图片，最大不超过5M，最多可上传6张"
+            :multiple="true"
+            :limit="6"
+            accept=".jpg,.png"
+          />
+        </el-form-item>
+        <el-form-item label="备注：" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" rows="4" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { fecthAuthList } from '@/api/auth'
+import Pagination from '@/components/Pagination'
+import UploadImage from '@/components/UploadImage'
+import { formatDate } from '@/utils'
+export default {
+  name: 'ComplexTable',
+  components: { Pagination, UploadImage },
+  filters: {
+    formatTime(time) {
+      if (!time) {
+        return ''
+      }
+      return formatDate(time, 'yyyy-MM-DD HH:mm:ss')
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      dialogVisible: false,
+      // 查询参数
+      listQuery: {
+        authParty: '', // 授权机构
+        authUserId: '', // 供应商用户id
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页
+        status: ''
+      },
+      formData: {
+        company: '',
+        num: '',
+        imageRemark: '',
+        remark: ''
+      },
+      rules: {
+        company: [{ required: true, message: '快递公司名称不能为空', trigger: ['blur'] }],
+        num: [{ required: true, message: '物流编号不能为空', trigger: ['blur'] }]
+      }
+    }
+  },
+  created() {
+    this.listQuery.authUserId = this.$route.query.id
+    this.getList()
+  },
+  methods: {
+    // 获取授权列表
+    getList() {
+      this.listLoading = true
+      fecthAuthList(this.listQuery)
+        .then((response) => {
+          if (response.code !== 0) {
+            return this.$message.error('授权列表信息获取失败')
+          }
+          const { list, total } = response.data
+          this.list = list
+          this.total = total
+        })
+        .catch((err) => {
+          console.log(err)
+          return this.$message.error('授权列表信息获取失败')
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
+    },
+    // 过滤列表
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+
+    onSend(row) {
+      console.log(row)
+      this.dialogVisible = true
+    },
+
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/admin/logistics-licensed/index.vue

@@ -2,20 +2,20 @@
   <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="未寄送" name="first">
-        <table-list />
+        <supplier-list />
       </el-tab-pane>
       <el-tab-pane label="已寄送" name="second">
-        <table-list />
+        <supplier-list />
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-import TableList from './components/table-list.vue'
+import SupplierList from './components/supplier-list.vue'
 export default {
   components: {
-    TableList
+    SupplierList
   },
   data() {
     return {