页面调整优化

src/api/auth.js

@@ -198,6 +198,15 @@ export function resetClubUserPassword(data) {
   })
 }
 
+// 供应商用户导出
+export function exportClubUser(data) {
+  return request({
+    url: '/download/Clubuser/excel',
+    method: 'get',
+    data
+  })
+}
+
 // 设置明星机构
 export function setStarClub(data) {
   return request({

src/api/doc.js

@@ -27,6 +27,15 @@ export function saveFile(data) {
   })
 }
 
+// 文件保存
+export function saveFileWithDir(data) {
+  return request({
+    url: '/database/upload/dictionary ',
+    method: 'post',
+    data
+  })
+}
+
 // 创建文件夹
 export function createPackage(data) {
   return request({

src/components/OssUpload/src/index.vue

@@ -13,6 +13,7 @@
       :on-progress="handleProgress"
       :on-error="handleError"
       :on-exceed="onExceed"
+      @change="handleChooseFile"
     />
     <template v-for="(item, index) in buttonGroup">
       <el-button
@@ -49,6 +50,10 @@ export default {
       type: Boolean,
       default: true
     },
+    delayUpload: {
+      type: Boolean,
+      default: false
+    },
     limit: {
       type: Number,
       default: 1
@@ -111,7 +116,8 @@ export default {
   data() {
     return {
       webkitdirectory: false,
-      uploadFiles: []
+      uploadFiles: [],
+      fileNum: 0
     }
   },
   watch: {
@@ -134,6 +140,9 @@ export default {
     })
   },
   methods: {
+    handleChooseFile(fileNum) {
+      this.fileNum = fileNum
+    },
     handleStart(rawFile) {
       rawFile.uuid = uuidv4()
       const file = {
@@ -171,7 +180,14 @@ export default {
         if (ossUrl) {
           file.ossUrl = ossUrl
         }
-        this.onSuccess(res, file, this.uploadFiles)
+        const successLen = this.uploadFiles.filter(item => item.status === 'success').length
+        if (this.delayUpload) {
+          if (successLen === this.fileNum) {
+            this.onSuccess(res, file, this.uploadFiles)
+          }
+        } else {
+          this.onSuccess(res, file, this.uploadFiles)
+        }
         this.onChange(file, this.uploadFiles)
       }
     },
@@ -217,10 +233,12 @@ export default {
     },
 
     handleClick(type) {
+      this.$emit('typeChange', type)
       if (type === 'file') {
         this.webkitdirectory = false
         this.$refs['upload-inner'].chooseFile()
       } else if (type === 'folder') {
+        this.uploadFiles = []
         this.webkitdirectory = true
         this.$refs['upload-inner'].chooseFile()
       } else if (type === 'record') {

src/components/OssUpload/src/upload.vue

@@ -38,6 +38,7 @@ export default {
     handleChange(ev) {
       const files = ev.target.files
       if (!files) return
+      this.$emit('change', files.length)
       this.uploadFiles(files)
     },
 

src/mixin/base.js

@@ -16,7 +16,7 @@ const option = {
       })
         .then(() => {
           this.$store.dispatch('tagsView/delView', this.$route)
-          this.$router.go(-1)
+          this.$router.back()
         })
         .catch(() => {
           this.$message({

src/utils/tools.js

@@ -1,3 +1,5 @@
+import store from '@/store'
+
 /**
  * 节流
  * @param {Function} func 回调函数
@@ -112,7 +114,12 @@ export function downLoadWithATag(href) {
 }
 
 export function downloadWithUrl(url, name, options = {}) {
-  return fetch(url, options)
+  return fetch(url, {
+    headers: {
+      'x-token': store.getters.token
+    },
+    ...options
+  })
     .then((data) => data.blob())
     .then((res) => {
       const a = document.createElement('a')

src/views/components/ClubListSelector/index.vue

@@ -103,6 +103,10 @@ export default {
 
     // 确认
     onConfirm() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('导出列表不能为空')
+        return
+      }
       this.$emit('confirm', deepClone(this.multipleSelection))
     },
 

src/views/components/ClubUserListSelector/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="list-selector">
+    <!-- 表格区域 -->
+    <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" type="index" width="80px" align="center" />
+      <el-table-column label="机构名称" prop="name" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.name">{{ row.name }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号" width="140" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.mobile">{{ row.mobile }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="注册时间" width="160px" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.addTime | formatTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="微信昵称" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.nickName">{{ row.nickName }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="认证状态" width="120px" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.authenticationStatus == 1" class="status success">已认证</span>
+          <span v-else class="status danger">未认证</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户状态" width="160px" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.status === 0" style="margin-right: 10px" class="status danger">停用</span>
+          <span v-else style="margin-right: 10px" class="status success">启用</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格区域END -->
+    <pagination
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="fetchUserList"
+    />
+
+    <div class="control-footer">
+      <el-button type="primary" @click="onCancel">取消</el-button>
+      <el-button type="primary" @click="onExoprt">导出已选用户</el-button>
+      <el-button type="primary" @click="onExoprtAll">导出全部用户</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getAuthUserList } from '@/api/auth'
+import { deepClone } from '@/utils'
+
+export default {
+  name: 'ClubUserListSelector',
+  data() {
+    return {
+      total: 0,
+      authId: '', // 机构id
+      listLoading: false,
+      listQuery: {
+        authUserId: '', // 机构id
+        name: '', // 用户名
+        status: '',
+        authenticationStatus: '',
+        mobile: '', // 手机号
+        pageNum: 0, // 页码
+        pageSize: 10 // 分页大小
+      },
+      list: [],
+      multipleSelection: []
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 更新列表
+    getList() {
+      this.listQuery.pageNum = 1
+      this.fetchUserList()
+    },
+
+    // 获取列表数据
+    async fetchUserList() {
+      this.listLoading = true
+      this.listQuery.authUserId = this.authUserId
+      try {
+        const res = await getAuthUserList(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.listLoading = false
+      }
+    },
+
+    // 取消
+    onCancel() {
+      this.multipleSelection = []
+      this.$emit('cancel', [])
+    },
+
+    // 导出已选用户
+    onExoprt() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('导出列表不能为空')
+        return
+      }
+      this.$emit('confirm', deepClone(this.multipleSelection))
+    },
+
+    // 导出全部用户
+    onExoprtAll() {
+      this.$emit('confirm', [])
+    },
+
+    // 表格列选择
+    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;
+  padding-bottom: 15px;
+}
+</style>

src/views/components/index.js

@@ -10,3 +10,4 @@ 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'
+export { default as ClubUserListSelector } from './ClubUserListSelector/index.vue'

src/views/normal/activity/video/club-list.vue

@@ -33,10 +33,10 @@
       </div>
       <div class="filter-control">
         <span>机构类型:</span>
-        <el-select v-model="listQuery.authStatus" placeholder="机构类型" clearable @change="getList">
+        <el-select v-model="listQuery.authenticationStatus" placeholder="机构类型" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="未认证机构" :value="0" />
-          <el-option label="已认证机构" :value="2" />
+          <el-option label="已认证机构" :value="1" />
         </el-select>
       </div>
       <div class="filter-control">
@@ -133,7 +133,7 @@ export default {
       listQuery: {
         status: '',
         mobile: '',
-        authStatus: '',
+        authenticationStatus: '',
         pageNum: 1,
         pageSize: 10
       },

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

@@ -17,6 +17,9 @@
       <el-form-item label="设备SN码：" prop="snCode">
         <el-input v-model="formData.snCode" placeholder="设备SN码" />
       </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-form-item label="授权牌：" prop="certificateImageType">
         <el-radio-group v-model="formData.certificateImageType" size="mini">
           <el-radio :label="1">模板库生成</el-radio>
@@ -38,6 +41,19 @@
           />
         </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="purchaseWay">
         <el-input v-model="formData.purchaseWay" placeholder="购买渠道" />
       </el-form-item>
@@ -68,6 +84,7 @@ import { fetchProductSelectList, getProductById, saveProduct } from '@/api/produ
 import { isSnCode } from '@/utils/validate'
 import { getStorage } from '@/utils/storage'
 import { authTempUsed } from '@/api/system'
+import { formatDate } from '@/utils'
 export default {
   components: { UploadImage },
   data() {
@@ -92,7 +109,9 @@ export default {
         certificateImageType: 1,
         productTypeId: '',
         purchaseWay: '', // 购买渠道
-        invoiceImage: '' // 发票
+        invoiceImage: '', // 发票
+        authDate: '',
+        authImageLogo: ''
       },
       productCateList: [],
       certificateImageList: [],
@@ -102,12 +121,22 @@ export default {
         snCode: [{ required: true, message: 'SN码不能为空' }, { validator: valideSNcode }],
         productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }]
       },
-      authTempFlag: false
+      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() {
@@ -136,6 +165,7 @@ export default {
     // 保存
     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' ? '添加' : '修改'
@@ -173,6 +203,11 @@ export default {
             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 }]
@@ -202,6 +237,9 @@ export default {
           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)
       }
@@ -239,6 +277,35 @@ export default {
     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 = ''
     }
   }
 }

src/views/normal/club/edit.vue

@@ -106,7 +106,7 @@
         </div>
       </el-form-item>
 
-      <el-form-item v-if="formData.authImageType === 1" label="授权牌logo:">
+      <el-form-item v-if="authTempFlag && formData.authImageType === 1" label="授权牌logo:">
         <div class="form-label-tip">授权牌logo（提示：授权牌logo与机构名称组合）</div>
         <div style="margin-top: 8px">
           <upload-image

src/views/normal/docs/index.vue

@@ -19,10 +19,12 @@
           <OssUpload
             ref="ossUpload"
             :limit="999"
+            :delay-upload="delayUpload"
             :multiple="true"
             :button-group="buttonGroup"
             :on-success="onSuccess"
             :on-error="onError"
+            @typeChange="onOssUploadTypeChange"
           />
         </div>
         <div class="filter-control">
@@ -146,7 +148,8 @@ import {
   updatePackage,
   fetchPathCumbs,
   fetchDirTree,
-  movePackage
+  movePackage,
+  saveFileWithDir
 } from '@/api/doc'
 import { downloadWithUrl } from '@/utils/tools'
 export default {
@@ -219,7 +222,9 @@ export default {
           plain: true,
           icon: 'el-icon-upload2'
         }
-      ]
+      ],
+      uploadType: 'record',
+      delayUpload: false
     }
   },
   computed: {
@@ -322,6 +327,17 @@ export default {
         console.log(error)
       }
     },
+    // 保存上传文件夹
+    async saveUploadDir(fileList) {
+      try {
+        await saveFileWithDir({ params: fileList })
+        this.fetchDocsList()
+        if (this.message) this.message.close()
+        this.message = this.$message.success('文件上传成功')
+      } catch (error) {
+        console.log(error)
+      }
+    },
     // 取消保存
     onCancel() {
       this.formData.fileId = ''
@@ -369,22 +385,45 @@ export default {
       this.$refs.ossUpload.chooseFile()
     },
     // 上传成功
-    onSuccess(res, file) {
+    onSuccess(res, file, fileList) {
+      if (this.uploadType === 'folder') {
+        this.onUploadWithDir(fileList)
+      } else {
+        this.onUploadWithFile(file)
+      }
+    },
+    formatFileData(file) {
       const strList = file.name.split('.')
       const ossName = file.uuid + '.' + strList[strList.length - 1]
-      this.saveUploadFile({
+      return {
         fileName: file.name,
         ossName: ossName,
         ossUrl: file.ossUrl,
         fileSize: file.size,
         parentId: this.fileId,
-        mime: file.raw.type
-      })
+        mime: file.raw.type,
+        filePath: file.raw.webkitRelativePath || ''
+      }
+    },
+    // 文件上传
+    onUploadWithFile(file) {
+      this.saveUploadFile(this.formatFileData(file))
+    },
+    // 文件夹上传
+    onUploadWithDir(fileList) {
+      const uploadFiles = fileList.map((file) => this.formatFileData(file))
+      console.log(uploadFiles)
+      this.saveUploadDir(uploadFiles)
     },
     // 上传错误
     onError(error) {
       console.log(error)
     },
+    // 上传方式修改
+    onOssUploadTypeChange(type) {
+      this.uploadType = type
+      this.delayUpload = type === 'folder'
+    },
     // 查看历史记录
     onUploadHistory() {
       this.$refs.ossUpload.showRecord()
@@ -510,9 +549,11 @@ export default {
       // 获取要删除的文件id
       const filedIds = this.selectionList.map((file) => file.id).join(',')
       try {
+        this.listLoading = true
         await removePackage({ fileId: filedIds })
         this.fetchDocsList()
         this.$message.success('删除成功')
+        this.listLoading = false
       } catch (error) {
         console.log(error)
       }

src/views/normal/user/index.vue

@@ -12,7 +12,7 @@
       </div>
       <div class="filter-control">
         <span>认证状态:</span>
-        <el-select v-model="listQuery.authStatus" clearable @change="getList">
+        <el-select v-model="listQuery.authenticationStatus" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="已认证" :value="1" />
           <el-option label="未认证" :value="0" />
@@ -28,8 +28,8 @@
       </div>
       <div class="filter-control">
         <permission-button type="primary" @click="getList">查询</permission-button>
-        <permission-button type="primary" @click="handleCreate">添加账号</permission-button>
-        <permission-button type="primary" @click="getList">导出</permission-button>
+        <permission-button type="primary" @click="handleCreate">添加用户</permission-button>
+        <permission-button type="primary" @click="onHandleExport">导出</permission-button>
       </div>
     </div>
     <!-- 搜索区域END -->
@@ -74,7 +74,13 @@
           <span v-else>—</span>
         </template>
       </el-table-column>
-      <el-table-column label="状态" width="160px" align="center">
+      <el-table-column label="认证状态" width="120px" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.authenticationStatus == 1" class="status success">已认证</span>
+          <span v-else class="status danger">未认证</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户状态" width="160px" align="center">
         <template slot-scope="{ row }">
           <template v-if="row.status === 0">
             <span style="margin-right: 10px" class="status danger">停用</span>
@@ -130,6 +136,11 @@
         <el-button type="primary" @click="onBindClubConfirm">确 定</el-button>
       </div>
     </el-dialog>
+
+    <!-- 选择导出用户 -->
+    <el-dialog title="选择导出用户" :visible.sync="exportDialogVisible" width="70%">
+      <club-user-list-selector v-if="exportDialogVisible" @cancel="onSelectorCancel" @confirm="onSelectorConfirm" />
+    </el-dialog>
   </div>
 </template>
 
@@ -144,6 +155,8 @@ import {
   resetClubUserPassword
 } from '@/api/auth'
 import { isMobile } from '@/utils/validate'
+import { downloadWithUrl } from '@/utils/tools'
+import { ClubUserListSelector } from '@/views/components'
 
 const resetFormData = () => ({
   clubUserId: '',
@@ -153,6 +166,9 @@ const resetFormData = () => ({
 
 export default {
   name: 'SupplierUserList',
+  components: {
+    ClubUserListSelector
+  },
   data() {
     const validateMobile = (rule, value, callback) => {
       console.log(value)
@@ -173,7 +189,7 @@ export default {
         authUserId: '', // 机构id
         name: '', // 用户名
         status: '',
-        authStatus: '',
+        authenticationStatus: '',
         mobile: '', // 手机号
         pageNum: 0, // 页码
         pageSize: 10 // 分页大小
@@ -197,7 +213,9 @@ export default {
       changeClubRules: {
         authId: [{ required: true, message: '请选择机构', trigger: ['change'] }]
       },
-      bindClubList: []
+      bindClubList: [],
+      exportDialogVisible: false,
+      exportClubList: []
     }
   },
   computed: {
@@ -321,29 +339,6 @@ export default {
         console.log(error)
       }
     },
-    // 删除用户
-    // async handleRemove(row) {
-    //   let confirmType = ''
-    //   try {
-    //     confirmType = await this.$confirm('确认删除改用户？', '提示', {
-    //       confirmButtonText: '确认',
-    //       cancelButtonText: '取消',
-    //       type: 'warning'
-    //     })
-    //   } catch (error) {
-    //     console.log(error)
-    //   }
-
-    //   if (!confirmType) return
-
-    //   try {
-    //     await removeClubUser({ clubUserId: row.clubUserId })
-    //     this.$message.success('删除用户成功')
-    //     this.fetchUserList()
-    //   } catch (error) {
-    //     console.log(error)
-    //   }
-    // },
 
     // 重置密码
     async handleResetPwd(row) {
@@ -360,6 +355,56 @@ export default {
       this.formData = resetFormData()
     },
 
+    // 导出下载机构信息
+    onHandleExport() {
+      this.exportDialogVisible = true
+    },
+
+    // 取消选择机构
+    onSelectorCancel() {
+      this.exportClubList = []
+      this.exportDialogVisible = false
+    },
+
+    // 选择确认机构
+    onSelectorConfirm(list) {
+      this.exportClubList = list
+      this.onExport()
+      this.exportDialogVisible = false
+    },
+
+    // 导出
+    async onExport() {
+      const text = await this.$confirm(`确认下载所选用户列表?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        this.exportClubList = []
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+      let notification = null
+      notification = this.$notify({
+        title: '提示',
+        message: `正在下载用户列表，请勿重复操作！`,
+        duration: 0
+      })
+      const clubUserIds = this.exportClubList.map((item) => item.clubUserId).join(',')
+      // 使用a链接下载
+      const downUrl = `${process.env.VUE_APP_BASE_API}/download/Clubuser/excel?clubUserIds=${clubUserIds}`
+      console.log(downUrl)
+      downloadWithUrl(downUrl, '用户列表')
+        .catch((err) => {
+          console.log(err)
+          this.$message.error(`下载用户列表失败`)
+        })
+        .finally(() => {
+          notification.close()
+          this.onSelectorCancel()
+        })
+    },
+
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     }