ezhizao_yzbh_vue/src/views/business/housingFund/confirm/importExcelDialog.vue

<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog
    title="公积金导入"
    v-model="visible"
    width="680px"
    append-to-body
    draggable
  >
    <el-form
      ref="menuRef"
      :model="form"
      size="small"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="选择导入月份" prop="year">
            <el-date-picker
              v-model="currentMonth"
              type="month"
              format="YYYY年MM月"
              style="width: 150px"
              :clearable="false"
              value-format="YYYY-MM-01"
              :disabled-date="disabledDateHandler"
              @change="monthChangeHandler"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上传">
            <el-upload
              ref="uploadRef"
              :limit="1"
              accept=".xlsx, .xls"
              :headers="upload.headers"
              :action="upload.url + `?year=${year}&month=${month}`"
              :fileList="fileList"
              :before-upload="handleBeforeUpload"
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="false"
              drag
            >
              <el-icon class="el-icon--upload">
                <upload-filled />
              </el-icon>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip text-center">
                  <span
                    >仅允许导入xls、xlsx格式文件。文件大小限制为&lt;50Mb</span
                  >
                  <el-link
                    type="primary"
                    :underline="false"
                    style="font-size: 12px; vertical-align: baseline"
                    @click="importTemplate"
                    >下载模板</el-link
                  >
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import { exportHousingFundTemplate } from "@/api/business/production/housingFundConfirm";
import { getToken, getTenant } from "@/utils/auth";
import useUserStore from "@/store/modules/user";
import { deepClone } from "@/utils";

const { proxy } = getCurrentInstance();
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});
const { getList } = toRefs(props);
/** 字典数组区 */
/** 表单抽屉 页变量 */
const fileList = ref([]);
const visible = ref(false);
const currentMonth = ref(proxy.moment().subtract("month").format("YYYY-MM-01"));
const year = ref(proxy.moment().format("YYYY"));
const month = ref(proxy.moment().format("MM"));

const addType = ref(1);
const webHost = import.meta.env.VITE_APP_BASE_API;

const setHeaders = {
  Authorization: getToken(),
};

const data = reactive({
  form: {
    year: proxy.moment().format("YYYY"),
    month: proxy.moment().format("MM"),
  },
  followData: {},
});
const addComRef = ref(null);

/*** 客户导入参数 */
const upload = reactive({
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken(), tenantId: getTenant() },
  // 上传的地址
  url: `/ezhizao-yzbh-production/business/housingFundConfirm/importData`,
});

/** 查询对象 */
const queryParams = ref({});

const followQuery = ref({});
const { form, rules, followData } = toRefs(data);

/***********************  表单页方法 ****************************/

/** 抽屉打开 */
function open() {
  // reset();
  visible.value = true;
}

//下载模板
const importTemplate = () => {
  exportHousingFundTemplate();
};

function reset() {
  // console.log(addComRef.value)
  if (addComRef.value != null) addComRef.value.reset();
}

function cancel() {
  visible.value = false;
}

function submitForm() {
  submitFileForm();
}

function handleBeforeUpload(file) {
  console.log(file);
  if (
    file.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
    file.type !== "application/vnd.ms-excel"
  ) {
    proxy.$modal.msgError("请选择excel文件");
    return false;
  }
  return true;
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert(
    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
      response.msg +
      "</div>",
    "导入结果",
    { dangerouslyUseHTMLString: true }
  );
  getList.value();
};
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}

function monthChangeHandler(arg) {
  year.value = proxy.moment(arg).format("YYYY");
  month.value = proxy.moment(arg).format("MM");
}

function disabledDateHandler(date) {
  if (date <= proxy.moment().subtract("month")) {
    return false;
  } else {
    return true;
  }
}

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>

<style></style>