天津军泰伟业 1.员工台账添加导入功能

gaoluyang

2026-04-29 e40e1cf5d4aa99412ca3a87771b5d5a8ea5a105d

天津军泰伟业
1.员工台账添加导入功能

 src/views/personnelManagement/employeeRecord/index.vue

@@ -21,6 +21,7 @@
      <div>
        <el-button type="primary" @click="openFormNewOrEditFormDia('add')">新增入职</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
    </div>
@@ -45,6 +46,50 @@
        :id="id"
        @completed="handleQuery"
    />
    <el-dialog
        :title="upload.title"
        v-model="upload.open"
        width="400px"
        append-to-body
        @close="handleImportDialogClose"
    >
      <el-upload
          ref="uploadRef"
          :limit="1"
          accept=".xlsx,.xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :before-upload="upload.beforeUpload"
          :on-progress="upload.onProgress"
          :on-success="upload.onSuccess"
          :on-error="upload.onError"
          :on-change="upload.onChange"
          :auto-upload="false"
          name="file"
          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格式文件。</span>
            <el-link
                type="primary"
                :underline="false"
                style="font-size: 12px; vertical-align: baseline"
                @click="importTemplate"
            >下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="handleImportDialogClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

@@ -53,6 +98,7 @@
import {onMounted, ref} from "vue";
import {ElMessageBox} from "element-plus";
import {batchDeleteStaffOnJobs, staffOnJobListPage} from "@/api/personnelManagement/staffOnJob.js";
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
const NewOrEditFormDia = defineAsyncComponent(() => import("@/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue"));
const ShowFormDia = defineAsyncComponent(() => import( "@/views/personnelManagement/employeeRecord/components/Show.vue"));
@@ -205,9 +251,43 @@
  size: 100,
  total: 0
});
const uploadRef = ref()
const formDia = ref()
const formDiaNewOrEditFormDia = ref()
const { proxy } = getCurrentInstance()
const upload = reactive({
  open: false,
  title: "",
  isUploading: false,
  headers: { Authorization: "Bearer " + getToken() },
  url: import.meta.env.VITE_APP_BASE_API + "/staff/staffOnJob/import",
  beforeUpload: (file) => {
    const isValid = file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.name.endsWith(".xlsx") || file.name.endsWith(".xls");
    if (!isValid) {
      proxy.$modal.msgError("只能上传 Excel 文件");
    }
    return isValid;
  },
  onChange: () => {},
  onSuccess: (response) => {
    upload.isUploading = false;
    if (response.code === 200) {
      proxy.$modal.msgSuccess(response.msg || "导入成功");
      upload.open = false;
      uploadRef.value?.clearFiles();
      getList();
      return;
    }
    proxy.$modal.msgError(response.msg || "导入失败");
  },
  onError: () => {
    upload.isUploading = false;
    proxy.$modal.msgError("导入失败");
  },
  onProgress: () => {
    upload.isUploading = true;
  }
})

const changeDaterange = (value) => {
  searchForm.value.entryDateStart = undefined;
@@ -247,6 +327,28 @@
};

// 打开弹框
const submitFileForm = () => {
  if (uploadRef.value) {
    upload.isUploading = true;
    uploadRef.value.submit();
  }
};

const handleImport = () => {
  upload.title = "在职员工导入";
  upload.open = true;
};

const importTemplate = () => {
  proxy.download("/staff/staffOnJob/downloadTemplate", {}, "在职员工导入模板.xlsx");
};

const handleImportDialogClose = () => {
  upload.open = false;
  upload.isUploading = false;
  uploadRef.value?.clearFiles();
};

const openForm = (type, row) => {
  nextTick(() => {
    formDia.value?.openDialog(type, row)