manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/ImportModal.vue

<template>
  <el-dialog v-model="props.visible" width="500px" :show-close="false" :close-on-click-modal="false" top="10vh"
    class="importModal">
    <template #header="{ titleId, titleClass }">
      <div class="flex justify-between items-center border-b pb-3">
        <h4 :id="titleId" :class="titleClass">导入任务</h4>
        <div>
          <el-button type="primary" :loading="['2'].includes(props.saveLoading)" @click="submit()">
            <input type="file" v-show="false" ref="fileInputRef" @change="changeFile" accept=".xls,.xlsx" />
            导入
          </el-button>
          <el-button @click="closeVisible()">取消</el-button>
        </div>
      </div>
    </template>
    <div class="text-lg p-5">
      <div class="pb-5">1. 点击下载 <a href="" download class="text-[#79BBFF]">任务导入模板</a></div>
      <div>2. 填写excel文件, 任务名称与优先级必填</div>
    </div>
    <!-- <el-link type="primary" style="margin-left:5px;" :underline="false" href="./upload/任务导入模板.xlsx"
      :download="'任务导入模板.xlsx'">任务导入模板</el-link> -->
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { Props, Emits } from "./type"

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

watch(() => props.saveLoading, (newValue) => {
  if (!fileInputRef.value) return
  fileInputRef.value.value = ""
  if (newValue == "3") {
    emits("close")
    return
  }
})

const fileInputRef = ref<HTMLInputElement>();

function submit() {
  fileInputRef.value?.click()
}
function closeVisible() {
  emits("close")
}
function changeFile(e: any) {
  emits("submit", e.target.files[0])
}
</script>