yos_web/src/components/uploadAllData/index.vue

<template>
  <div>
    <el-button type="primary" size="small" class="inline-16" @click="allProduct" v-if="type=='upload'">一 键 选 择</el-button>
    <el-button type="primary" size="small" class="inline-16" @click="allProduct" v-else>一 键 删 除</el-button>
    <el-dialog
      title=""
      :visible.sync="progressVisible"
      :show-close="false"
      append-to-body
      width="500px">
      <el-progress v-if="totalPage" :percentage="Math.floor(progress / totalPage * 100)"></el-progress>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      totalPage:0,
      progress:0,
      progressVisible:false,
      deleteIds:[]
    };
  },
  props: {
    dataSize: {
      type:[Number,String],
      default:() => 200
    },
    total: {
      type:[Number,String],
      default:() => 0
    },
    type: {
      type:String,
      default:() => 'upload'
    },
    idName: {
      type: [Number,String]
    }
  },
  computed:{
  },
  watch:{
  },
  methods: {
    /* 一键选择所有商品 */
    allProduct () {
      if (this.total > this.dataSize) {
        this.$confirm(`总共有${this.total}个商品,提交时间较长,是否继续`,'提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(async () => {
          this.progressVisible = true
          this.type == 'upload' ? this.totalPage = Math.ceil(this.total / this.dataSize) * 2 : this.totalPage = Math.ceil(this.total / this.dataSize)
          let totalPage = Math.ceil(this.total / this.dataSize)
          for (let index = 1; index <= totalPage; index++) {
            this.pullData(index)
          }
        })
      } else {
        this.$confirm(`总共有${this.total}个商品,是否继续`,'提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(async () => {
          if (!this.total) return
          
          let pullApi = {}
          /**
           * 暴露出去操作 修改拉取请求  
           * @param pullApi - 拉取数据的请求接口
          */
          this.$emit('handlePullApi',pullApi)
          pullApi.content.pageNumber = 1
          pullApi.content.pageSize = this.dataSize

          const res = await this.$api.requested(pullApi)

          if (this.type == 'upload') {
            let uploadApi = {}
            /**
             * 暴露出去操作 修改上传请求
             * @param1 uploadApi - 上传接口
             * @param2 res.data - 拉取的上传数据
             */
            this.$emit('handleUploadApi',uploadApi,res.data)

            const res2 = await this.$api.requested(uploadApi)
            this.tool.showMessage(res2,() => {
              this.$emit('onSuccess',res2.data)
            })
          } else {
            this.deleteIds.push(...res.data.map(item => item[this.idName]))
            this.deleteOrderProduct(this.deleteIds)
          }
        })
      }
    },
    /* 拉取数据 */
    async pullData (page) {
      let pullApi = {}
      /**
       * 暴露出去操作 修改拉取请求  
       * @param pullApi - 拉取数据的请求接口
      */
      this.$emit('handlePullApi',pullApi)
      pullApi.content.pageNumber = page
      pullApi.content.pageSize = this.dataSize
      const res = await this.$api.requested(pullApi)
      this.progress++
      if (this.type == 'upload') {
        this.uploadData(res.data)
        if (this.progress >= this.totalPage) {
          this.$emit('onSuccess')
          this.progressVisible = false
          this.progress = 0
        }
      } else {
        this.deleteIds.push(...res.data.map(item => item[this.idName]))
        if (this.progress >= this.totalPage) {
          this.deleteOrderProduct(this.deleteIds)
          this.progressVisible = false
        }
      }
      
      
    },  
    /* 添加数据 */
    async uploadData (data) {
      let uploadApi = {}
      /**
       * 暴露出去操作 修改上传请求
       * @param1 uploadApi - 上传接口
       * @param2 res.data - 拉取的上传数据
       */
      this.$emit('handleUploadApi',uploadApi,data)
      const res = await this.$api.requested(uploadApi)
      this.progress++
      if (this.progress >= this.totalPage) {
        this.$emit('onSuccess')
        this.progressVisible = false
        this.progress = 0
      }
    },
    /* 删除数据 */
    async deleteOrderProduct (row) {
      let delApi = {}
      this.$emit('handleDelApi',delApi,row)
      const res = await this.$api.requested(delApi)
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
        this.deleteIds = []
      })
    },
  },
};
</script>

<style scoped>

</style>