机构设备信息导出

src/views/components/ClubListSelector/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="supplier-list-selector">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.authParty" size="mini" placeholder="机构名称" @keyup.enter.native="filterList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" size="mini" placeholder="审核状态" clearable @change="filterList">
+          <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" size="mini" placeholder="上线状态" clearable @change="filterList">
+          <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">
+        <el-button type="primary" size="mini" @click="filterList">查询</el-button>
+      </div>
+    </div>
+    <el-table
+      ref="multipleTable"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      header-row-class-name="tableHeader"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" width="80" type="selection" />
+      <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 }">
+          <span v-if="row.auditStatus === 2" class="status warning">待审核</span>
+          <span v-if="row.auditStatus === 1" class="status success">审核通过</span>
+          <span v-if="row.auditStatus === 0" class="status danger">审核未通过</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="上线状态" width="160px" align="center">
+        <template slot-scope="{ row }">
+          <template v-if="row.auditStatus === 1">
+            <span v-if="row.status === 0" class="status danger">已下线</span>
+            <span v-else class="status success">已上线</span>
+          </template>
+          <span v-else class="status warning">待上线</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="扫码次数" align="center" prop="" width="80px" />
+    </el-table>
+    <!-- 页码 -->
+    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <div class="control-footer">
+      <el-button type="primary" @click="onCancel">取消</el-button>
+      <el-button type="primary" @click="onConfirm">确认</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { fecthAuthList } from '@/api/auth'
+import { mapGetters } from 'vuex'
+import { deepClone } from '@/utils'
+export default {
+  name: 'ClubListSelector',
+  data() {
+    return {
+      listQuery: {
+        authUserId: '',
+        authParty: '',
+        auditStatus: '',
+        status: '',
+        pageNum: 1, // 页码
+        pageSize: 10 // 分页
+      },
+      list: [],
+      total: 0,
+      listLoading: false,
+      multipleSelection: []
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 取消
+    onCancel() {
+      this.multipleSelection = []
+      this.$emit('cancel', [])
+    },
+
+    // 确认
+    onConfirm() {
+      this.$emit('confirm', deepClone(this.multipleSelection))
+    },
+
+    // 获取机构列表
+    getList() {
+      this.listLoading = true
+      this.list = []
+      this.fecthAuthClubList()
+    },
+
+    // 筛选机构列表
+    filterList() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+
+    // 接口请求获取机构列表
+    async fecthAuthClubList() {
+      try {
+        this.listQuery.authUserId = this.authUserId
+        const res = await fecthAuthList(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.listLoading = false
+      }
+    },
+
+    // 设置选中的行
+    setSelection() {
+      this.list.forEach((row) => {})
+    },
+
+    // 表格列选择
+    handleSelectionChange(rows) {
+      this.multipleSelection = rows
+    },
+
+    // 表格索引
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .pagination-container {
+    padding: 0 !important;
+  }
+}
+.control-footer {
+  text-align: right;
+  margin-top: 15px;
+}
+</style>

src/views/components/index.js

@@ -6,3 +6,4 @@ export { default as DeviceSection } from './DeviceSection/index.vue'
 export { default as DoctorCustomItems } from './DoctorCustomItems/index.vue'
 export { default as MemberBenefits } from './MemberBenefits/index.vue'
 export { default as RadioCard } from './RadioCard/index.vue'
+export { default as ClubListSelector } from './ClubListSelector/index.vue'

src/views/normal/club/index.vue

@@ -27,15 +27,15 @@
         <permission-button type="primary" @click="getList">查询</permission-button>
         <permission-button type="primary" @click="$_navigationTo('club-add?type=edit')">添加</permission-button>
         <permission-button type="primary" @click="improtDialogVisible = true">导入</permission-button>
-        <permission-button type="primary" @click="handleExportExcel">导出</permission-button>
+        <permission-button type="primary" @click="onHandleExport()">导出</permission-button>
       </div>
       <div class="filter-control">
         <permission-button type="primary" @click="downLoadExportExcel">获取导入模板</permission-button>
-        <permission-button type="primary" @click="handleExport(1)">一键下载授权牌</permission-button>
-        <permission-button type="primary" @click="handleExport(3)">一键下载机构二维码</permission-button>
+        <permission-button type="primary" @click="onHandleExport(1)">一键下载授权牌</permission-button>
+        <permission-button type="primary" @click="onHandleExport(3)">一键下载机构二维码</permission-button>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" @click="handleExport(2)">一键下载设备二维码</permission-button>
+        <permission-button type="primary" @click="onHandleExport(2)">一键下载设备二维码</permission-button>
       </div>
     </div>
     <!-- 表格区域 -->
@@ -78,6 +78,8 @@
         </template>
       </el-table-column>
 
+      <el-table-column label="扫码次数" align="center" prop="" width="80" />
+
       <el-table-column label="创建时间" class-name="status-col" width="160px">
         <template slot-scope="{ row }">
           <span>{{ row.createTime | formatTime }}</span>
@@ -134,6 +136,11 @@
       </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" />
@@ -144,13 +151,14 @@
 <script>
 import FileUpload from '@/components/FileUpload'
 import QrcodeClub from '@/components/QrcodeClub'
+import { ClubListSelector } from '@/views/components'
 import { fecthAuthList, changeAuthStatus, removeAuth, authImportExcel } from '@/api/auth'
 import { mapGetters } from 'vuex'
 import { debounce, downloadWithUrl } from '@/utils/tools'
 import handleClipboard from '@/utils/clipboard'
 export default {
   name: 'ComplexTable',
-  components: { FileUpload, QrcodeClub },
+  components: { FileUpload, QrcodeClub, ClubListSelector },
   data() {
     return {
       showQRcode: false,
@@ -185,7 +193,10 @@ export default {
           }
         ]
       },
-      chooseFile: ''
+      chooseFile: '',
+      exportDialogVisible: false,
+      exportType: '',
+      exportClubList: []
     }
   },
   computed: {
@@ -240,22 +251,48 @@ export default {
       }
     },
 
+    // 取消选择机构
+    onSelectorCancel() {
+      this.exportType = ''
+      this.exportClubList = []
+      this.exportDialogVisible = false
+    },
+
+    // 选择确认机构
+    onSelectorConfirm(list) {
+      this.exportClubList = list
+      console.log(this.exportType)
+      if (this.exportType) {
+        this.handleExport(this.exportType) // 导出文件 授权牌 || 二维码
+      } else {
+        this.handleExportExcel() // 导出机构数据 Excel
+      }
+      this.exportDialogVisible = false
+    },
+
+    // 导出下载授权牌 || 二维码 操作
+    onHandleExport(type) {
+      this.exportDialogVisible = true
+      this.exportType = type
+    },
+
     // 导出下载授权牌 || 二维码
     async handleExport(type) {
       let confirmText = ''
       if (type === 1) {
-        confirmText = '授权牌'
+        confirmText = '设备授权牌'
       } else if (type === 2) {
         confirmText = '设备二维码'
       } else {
         confirmText = '机构二维码'
       }
 
-      const text = await this.$confirm(`确认下载所有${confirmText}？`, '提示', {
+      const text = await this.$confirm(`确认下载所选${confirmText}？`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).catch(() => {
+        this.exportClubList = []
         this.$message.info('已取消操作')
       })
       if (text !== 'confirm') return
@@ -276,6 +313,7 @@ export default {
         })
         .finally(() => {
           notification.close()
+          this.onSelectorCancel()
         })
     },
 
@@ -323,6 +361,7 @@ export default {
         })
         .finally(() => {
           notification.close()
+          this.onSelectorCancel()
         })
     },