小需求优化

src/components/OssUpload/index.js

@@ -0,0 +1 @@
+export { default as OssUpload } from './src'

src/components/OssUpload/src/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="oss-upload">
+    <UploadInner
+      v-show="false"
+      ref="upload-inner"
+      :multiple="multiple"
+      :webkitdirectory="webkitdirectory"
+      :auto-upload="autoUpload"
+      :limit="limit"
+      :file-list="uploadFiles"
+      :on-start="handleStart"
+      :on-success="handleSuccess"
+      :on-progress="handleProgress"
+      :on-error="handleError"
+      :on-exceed="onExceed"
+    />
+    <template v-for="(item, index) in buttonGroup">
+      <el-button
+        :key="index"
+        :type="item.color"
+        :size="item.size"
+        :plain="item.plain"
+        :icon="item.icon"
+        @click="handleClick(item.type)"
+      >
+        <span>{{ item.text }}</span>
+      </el-button>
+    </template>
+    <UploadList ref="record-list" :file-list="uploadFiles" />
+  </div>
+</template>
+
+<script>
+import UploadInner from './upload.vue'
+import UploadList from './upload-list.vue'
+import { v4 as uuidv4 } from 'uuid'
+
+function noop() {}
+
+export default {
+  name: 'OssUpload',
+  components: {
+    UploadInner,
+    UploadList
+  },
+  props: {
+    multiple: Boolean,
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    onRemove: {
+      type: Function,
+      default: noop
+    },
+    onChange: {
+      type: Function,
+      default: noop
+    },
+    onSuccess: {
+      type: Function,
+      default: noop
+    },
+    onProgress: {
+      type: Function,
+      default: noop
+    },
+    onError: {
+      type: Function,
+      default: noop
+    },
+    onExceed: {
+      type: Function,
+      default: noop
+    },
+    buttonGroup: {
+      type: Array,
+      default: () => [
+        {
+          type: 'file',
+          color: 'primary',
+          text: '上传文件',
+          size: 'small',
+          plain: true
+        },
+        {
+          type: 'folder',
+          color: 'primary',
+          text: '上传文件夹',
+          size: 'small',
+          plain: true
+        },
+        {
+          type: 'record',
+          color: 'primary',
+          text: '上传记录',
+          size: 'small',
+          plain: true
+        }
+      ]
+    }
+  },
+  data() {
+    return {
+      webkitdirectory: false,
+      uploadFiles: []
+    }
+  },
+  watch: {
+    fileList: {
+      immediate: true,
+      handler(fileList) {
+        this.uploadFiles = fileList.map((item) => {
+          item.uuid = item.uuid || uuidv4()
+          item.status = item.status || 'success'
+          return item
+        })
+      }
+    }
+  },
+  beforeDestroy() {
+    this.uploadFiles.forEach((file) => {
+      if (file.url && file.url.indexOf('blob:') === 0) {
+        URL.revokeObjectURL(file.url)
+      }
+    })
+  },
+  methods: {
+    handleStart(rawFile) {
+      rawFile.uuid = uuidv4()
+      const file = {
+        status: 'ready',
+        name: rawFile.name,
+        size: rawFile.size,
+        percentage: 0,
+        uuid: rawFile.uuid,
+        raw: rawFile,
+        ossUrl: '',
+        url: ''
+      }
+      try {
+        file.url = URL.createObjectURL(rawFile)
+      } catch (err) {
+        console.error('[Element Error][Upload]', err)
+        return
+      }
+      this.uploadFiles.push(file)
+      this.onChange(file, this.uploadFiles)
+    },
+
+    handleProgress(ev, rawFile) {
+      const file = this.getFile(rawFile)
+      this.onProgress(ev, file, this.uploadFiles)
+      file.status = 'uploading'
+      file.percentage = ev.p || 0
+    },
+
+    handleSuccess(res, rawFile, ossUrl) {
+      const file = this.getFile(rawFile)
+      if (file) {
+        file.status = 'success'
+        file.response = res
+        if (ossUrl) {
+          file.ossUrl = ossUrl
+        }
+        this.onSuccess(res, file, this.uploadFiles)
+        this.onChange(file, this.uploadFiles)
+      }
+    },
+
+    handleError(err, rawFile) {
+      const file = this.getFile(rawFile)
+      const fileList = this.uploadFiles
+      file.status = 'fail'
+      fileList.splice(fileList.indexOf(file), 1)
+      this.onError(err, file, this.uploadFiles)
+      this.onChange(file, this.uploadFiles)
+    },
+
+    handleRemove(file, raw) {
+      if (raw) {
+        file = this.getFile(raw)
+      }
+      const doRemove = () => {
+        this.abort(file)
+        const fileList = this.uploadFiles
+        fileList.splice(fileList.indexOf(file), 1)
+        this.onRemove(file, fileList)
+      }
+      doRemove()
+    },
+
+    submit() {
+      this.uploadFiles
+        .filter((file) => file.status === 'ready')
+        .forEach((file) => {
+          this.$refs['upload-inner'].upload(file.raw)
+        })
+    },
+
+    getFile(rawFile) {
+      const fileList = this.uploadFiles
+      let target
+      fileList.every((item) => {
+        target = rawFile.uuid === item.uuid ? item : null
+        return !target
+      })
+      return target
+    },
+
+    handleClick(type) {
+      if (type === 'file') {
+        this.webkitdirectory = false
+        this.$refs['upload-inner'].chooseFile()
+      } else if (type === 'folder') {
+        this.webkitdirectory = true
+        this.$refs['upload-inner'].chooseFile()
+      } else if (type === 'record') {
+        this.$refs['record-list'].show()
+      }
+    },
+
+    showRecord() {
+      this.$refs['record-list'].show()
+    }
+  }
+}
+</script>

