认证通v1.7.4版本页面绘制完成

src/router/module/normal/club.js

@@ -50,11 +50,17 @@ const clubRoutes = [
         name: 'ClubDeviceList',
         meta: { title: '设备列表', noCache: true }
       },
+      {
+        path: 'device-bind',
+        component: () => import('@/views/normal/club/device/bind'),
+        name: 'ClubDeviceBind',
+        meta: { title: '关联已认证设备', noCache: true }
+      },
       {
         path: 'device-add',
         component: () => import('@/views/normal/club/device/edit'),
         name: 'ClubDeviceAdd',
-        meta: { title: '添加设备', noCache: true }
+        meta: { title: '新设备认证', noCache: true }
       },
       {
         path: 'device-edit',

src/views/components/AssociatedClubList/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="associated-club-list">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.authParty" placeholder="机构名称" size="mini" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <el-button size="mini" type="primary">搜索</el-button>
+      </div>
+    </div>
+    <el-table :data="list" :show-header="false" border @selection-change="handleSelectionChange">
+      <el-table-column v-if="selection" type="selection" width="50" align="center" />
+      <el-table-column prop="authParty" />
+      <el-table-column v-if="control" width="100" align="center">
+        <template slot-scope="{ row }">
+          <slot name="control" :row="row" />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AssociatedClubList',
+  props: {
+    list: {
+      type: Array,
+      default: () => [
+        {
+          authParty: '测试机构名'
+        }
+      ]
+    },
+    deleted: {
+      type: Boolean,
+      default: true
+    },
+    selection: {
+      type: Boolean,
+      default: true
+    },
+    control: {
+      type: Boolean,
+      default: true
+    },
+    detail: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        authParty: ''
+      }
+    }
+  },
+  methods: {
+    handleFilter() {
+      this.$emit('filter', this.listQuery)
+    },
+    handleSelectionChange(val) {
+      if (!this.selection) return
+      this.$emit('selected', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+  background: #eee;
+  padding: 6px 10px;
+
+  .filter-control {
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/components/SncodeList/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="associated-club-list">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>设备SN码:</span>
+        <el-input v-model="listQuery.sncode" placeholder="设备SN码" size="mini" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <el-button size="mini" type="primary">搜索</el-button>
+      </div>
+    </div>
+    <el-table :data="list" :show-header="false" border @selection-change="handleSelectionChange">
+      <el-table-column v-if="selection" type="selection" width="50" align="center" />
+      <el-table-column prop="sncode" />
+      <el-table-column v-if="control" width="100" align="center">
+        <template slot-scope="{ row }">
+          <slot name="control" :row="row" />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AssociatedClubList',
+  props: {
+    list: {
+      type: Array,
+      default: () => [
+        {
+          sncode: 'adgsadgsdag'
+        }
+      ]
+    },
+    deleted: {
+      type: Boolean,
+      default: true
+    },
+    selection: {
+      type: Boolean,
+      default: true
+    },
+    control: {
+      type: Boolean,
+      default: true
+    },
+    detail: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        sncode: ''
+      }
+    }
+  },
+  methods: {
+    handleFilter() {
+      this.$emit('filter', this.listQuery)
+    },
+    handleSelectionChange(val) {
+      if (!this.selection) return
+      this.$emit('selected', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+  background: #eee;
+  padding: 6px 10px;
+
+  .filter-control {
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/components/index.js

@@ -8,3 +8,5 @@ export { default as MemberBenefits } from './MemberBenefits/index.vue'
 export { default as RadioCard } from './RadioCard/index.vue'
 export { default as ClubListSelector } from './ClubListSelector/index.vue'
 export { default as BrandEditForm } from './BrandEditForm/index.vue'
+export { default as AssociatedClubList } from './AssociatedClubList/index.vue'
+export { default as SncodeList } from './SncodeList/index.vue'

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="page-form-container">
+    <el-form label-width="110px" :model="formData" :rules="rules">
+      <el-form-item label="认证方式:">关联已认证设备</el-form-item>
+      <el-form-item label="选设备SN码:" prop="sncodeType">
+        <el-radio-group v-model="formData.sncodeType" size="mini">
+          <el-radio :label="1">所有设备SN码</el-radio>
+          <el-radio :label="2">关联该机构设备SN码</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="SN码列表:" prop="sncodeList">
+        <el-checkbox-group v-model="formData.sncodeList" />
+        <el-button size="mini" type="primary" @click="dialogCodeListVisible = true">选择SN码</el-button>
+      </el-form-item>
+      <el-form-item>
+        <sncode-list class="sncode-list" :selection="false" :control="true">
+          <template #control>
+            <el-button size="mini" type="danger">删除</el-button>
+          </template>
+        </sncode-list>
+      </el-form-item>
+    </el-form>
+
+    <!-- 表单提交 返回 -->
+    <div class="control-box">
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button type="warning" @click="navigateBack">返回</el-button>
+    </div>
+
+    <!-- 选择sn码 -->
+    <el-dialog title="所有设备SN码" :visible.sync="dialogCodeListVisible" width="30%" :show-close="false">
+      <sncode-list :selection="true" :control="false" />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="mini" @click="dialogCodeListVisible = false">取 消</el-button>
+        <el-button type="primary" size="mini" @click="dialogCodeListVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { SncodeList } from '@/views/components'
+export default {
+  components: {
+    SncodeList
+  },
+  data() {
+    return {
+      dialogCodeListVisible: false,
+      formData: {
+        sncodeType: 1,
+        sncodeList: []
+      },
+      listQuery: {
+        sncode: ''
+      },
+      sncodeList: [
+        {
+          sncode: 'sdalfjdsalg'
+        }
+      ],
+      rules: {
+        sncodeList: [{ type: 'array', required: true, message: 'SN码列表不能为空', trigger: ['change'] }]
+      }
+    }
+  },
+  methods: {
+    submit() {},
+    onSncodeFilter() {},
+    handleSelectionChange() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+  background: #eee;
+  padding: 6px 10px;
+
+  .filter-control {
+    margin-bottom: 0;
+  }
+}
+</style>

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

@@ -1,122 +1,71 @@
 <template>
-  <div v-loading="isLoading" class="addProduct page-form-container">
-    <el-form ref="addFormRef" label-width="130px" class="addForm" :model="formData" :rules="rules">
-      <el-form-item label="认证方式:">
-        <el-radio-group v-model="formData.authType" @change="onAuthTypeChange">
-          <el-radio :label="1">新设备认证</el-radio>
-          <el-radio :label="2">关联已认证设备</el-radio>
-        </el-radio-group>
+  <div class="device-edit page-form-container">
+    <el-form label-width="130px" :model="formData" :rules="rules">
+      <el-form-item label="认证方式：">
+        <span>{{ authTypeName }}</span>
       </el-form-item>
-
-      <template v-if="formData.authType === 1 || (formData.authType === 2 && formData.snCode)">
-        <el-form-item label="设备名称:" prop="productTypeId">
-          <el-select v-model="formData.productTypeId" filterable placeholder="选择设备" style="width: 100%" clearable>
-            <el-option
-              v-for="item in deviceList"
-              :key="item.productTypeId"
-              :label="item.name"
-              :value="item.productTypeId"
-            />
-          </el-select>
-        </el-form-item>
-      </template>
-
-      <el-form-item label="设备SN码:" prop="snCode">
-        <template v-if="formData.authType === 1">
-          <el-input v-model="formData.snCode" placeholder="请输入设备SN码" />
-        </template>
-        <template v-else>
-          <el-select
-            v-model="formData.snCode"
-            filterable
-            placeholder="请选择设备SN码"
-            style="width: 100%"
-            clearable
-            @change="onSnCodeChange"
-          >
-            <el-option v-for="code in productSnList" :key="code" :label="code" :value="code" />
-          </el-select>
-        </template>
+      <el-form-item 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>
-
-      <template v-if="formData.authType === 1 || (formData.authType === 2 && formData.snCode)">
-        <!-- **************** 新方法配置授权牌 START ******************* -->
-        <el-form-item label="授权牌:">
-          <el-radio-group v-model="formData.certificateImageType" size="mini" @change="onCertificateImageTypeChange">
-            <el-radio :label="1" border>模板库生成</el-radio>
-            <el-radio :label="2" border>自定义上传</el-radio>
-          </el-radio-group>
-          <div style="margin-top: 12px">
-            <template v-if="formData.certificateImageType === 2">
-              <upload-image
-                tip="建议尺寸：150px * 112px"
-                :image-list="certificateImageList"
-                :before-upload="beforeCertificateImageUpload"
-                @success="uploadCertificateImageSuccess"
-                @remove="handleCertificateImageRemove"
-              />
-              <el-input v-model="formData.certificateImage" class="hiddenInput" />
-            </template>
-            <template v-else>
-              <preview-image v-if="formData.certificateImage" :src="formData.certificateImage" />
-            </template>
+      <el-form-item label="设备SN码：" prop="snCode">
+        <el-input v-model="formData.snCode" placeholder="设备SN码" />
+      </el-form-item>
+      <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>
+            <preview-image v-if="formData.certificateImage" :src="formData.certificateImage" />
           </div>
-        </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">
+        </template>
+        <template v-else>
           <upload-image
-            tip="建议图片分辨率：242px*242px"
-            :limit="1"
-            :image-list="invoiceImageList"
-            :before-upload="beforeInvoiceImageUpload"
-            @success="uploadInvoiceImageSuccess"
-            @remove="handleInvoiceImageRemove"
+            tip="建议尺寸：150px * 112px"
+            :image-list="certificateImageList"
+            :before-upload="beforeCertificateImageUpload"
+            @success="uploadCertificateImageSuccess"
+            @remove="handleCertificateImageRemove"
           />
-          <el-input v-show="false" v-model="formData.invoiceImage" />
-        </el-form-item>
-      </template>
+        </template>
+      </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>
-    <div class="submit-btn">
+
+    <!-- 表单提交 返回 -->
+    <div class="control-box">
       <el-button type="primary" @click="submit">保存</el-button>
-      <el-button type="warning" @click="navigateBack()">返回</el-button>
+      <el-button type="warning" @click="navigateBack">返回</el-button>
     </div>
   </div>
 </template>
 
 <script>
 import UploadImage from '@/components/UploadImage'
-import {
-  saveProduct,
-  getProductById,
-  fetchProductSelectList,
-  fetchProductSnList,
-  fetchDetialBySnCode
-} from '@/api/product'
-import { mapGetters } from 'vuex'
+import { fetchProductSelectList, getProductById } from '@/api/product'
 import { isSnCode } from '@/utils/validate'
 import { getStorage } from '@/utils/storage'
-import { deepClone } from '@/utils'
-
-const resetFormData = () => ({
-  authId: '', //	授权id
-  relationId: '',
-  authType: 1,
-  authUserId: '',
-  createBy: '', //	创建人id
-  certificateImage: '', //	授权牌照
-  // 	设备参数列表
-  productId: '', //	授权设备id
-  snCode: '', //	设备SN码
-  certificateImageType: 1,
-  productTypeId: '',
-  purchaseWay: '', // 购买渠道
-  invoiceImage: '' // 发票
-})
-
 export default {
   components: { UploadImage },
   data() {
@@ -127,112 +76,51 @@ export default {
       callback()
     }
     return {
-      isLoading: false,
       editType: 'add',
-      paramsCount: 4,
-      brandList: [],
-      deviceList: [], // 设备列表
-      firstAuthType: '',
-      formData: resetFormData(),
+      isLoading: false,
+      formData: {
+        authId: '', //	授权id
+        relationId: '',
+        authType: 1, // 认证类型
+        authUserId: '',
+        certificateImage: '', //	授权牌照
+        // 	设备参数
+        productId: '', //	授权设备id
+        snCode: '', //	设备SN码
+        certificateImageType: 1,
+        productTypeId: '',
+        purchaseWay: '', // 购买渠道
+        invoiceImage: '' // 发票
+      },
+      productCateList: [],
+      certificateImageList: [],
+      invoiceImageList: [],
       rules: {
         certificateImage: [{ required: true, message: '授权牌照不能为空', trigger: 'change' }],
         snCode: [{ required: true, message: 'SN码不能为空' }, { validator: valideSNcode }],
         productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }]
-      },
-      // 授权牌照图片列表
-      certificateImageList: [],
-      // 发票
-      invoiceImageList: [],
-      // sn list
-      productSnList: [],
-      copyData: null
+      }
     }
   },
   computed: {
-    ...mapGetters(['authUserId', 'proxyInfo', 'shopType', 'infoId'])
+    authTypeName() {
+      return this.formData.authType === 1 ? '新设备认证' : '关联已认证设备'
+    }
   },
   created() {
-    this.init()
+    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()
+    }
   },
   methods: {
-    init() {
-      this.editType = this.$route.query.type || 'add'
-      this.formData.relationId = this.$route.query.relationId
-      this.formData.productId = this.$route.query.id
-      // this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
-      // 获取当前设备所属机构的id
-      this.formData.authId = getStorage('device-setting-authId')
-      this.fetchDeviceList()
-      this.fetchProductSnList()
-      if (this.editType === 'edit') {
-        this.fetchProductDetail()
-      }
-    },
-
-    // 授权牌类型变化
-    onCertificateImageTypeChange(value) {
-      this.certificateImageList = []
-      this.formData.certificateImage = ''
-      this.$refs.addFormRef.clearValidate('certificateImage')
-    },
-
-    // 设备sn码变化
-    async onSnCodeChange(snCode) {
-      if (!snCode) return
-      try {
-        const res = await fetchDetialBySnCode({ snCode })
-        this.formData.invoiceImage = res.data.invoiceImage
-        this.formData.purchaseWay = res.data.purchaseWay
-        this.formData.certificateImage = res.data.certificateImage
-        this.formData.certificateImageType = res.data.certificateImageType
-        this.formData.productTypeId = res.data.productTypeId
-        // this.formData.productId = res.data.productId
-        if (res.data.invoiceImage) {
-          this.invoiceImageList = [{ name: '发票', url: res.data.invoiceImage }]
-        }
-        if (res.data.certificateImage) {
-          this.certificateImageList = [{ name: '授权牌图片', url: res.data.certificateImage }]
-        }
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 设备认证类型变化
-    onAuthTypeChange(authType) {
-      // 拷贝数据
-      const copyData = deepClone({
-        certificateImageList: this.certificateImageList,
-        invoiceImageList: this.invoiceImageList,
-        // productSnList: this.productSnList,
-        formData: this.formData
-      })
-
-      this.certificateImageList = []
-      this.invoiceImageList = []
-      // this.productSnList = []
-      this.$refs.addFormRef.resetFields()
-
-      if (this.copyData) {
-        const { certificateImageList, invoiceImageList, formData } = this.copyData
-        this.certificateImageList = certificateImageList
-        this.invoiceImageList = invoiceImageList
-        // this.productSnList = productSnList
-        this.formData = formData
-      }
-      this.copyData = copyData
-      this.formData.authType = authType
-    },
-
-    // 获取设备sn码列表
-    async fetchProductSnList() {
-      try {
-        const res = await fetchProductSnList({ authId: this.formData.authId })
-        this.productSnList = res.data
-      } catch (error) {
-        console.log(error)
-      }
-    },
+    // 提交
+    submit() {},
 
     // 获取设备信息
     async fetchProductDetail() {
@@ -263,55 +151,14 @@ export default {
       if (data.certificateImage) {
         this.certificateImageList = [{ name: '授权牌图片', url: data.certificateImage }]
       }
-      this.firstAuthType = data.authType
       this.isLoading = false
     },
 
-    // 提交表单
-    async submit() {
+    // 获取设备分类列表
+    async fetchProductCateList() {
       try {
-        await this.$refs.addFormRef.validate()
-        this.onSave()
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 保存表单数据
-    onSave() {
-      this.isLoading = true
-      // createBy先判断是否为代理操作，是就从代理数据中获取，否则直接获取当前登录用户的信息
-      this.formData.createBy = this.proxyInfo?.authUserId || this.authUserId
-
-      if (this.firstAuthType === 2 && this.formData.authType === 1) {
-        this.formData.productId = ''
-      }
-
-      saveProduct(this.formData)
-        .then((res) => {
-          if (res.code !== 0) return
-          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}`)
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-
-    // 获取设备列表
-    async fetchDeviceList() {
-      try {
-        const res = await fetchProductSelectList({
-          authUserId: this.authUserId
-        })
-        this.deviceList = res.data
+        const res = await fetchProductSelectList({ authUserId: this.authUserId })
+        this.productCateList = res.data
       } catch (error) {
         console.log(error)
       }
@@ -354,42 +201,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.addProduct {
-  .form-group {
-    margin-bottom: 2%;
-    .param-title {
-      width: 30%;
-    }
-    .param-info {
-      width: 68%;
-      margin-left: 2%;
-    }
-  }
-}
-
-.submit-btn {
-  text-align: center;
-  .el-button {
-    width: 140px;
-  }
-}
-.paramsItem {
-  position: relative;
-  .closed {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: -20px;
-    cursor: pointer;
-    color: #ddd;
-    &:hover {
-      color: #333;
-    }
-  }
-}
-.hiddenInput {
-  height: 0;
-  display: none;
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -29,7 +29,9 @@
       </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-add?type=add`)">添加</permission-button> -->
+        <permission-button type="primary" @click="navigationTo(`device-add?type=add`)">添加新设备认证</permission-button>
+        <permission-button type="primary" @click="navigationTo(`device-add?type=add`)">关联已认证设备</permission-button>
       </div>
     </div>
     <!-- 表格区域 -->
@@ -81,7 +83,7 @@
         </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">
+      <el-table-column label="操作" align="center" width="340px" class-name="small-padding fixed-width">
         <template slot-scope="{ row }">
           <permission-button
             type="primary"
@@ -94,6 +96,7 @@
             二维码
           </permission-button>
           <permission-button v-else type="info" size="mini" disabled> 二维码 </permission-button>
+          <permission-button type="primary" size="mini" @click="dialogClubVisible = true"> 其他关联机构 </permission-button>
           <permission-button type="danger" size="mini" @click="handleRemoveProduct(row)"> 删除 </permission-button>
         </template>
       </el-table-column>
@@ -106,17 +109,27 @@
     <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">
+        <template #control>
+          <el-button size="mini" type="primary">查看</el-button>
+        </template>
+      </associated-club-list>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getProdList, setProductStatus, removeProduct } 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 },
+  components: { QrcodeDevice, AssociatedClubList },
   data() {
     return {
       authParty: '',
@@ -137,7 +150,8 @@ export default {
       productInfo: {},
       // 审核未通过
       auditFailedList: [],
-      auditNoticeFlag: true
+      auditNoticeFlag: true,
+      dialogClubVisible: false
     }
   },
   computed: {

src/views/normal/club/edit.vue

@@ -174,6 +174,17 @@
           <el-input v-model="formData.remarks" placeholder="店铺备注" clearable />
         </el-form-item>
       </template>
+
+      <el-form-item label="已关联机构:">
+        <el-button size="mini" type="primary">关联机构</el-button>
+      </el-form-item>
+      <el-form-item>
+        <associated-club-list :selection="false" :control="true">
+          <template #control>
+            <el-button size="mini" type="danger">删除</el-button>
+          </template>
+        </associated-club-list>
+      </el-form-item>
     </el-form>
 
     <!-- 表单提交 返回 -->
@@ -194,12 +205,22 @@
         <el-button type="primary" size="mini" @click="dialogMapVisible = false">确 定</el-button>
       </div>
     </el-dialog>
+
+    <!-- 关联机构 -->
+    <el-dialog title="添加关联机构" :visible.sync="dialogClubVisible" width="30%" :show-close="false">
+      <associated-club-list :selection="true" :control="false" />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="mini" @click="dialogClubVisible = false">取 消</el-button>
+        <el-button type="primary" size="mini" @click="dialogClubVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import SimpleAMap from '@/components/SimpleAMap'
 import UploadImage from '@/components/UploadImage'
+import { AssociatedClubList } from '@/views/components/index'
 import { mapGetters } from 'vuex'
 import { saveBrandAuth, getAuthFormData } from '@/api/auth'
 import { getAddress } from '@/api/common'
@@ -210,7 +231,8 @@ import { authTempUsed } from '@/api/system'
 export default {
   components: {
     [SimpleAMap.name]: SimpleAMap,
-    UploadImage
+    UploadImage,
+    AssociatedClubList
   },
   data() {
     var validatePoint = (rule, value, callback) => {
@@ -252,6 +274,8 @@ export default {
       value: [],
       options: [],
 
+      dialogClubVisible: true,
+
       authId: '',
       disabled: false,
       area: '',

src/views/normal/club/index.vue

@@ -27,9 +27,19 @@
         <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.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="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>
       <!-- 机构设备信息导出  -->
@@ -91,9 +101,12 @@
 
       <el-table-column label="扫码次数" align="center" prop="scanCount" width="80" />
 
-      <el-table-column label="明星机构" align="center" width="80">
+      <el-table-column label="明星机构/排序" align="center" width="160">
         <template slot-scope="{ row }">
-          <el-checkbox v-model="row.starFlag" :true-label="1" :false-label="0" @change="onStarChange(row, $event)" />
+          <div class="star-sort">
+            <el-checkbox v-model="row.starFlag" :true-label="1" :false-label="0" @change="onStarChange(row, $event)" />
+            <el-input placeholder="排序" size="mini" />
+          </div>
         </template>
       </el-table-column>
 
@@ -193,7 +206,9 @@ export default {
         pageNum: 1, // 页码
         pageSize: 10, // 分页
         status: '',
-        starFlag: null
+        starFlag: null,
+        productName: '',
+        sncode: ''
       },
 
       improtDialogVisible: false,
@@ -525,4 +540,15 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<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/user/index.vue

@@ -77,7 +77,7 @@
           </template>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="200px" align="center">
+      <el-table-column label="操作" width="280px" align="center">
         <template slot-scope="{ row }">
           <permission-button
             type="primary"
@@ -86,6 +86,7 @@
             @click="handleResetPwd(row)"
           >重置密码</permission-button>
           <permission-button type="primary" size="mini" @click="handleEdit(row)">编辑</permission-button>
+          <permission-button type="primary" size="mini" @click="onChangeClub(row)">更换机构</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -108,6 +109,22 @@
         <el-button type="primary" @click="onSave">确 定</el-button>
       </span>
     </el-dialog>
+
+    <!-- 绑定/更换机构 -->
+    <el-dialog title="绑定/更换机构" :visible.sync="dialogChangeClubVisible" width="30%" :show-close="false">
+      <el-form :model="changeClubForm" :rules="changeClubRules" label-width="70px">
+        <el-form-item prop="clubId" label="机构：">
+          <el-select v-model="changeClubForm.select" placeholder="请选择机构" style="width:100%">
+            <el-option label="机构A" value="1" />
+            <el-option label="机构B" value="2" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogChangeClubVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogChangeClubVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -137,6 +154,7 @@ export default {
       total: 0,
       authId: '', // 机构id
       editType: 'add',
+      dialogChangeClubVisible: false,
       listLoading: false,
       listQuery: {
         authUserId: '', // 机构id
@@ -156,6 +174,12 @@ export default {
           { required: true, message: '请输入手机号', trigger: ['blur'] },
           { validator: validateMobile, message: '手机号格式不正确', trigger: ['blur'] }
         ]
+      },
+      changeClubForm: {
+        clubId: ''
+      },
+      changeClubRules: {
+        clubId: [{ required: true, message: '请选择机构', trigger: ['change'] }]
       }
     }
   },
@@ -166,6 +190,11 @@ export default {
     this.getList()
   },
   methods: {
+    // 更换机构
+    onChangeClub(row) {
+      this.dialogChangeClubVisible = true
+    },
+
     // 更新列表
     getList() {
       this.listQuery.pageNum = 1