gmh_web/src/components/gmhExcel/DataSourceImport.vue

<template>
  <!-- 数据源导入 -->
  <div>
    <el-card class="box-card bottom-10">
      <div slot="header" class="clearfix">
        <span>1️⃣导入名单</span>
      </div>
      <el-form
        ref="$form"
        :model="formData"
        label-position="right"
        label-width="100px"
        :rules="formRules"
        :disabled="dataSourceImportDisabled"
      >
        <el-form-item prop="upload" label="名单上传">
          <el-upload
            :action="`/api/excel/dataSourceImport?dataSourceImportModel=${formData.dataSourceImportModel}`"
            :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"
          >
            <el-button type="primary" size="small">点击上传📃</el-button>
          </el-upload>
        </el-form-item>
        <el-button
          size="medium"
          type="text"
          @click="moreSetting = !moreSetting"
          style="margin-left: 30px"
          :disabled="false"
          >更多设置
          <span v-if="moreSetting">🤟</span>
          <span v-else>👇</span>
        </el-button>
        <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-form-item
          prop="titleRowNum"
          label="表头所在行："
          v-if="moreSetting"
        >
          <el-input
            v-model="formData.titleRowNum"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </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: "",
      },
      // 表单校验
      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.dataSourcePreview = response.data;
        this.dialogVisible = true;
        this.$message.success("姓名导入成功");
      } else {
        this.$message.success("姓名导入出现了错误，请联系陈达解决");
      }
      hideLoading();
    },
    uploadError(err, file, fileList) {
      hideLoading();
      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);
    },
  },
};
</script> 


<style scoped>
</style>