gmh_web/src/components/gmhExcel/DataSourceImport.vue

<template>
  <!-- 数据源导入 -->
  <div>
    <el-card class="box-card bottom-10">
      <div slot="header" class="clearfix">
        <span>1️⃣导入名单</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showCat">🐱</el-button>
      </div>

      <el-form
        ref="$form"
        :model="formData"
        label-position="top"
        label-width="100px"
        :rules="formRules"
        :disabled="dataSourceImportDisabled"
      >
        <el-form-item prop="upload" label="📖名单上传：">
          <el-upload
            drag
            :action="`/api/excel/dataSourceImport?dataSourceImportModel=${formData.dataSourceImportModel}&removeRepeat=${formData.removeRepeat}`"
            :multiple="false"
            :on-preview="uploadPreview"
            :on-remove="uploadRemove"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :on-progress="uploadProgress"
            :on-change="uploadChange"
            :before-upload="uploadBefore"
            :before-remove="uploadBeforeRemove"
            :on-exceed="uploadOnExceed"
            :file-list="dataSourceFileList"
            :limit="1"
            accept=".xls, .xlsx"
          >
            <!-- <el-button type="primary" size="small">点击上传📃</el-button> -->
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，且不超过5Mb</div>
          </el-upload>
        </el-form-item>
        <el-button size="medium" type="text" @click="moreSetting = !moreSetting" :disabled="false">
          更多设置
          <span v-if="moreSetting">🤟</span>
          <span v-else>👇</span>
        </el-button>
        <el-collapse-transition>
          <el-form-item prop="templateSheetNum" label="⚙️模式：" v-if="moreSetting">
            <el-radio-group v-model="formData.dataSourceImportModel">
              <el-radio label="0">自动识别姓名</el-radio>
              <el-radio label="1">全部导入</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-collapse-transition>
        <el-collapse-transition>
          <el-form-item prop="removeRepeat" label="⚙️是否自动去除重复的数据：" v-if="moreSetting">
            <el-radio-group v-model="formData.removeRepeat">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-collapse-transition>
        <el-collapse-transition>
          <el-form-item prop="titleRowNum" label="🏷️表头所在行：" v-if="moreSetting" v-show="false">
            <el-input-number v-model="formData.titleRowNum" style="width: 200px"></el-input-number>
          </el-form-item>
        </el-collapse-transition>
      </el-form>
    </el-card>
    <!-- 数据预览弹窗 -->
    <DataSourceImportDialog
      :dialogVisible="dialogVisible"
      :dataSourcePreview="dataSourcePreview"
      @closeDialog="closeDialog"
      @nextStep="nextStep"
      :dataSourceImportDisabled="dataSourceImportDisabled"
    ></DataSourceImportDialog>
  </div>
</template>

<script>
import DataSourceImportDialog from "@/components/gmhExcel/DataSourceImportDialog";
import { showLoading, hideLoading } from "@/utils/loading";

export default {
  name: "DataSourceImport",
  props: {
    dataSourceImportDisabled: {
      type: Boolean,
      require: true,
      default: false
    }
  },
  components: { DataSourceImportDialog },
  data() {
    return {
      // 表单数据
      formData: {
        dataSourceImportModel: "0",
        titleRowNum: 1,
        removeRepeat: "1"
      },
      // 表单校验
      formRules: {},
      // 数据源文件上传列表
      dataSourceFileList: [],
      // 更多设置显示开关
      moreSetting: false,
      // 弹窗显示
      dialogVisible: false,
      // 导入数据预览
      dataSourcePreview: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    },
    uploadPreview(file) {
      this.dialogVisible = true;
    },
    uploadRemove(file, fileList) {},
    uploadSuccess(response, file, fileList) {
      if (response.success) {
        this.dataSourceFileList = fileList;
        this.dataSourcePreview = response.data;
        this.dialogVisible = true;
        this.$message.success("姓名导入成功");
      } else {
        this.$message.error(response.msg);
      }
      hideLoading();
    },
    uploadError(err, file, fileList) {
      hideLoading();
      this.dataSourceFileList = fileList;
      this.$message.error(err);
    },
    uploadProgress(event, file, fileList) {},
    uploadChange(file, fileList) {},
    uploadBefore(file) {
      showLoading();
    },
    uploadBeforeRemove(file, fileList) {},
    uploadOnExceed(files, fileList) {
      this.$message.warning("只允许上传一个文件，想更换文件请先删除再重新上传");
    },
    // step组件进行下一步
    nextStep(val) {
      this.$emit("nextStep", val);
    },
    showCat() {
      let path = catConfig.model.jsonPath;
      if (path.includes("chendahaha")) {
        catConfig.model.jsonPath = path.replace("chendahaha", "");
      } else {
        catConfig.model.jsonPath = "chendahaha" + catConfig.model.jsonPath;
      }
      initCat();
    }
  }
};
</script> 


<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>