功能展示页，添加 导出、导入

long

2021-07-15 eaaa5b7839f08ddae008bd9fba3fa432b689b9af

功能展示页，添加 导出、导入

 src/pages/demo/list.vue

@@ -34,6 +34,27 @@
          @click="showAddDialog"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-if="getAuthValueFN('xxxx')"
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="exportList"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-if="getAuthValueFN('xxxx')"
          type="primary"
          class="rel"
          size="mini"
          icon="el-icon-upload2"
          style="overflow:hidden"
        >导入
          <input id="upload" ref="upload" type="file" @change="fileChange">
        </el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
@@ -117,6 +138,17 @@
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item prop="uploadImgs">
          <span slot="label">
            图片<br><span style="color: #999;font-size: 12px">(xxx*xxx像素)</span>
          </span>
          <!-- 上传图片组件(单图) -->
          <UploadSingleImg
            ref="refUploadImg"
            v-model="dialogData.uploadImgs"
            @change.capture="$refs.refDialog.clearValidate()"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取消</el-button>
@@ -131,13 +163,23 @@
      :limit.sync="pageSize"
      @pagination="getList"
    />

    <!-- upload放大图片 -->
    <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
      <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>

import UploadSingleImg from '@/components_simple/UploadSingleImg'
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
export default {
  name: 'Demo',
  components: { UploadSingleImg },
  mixins: [mixin_upload],
  data() {
    return {
      showSearch: true, // 是否显示搜索区
@@ -169,6 +211,9 @@
        ],
        isUp: [
          { required: true, message: '是否上架不能为空', trigger: 'change' }
        ],
        uploadImgs: [
          { required: true, message: '图片不能为空' }
        ]
      }
    }
@@ -320,6 +365,8 @@
        type: 'edit',
        ...item
      }
      dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }]

      console.log('dialogData', dialogData)
      this.dialogVisible = true
      this.$nextTick(() => {
@@ -338,7 +385,10 @@
    submitHandle() {
      this.$refs['refDialog'].validate(valid => {
        if (valid) {
          this.$refs.refUploadImg.runUploadImg((imgUrl) => {
            imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
          this.submitReq()
          })
        }
      })
    },
@@ -347,7 +397,8 @@
      var { dialogData } = this
      var params = {
        name: dialogData.name,
        isUp: dialogData.isUp
        isUp: dialogData.isUp,
        imgUrl: dialogData.imgUrl
      }

      if (dialogData.password) params.password = dialogData.password
@@ -371,11 +422,97 @@
        this.hideDialog()
        isAdd ? this.reGetList() : this.getList()
      })
    },

    // 导出列表
    exportList() {
      var { keyWord } = this
      const params = {
        keyWord: keyWord
      }
      this.postFN({
        url: 'xxxx',
        params,
        mockData: {
          code: 100,
          msg: '',
          data: {
            path: 'xxx'
          }
        }
      }, (inf) => {
        window.location.href = inf.path
      })
    },

    // 清空file
    clearFile() {
      this.$refs.upload.value = ''
    },
    // 导入
    fileChange(e) {
      const file = e.target.files[0]
      if (!file) {
        this.clearFile()
        return
      }

      // 1. 判断文件类型
      if (!/\.(xls|xlsx)$/.test(e.target.value)) {
        this.$messageError('请选择xls或xlsx格式文件')
        this.clearFile()
        return
      }

      // 2. 上传
      const formData = new FormData()
      formData.append('file', file)
      formData.append('virtualPrizeId', this.id)
      this.postFN({
        url: 'admin/virtualPrizeItem/importData',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {}
        }
      }, (inf) => {
        // 部分不成功
        if (inf && inf.arr && inf.arr.length) {
          inf.arr.forEach((o) => {
            this.$messageError(o)
          })
        } else {
          this.$messageSuc('导入成功')
        }
        this.clearFile()
        this.reGetList() // 刷新
      }, (res) => {
        this.$messageError('导入失败：' + (res.msg || '未知原因'))
        this.clearFile()
        this.reGetList() // 刷新
      })
    }
  }
}
</script>

<style lang="scss" scoped>

#upload{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rel{
  position: relative;
  cursor: pointer;
}
</style>

 src/pages/system/admin.vue