src/components/OssUpload/src/upload-list.vue

@@ -0,0 +1,101 @@
+<template>
+  <!-- 文件上传进度 -->
+  <el-dialog title="上传进度" :visible.sync="visible" width="700px">
+    <el-alert v-if="showAlert" title="上传记录将在关闭浏览器后清除" type="warning" @close="handleAlertClose" />
+    <div class="oss-upload__progress">
+      <el-table :data="fileList" style="width: 100%" :height="tableHeight">
+        <el-table-column label="文件名" prop="name" align="center" />
+        <el-table-column label="大小" width="120" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.size | fileSize }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="进度" width="180" align="center">
+          <template slot-scope="{ row }">
+            <el-progress
+              :percentage="parsePercentage(row.percentage)"
+              :show-text="false"
+              :status="parseStatus(row.status)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.status | parseStatusMessage }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  filters: {
+    fileSize(size) {
+      size = Math.round(size / 1024)
+      if (size < 1024) return size + 'KB'
+      size = Math.round(size / 1024)
+      if (size < 1024) return size + 'MB'
+      return Math.round(size / 1024) + 'GB'
+    },
+    parseStatusMessage(status) {
+      return status === 'success' ? '上传成功' : status === 'fail' ? '上传失败' : '上传中'
+    }
+  },
+  props: {
+    fileList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showAlert: false,
+      visible: false
+    }
+  },
+  computed: {
+    count() {
+      return this.fileList.length
+    },
+    tableHeight() {
+      return this.count > 7 ? '400' : 'auto'
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    handleAlertClose() {
+      this.showAlert = false
+    },
+    parseStatus(status) {
+      if (status === 'fail') return 'exception'
+      if (status === 'success') return 'success'
+      return undefined
+    },
+    parsePercentage(percentage) {
+      return percentage * 100
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.oss-upload__progress {
+  border: 1px solid #eee;
+  border-bottom: 0;
+}
+
+.el-alert {
+  margin-bottom: 12px;
+}
+
+::v-deep {
+  .el-table__body-wrapper {
+    max-height: 356px !important;
+    height: auto !important;
+  }
+}
+</style>

src/components/OssUpload/src/upload.js

@@ -0,0 +1,71 @@
+import { fetchOssInitData } from '@/api/doc'
+import OSS from 'ali-oss'
+let client = null
+let baseFileUrl = ''
+
+function noop() {}
+
+const defaultOptoins = {
+  // 设置并发上传的分片数量。
+  parallel: 10,
+  // 设置分片大小。默认值为1 MB，最小值为100 KB。
+  partSize: 1024 * 1024,
+  headers: {
+    // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
+    'x-oss-forbid-overwrite': 'true'
+  },
+  onProgress: noop,
+  onSuccess: noop,
+  onError: noop
+}
+
+async function initOssClient() {
+  try {
+    const res = await fetchOssInitData()
+    if (res.code) return
+    const { accessKeyId, securityToken, bucket, accessKeySecret } = res.data
+    const config = {
+      // 以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+      region: 'oss-cn-shenzhen',
+      accessKeyId,
+      accessKeySecret,
+      stsToken: securityToken,
+      bucket
+    }
+    client = new OSS(config)
+    baseFileUrl = `https://${bucket}.${config.region}.aliyuncs.com/`
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+export async function multipartUpload(rawFile, options = defaultOptoins) {
+  // 合并配置项
+  options = { ...defaultOptoins, ...options }
+  if (!client) {
+    await initOssClient()
+  }
+  try {
+    const strList = rawFile.name.split('.')
+    const name = process.env.VUE_APP_UPLOAD_DIR + rawFile.uuid + '.' + strList[strList.length - 1]
+    // 分片上传
+    const res = await client.multipartUpload(name, rawFile, {
+      // 获取分片上传进度、断点和返回值。
+      progress: (p, cpt, res) => {
+        options.onProgress({ p, cpt, res })
+      },
+      // 设置并发上传的分片数量。
+      parallel: defaultOptoins.parallel,
+      // 设置分片大小。默认值为1 MB，最小值为100 KB。
+      partSize: defaultOptoins.partSize,
+      // 文件类型
+      mime: rawFile.type,
+      headers: defaultOptoins.headers
+    })
+    const ossUrl = baseFileUrl + res.name
+    options.onSuccess(res, ossUrl)
+    return res
+  } catch (error) {
+    options.onError(error)
+  }
+}

src/components/OssUpload/src/upload.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="oss-upload">
+    <input ref="input-1" type="file" :multiple="multiple" @change="handleChange">
+    <input ref="input-2" type="file" :multiple="multiple" webkitdirectory @change="handleChange">
+  </div>
+</template>
+
+<!-- eslint-disable vue/require-default-prop -->
+<script>
+import { multipartUpload } from './upload.js'
+export default {
+  name: 'UploadInner',
+  props: {
+    multiple: Boolean,
+    webkitdirectory: Boolean,
+    autoUpload: Boolean,
+    onStart: Function,
+    onProgress: Function,
+    onSuccess: Function,
+    onError: Function,
+    onExceed: Function,
+    limit: {
+      type: Number,
+      default: 1
+    },
+    fileList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      uploadFile: [],
+      reqs: {}
+    }
+  },
+  methods: {
+    handleChange(ev) {
+      const files = ev.target.files
+      if (!files) return
+      this.uploadFiles(files)
+    },
+
+    uploadFiles(files) {
+      if (this.limit && this.fileList.length + files.length > this.limit) {
+        this.onExceed && this.onExceed(files, this.fileList)
+        return
+      }
+      let postFiles = Array.prototype.slice.call(files)
+      if (!this.multiple) {
+        postFiles = postFiles.slice(0, 1)
+      }
+      if (postFiles.length === 0) {
+        return
+      }
+      postFiles.forEach((rawFile) => {
+        this.onStart(rawFile)
+        if (this.autoUpload) this.upload(rawFile)
+      })
+    },
+
+    upload(rawFile) {
+      this.$refs['input-1'].value = null
+      this.$refs['input-2'].value = null
+      this.post(rawFile)
+    },
+
+    post(rawFile) {
+      const options = {
+        onProgress: (e) => {
+          this.onProgress(e, rawFile)
+        },
+        onSuccess: (res, ossUrl) => {
+          this.onSuccess(res, rawFile, ossUrl)
+        },
+        onError: (err) => {
+          this.onError(err, rawFile)
+        }
+      }
+      multipartUpload(rawFile, options)
+    },
+
+    chooseFile() {
+      this.$nextTick(() => {
+        if (this.webkitdirectory) {
+          this.$refs['input-2'].click()
+        } else {
+          this.$refs['input-1'].click()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/permission.js

@@ -10,7 +10,7 @@ if (userInfo) {
 }
 
 // 路由白名单
-const whiteList = ['/login']
+const whiteList = ['/login', '/test/oss']
 const shareList = ['Share', 'SharePayVip', 'SharePaySuccess', 'SharePayFaild', 'DouyinResult', 'DouyinShareSchema']
 
 // 路由拦截器

src/router/module/base.js

@@ -85,7 +85,11 @@ export default [
       }
     ]
   },
-
+  {
+    path: '/test/oss',
+    component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/test/oss'),
+    hidden: true
+  },
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/error-page/404'),

src/views/common/test/oss.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <OssUpload
+      :limit="99"
+      :multiple="true"
+      :webkitdirectory="false"
+      :auto-upload="true"
+      :file-list="fileList"
+      :on-success="handleSuccess"
+      :on-progress="handleProgress"
+      :on-error="handleError"
+    />
+  </div>
+</template>
+
+<script>
+import { OssUpload } from '@/components/OssUpload'
+export default {
+  components: {
+    OssUpload
+  },
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  methods: {
+    handleSuccess(res, file, fileList) {},
+    handleProgress(ev, file, fileList) {},
+    handleError(err, file, fileList) {
+      console.log(err)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -31,6 +31,14 @@
         <span>登录账号:</span>
         <el-input v-model="listQuery.mobile" placeholder="登录账号" @keyup.enter.native="getList" />
       </div>
+      <div class="filter-control">
+        <span>机构类型:</span>
+        <el-select v-model="listQuery.authStatus" placeholder="机构类型" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="未认证机构" :value="0" />
+          <el-option label="已认证机构" :value="2" />
+        </el-select>
+      </div>
       <div class="filter-control">
         <el-button type="primary" @click="getList">查询</el-button>
       </div>
@@ -125,6 +133,7 @@ export default {
       listQuery: {
         status: '',
         mobile: '',
+        authStatus: '',
         pageNum: 1,
         pageSize: 10
       },

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

@@ -23,9 +23,10 @@
           <el-radio :label="2">自定义上传</el-radio>
         </el-radio-group>
         <template v-if="formData.certificateImageType === 1">
-          <div>
+          <div v-if="authTempFlag">
             <preview-image v-if="formData.certificateImage" :src="formData.certificateImage" />
           </div>
+          <div v-else>无</div>
         </template>
         <template v-else>
           <upload-image
@@ -66,6 +67,7 @@ import UploadImage from '@/components/UploadImage'
 import { fetchProductSelectList, getProductById, saveProduct } from '@/api/product'
 import { isSnCode } from '@/utils/validate'
 import { getStorage } from '@/utils/storage'
+import { authTempUsed } from '@/api/system'
 export default {
   components: { UploadImage },
   data() {
@@ -99,7 +101,8 @@ export default {
         certificateImage: [{ required: true, message: '授权牌照不能为空', trigger: 'change' }],
         snCode: [{ required: true, message: 'SN码不能为空' }, { validator: valideSNcode }],
         productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }]
-      }
+      },
+      authTempFlag: false
     }
   },
   computed: {
@@ -117,6 +120,7 @@ export default {
     if (this.editType === 'edit') {
       this.fetchProductDetail()
     }
+    this.fetchAuthTempUsed()
   },
   methods: {
     // 提交
@@ -189,6 +193,20 @@ export default {
       }
     },
 
+    // 获取当前机构可用授权牌模板
+    async fetchAuthTempUsed() {
+      try {
+        const res = await authTempUsed({
+          authUserId: this.authUserId,
+          authFlag: 1,
+          status: 1
+        })
+        this.authTempFlag = res.data != null
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
     // 授权牌照上传
     beforeCertificateImageUpload(file) {
       const flag = file.size / 1024 / 1024 < 1

src/views/normal/club/edit.vue

@@ -17,7 +17,7 @@
         />
       </el-form-item>
       <el-form-item label="详细地址:" prop="fullAddress">
-        <el-input v-model="formData.fullAddress" placeholder="请输入详细地址" clearable />
+        <el-input v-model="formData.fullAddress" placeholder="请输入详细地址" clearable @blur="initGeocoder" />
       </el-form-item>
       <el-form-item label="经纬度:" prop="point">
         <el-input
@@ -98,7 +98,10 @@
             <el-input v-show="false" v-model="formData.authImage" />
           </template>
           <template v-else>
-            <preview-image v-if="formData.authImage" width="148px" height="148px" :src="formData.authImage" />
+            <template v-if="authTempFlag">
+              <preview-image v-if="formData.authImage" width="148px" height="148px" :src="formData.authImage" />
+            </template>
+            <template v-else>无</template>
           </template>
         </div>
       </el-form-item>
@@ -237,9 +240,10 @@ import { AssociatedClubList } from '@/views/components/index'
 import { mapGetters } from 'vuex'
 import { saveBrandAuth, getAuthFormData, fecthAuthList } from '@/api/auth'
 import { getAddress } from '@/api/common'
-import { isPoint, isMobile, isNumber } from '@/utils/validate'
+import { isMobile, isNumber } from '@/utils/validate'
 import { formatDate } from '@/utils'
 import { authTempUsed } from '@/api/system'
+import { initGeocoder } from '@/components/SimpleAMap/common/utils'
 
 export default {
   components: {
@@ -248,17 +252,17 @@ export default {
     AssociatedClubList
   },
   data() {
-    var validatePoint = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('经纬度坐标不能为空'))
-      } else {
-        if (isPoint(value)) {
-          callback()
-        } else {
-          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
-        }
-      }
-    }
+    // var validatePoint = (rule, value, callback) => {
+    //   if (value === '') {
+    //     callback(new Error('经纬度坐标不能为空'))
+    //   } else {
+    //     if (isPoint(value)) {
+    //       callback()
+    //     } else {
+    //       callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
+    //     }
+    //   }
+    // }
 
     var validateMobile = (rule, value, callback) => {
       if (value === '') {
@@ -324,7 +328,7 @@ export default {
         authParty: [{ required: true, message: '机构名称不能为空', trigger: ['blur', 'change'] }],
         address: [{ required: true, message: '地址不能为空', trigger: 'change', type: 'array' }],
         fullAddress: [{ required: true, message: '详细不能为空', trigger: ['blur', 'change'] }],
-        point: [{ required: true, validator: validatePoint, trigger: ['blur', 'change'] }],
+        // point: [{ required: true, validator: validatePoint, trigger: ['blur', 'change'] }],
         mobile: [{ required: true, validator: validateMobile, trigger: ['blur', 'change'] }],
         logo: [{ required: true, message: '请上传机构logo', trigger: 'change' }],
         banner: [{ required: true, message: '请至少上传一张banner图片', trigger: 'change' }],
@@ -351,6 +355,8 @@ export default {
         authImageLogoWidth: 100,
         authImageLogoHeight: 100
       },
+      // 授权牌模板标识
+      authTempFlag: false,
       // 关联机构相关
       assClubQuery: {
         pageNum: 1,
@@ -463,6 +469,27 @@ export default {
       this.filterSelectAssClubList = this.selectAssClubListAll
     },
 
+    // 根据地址信息定位
+    async initGeocoder() {
+      try {
+        const geocoder = await initGeocoder()
+        return new Promise((resolve, reject) => {
+          geocoder.getLocation(this.locationAddress, (status, result) => {
+            if (status === 'complete' && result.info === 'OK') {
+              const position = result.geocodes[0].location
+              this.onPosition(position)
+              resolve()
+            } else {
+              console.log(result)
+              reject()
+            }
+          })
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
     // 地图定位
     initMap() {
       this.dialogMapVisible = true
@@ -555,13 +582,24 @@ export default {
           this.selectAssClubListAll = res.data.releationClubList
           this.filterSelectAssClubList = this.selectAssClubListAll
         }
+
+        // 如果经纬度为空
+        if (!res.data.lngAndLat && this.locationAddress) {
+          this.initGeocoder()
+        }
       })
     },
 
     // 表单提交保存
-    submit() {
-      this.$refs.submitForm.validate((valide) => {
+    async submit() {
+      this.$refs.submitForm.validate(async(valide) => {
         if (!valide) return
+
+        // 如果经纬度为空
+        if (!this.formData.point && this.locationAddress) {
+          await this.initGeocoder()
+        }
+
         const {
           authParty,
           address: [provinceId, cityId, townId],
@@ -623,6 +661,7 @@ export default {
         // const lngAndLat = this.formData.point
 
         console.log(data)
+
         // return
         saveBrandAuth(data)
           .then((res) => {
@@ -645,6 +684,7 @@ export default {
       const node = this.$refs.cascader.getCheckedNodes()
       if (node.length <= 0) return
       this.address = node[0].pathLabels.join()
+      this.initGeocoder()
     },
 
     // 获取当前机构可用授权牌模板
@@ -659,6 +699,9 @@ export default {
           const [width, height] = res.data.logoSize.split(',')
           this.validatorFields.authImageLogoWidth = width
           this.validatorFields.authImageLogoHeight = height
+          this.authTempFlag = true
+        } else {
+          this.authTempFlag = false
         }
       } catch (error) {
         console.log(error)

src/views/normal/docs/index.vue

@@ -14,30 +14,41 @@
         <el-button type="primary" size="small" icon="el-icon-download" plain @click="onDownload">下载</el-button>
         <el-button type="primary" size="small" icon="el-icon-delete" plain @click="onDelete">删除</el-button>
       </div>
-      <div v-else class="filter-control">
-        <el-button type="primary" size="small" icon="el-icon-upload2" plain @click="onChooseFile">上传文件</el-button>
-        <el-button
-          type="primary"
-          size="small"
-          icon="el-icon-folder-add"
-          plain
-          @click="onCreateDir"
-        >新建文件夹</el-button>
-        <el-button
-          type="primary"
-          size="small"
-          icon="el-icon-s-promotion"
-          plain
-          @click="onPublishArticle"
-        >发布文章</el-button>
-        <el-button
-          type="primary"
-          size="small"
-          icon="el-icon-alarm-clock"
-          plain
-          @click="onUploadHistory"
-        >上传记录</el-button>
-      </div>
+      <template v-else>
+        <div class="filter-control">
+          <OssUpload
+            ref="ossUpload"
+            :limit="999"
+            :multiple="true"
+            :button-group="buttonGroup"
+            :on-success="onSuccess"
+            :on-error="onError"
+          />
+        </div>
+        <div class="filter-control">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-folder-add"
+            plain
+            @click="onCreateDir"
+          >新建文件夹</el-button>
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-s-promotion"
+            plain
+            @click="onPublishArticle"
+          >发布文章</el-button>
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-alarm-clock"
+            plain
+            @click="onUploadHistory"
+          >上传记录</el-button>
+        </div>
+      </template>
     </div>
     <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -84,8 +95,6 @@
       </el-table-column>
     </el-table>
 
-    <!-- 文件上传 -->
-    <OssUpload ref="ossUpload" :on-success="onSuccess" />
     <!-- 创建文件夹弹窗 -->
     <el-dialog :title="editText" :visible.sync="editDialog" width="30%" :close-on-click-modal="false" @close="onCancel">
       <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="80">
@@ -128,7 +137,7 @@
 
 <script>
 import DocIcon from '@/views/components/DocIcon'
-import OssUpload from '@/views/components/OssUpload'
+import { OssUpload } from '@/components/OssUpload'
 import {
   createPackage,
   fetchDocsList,
@@ -192,7 +201,25 @@ export default {
       crumbList: [],
       currentDirStack: [],
       currentIndex: 0,
-      message: null
+      message: null,
+      buttonGroup: [
+        {
+          type: 'file',
+          color: 'primary',
+          text: '上传文件',
+          size: 'small',
+          plain: true,
+          icon: 'el-icon-upload2'
+        },
+        {
+          type: 'folder',
+          color: 'primary',
+          text: '上传文件夹',
+          size: 'small',
+          plain: true,
+          icon: 'el-icon-upload2'
+        }
+      ]
     }
   },
   computed: {
@@ -342,19 +369,25 @@ export default {
       this.$refs.ossUpload.chooseFile()
     },
     // 上传成功
-    onSuccess(file, fileList) {
+    onSuccess(res, file) {
+      const strList = file.name.split('.')
+      const ossName = file.uuid + '.' + strList[strList.length - 1]
       this.saveUploadFile({
-        fileName: file.fileName,
-        ossName: file.uuid,
-        ossUrl: file.url,
+        fileName: file.name,
+        ossName: ossName,
+        ossUrl: file.ossUrl,
         fileSize: file.size,
         parentId: this.fileId,
-        mime: file.type
+        mime: file.raw.type
       })
     },
+    // 上传错误
+    onError(error) {
+      console.log(error)
+    },
     // 查看历史记录
     onUploadHistory() {
-      this.$refs.ossUpload.open()
+      this.$refs.ossUpload.showRecord()
     },
     // 创建文件夹
     onCreateDir() {

src/views/normal/user/index.vue

@@ -11,7 +11,15 @@
         <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
-        <span>状态:</span>
+        <span>认证状态:</span>
+        <el-select v-model="listQuery.authStatus" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <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" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="启用" :value="1" />
@@ -21,6 +29,7 @@
       <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>
       </div>
     </div>
     <!-- 搜索区域END -->
@@ -79,12 +88,7 @@
       </el-table-column>
       <el-table-column label="操作" width="280px" align="center">
         <template slot-scope="{ row }">
-          <permission-button
-            type="primary"
-            size="mini"
-            style="margin-right: 5px"
-            @click="handleResetPwd(row)"
-          >重置密码</permission-button>
+          <permission-button type="primary" size="mini" @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>
@@ -169,6 +173,7 @@ export default {
         authUserId: '', // 机构id
         name: '', // 用户名
         status: '',
+        authStatus: '',
         mobile: '', // 手机号
         pageNum: 0, // 页码
         pageSize: 10 // 分页大小