gaoluyang
3 天以前 bb5ec20596998a83287706f7be2c91a7d7080b10
src/views/personnelManagement/onboarding/index.vue
@@ -11,12 +11,29 @@
          clearable
          :prefix-icon="Search"
        />
        <span style="margin-left: 10px;"  class="search_title">合同开始日期:</span>
        <el-date-picker
            v-model="searchForm.entryDateStart"
            type="date"
            placeholder="请选择合同开始日期"
            size="default"
            @change="(date) => handleDateChange(date,1)"
        />
        <span style="margin-left: 10px;" class="search_title">合同结束日期:</span>
        <el-date-picker
            v-model="searchForm.entryDateEnd"
            type="date"
            placeholder="请选择合同结束日期"
            size="default"
            @change="(date) => handleDateChange(date,2)"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
          >搜索</el-button
        >
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增入职</el-button>
        <el-button type="info" @click="handleImport">导入</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
@@ -31,19 +48,64 @@
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
        :total="total"
        :total="page.total"
      ></PIMTable>
    </div>
    <form-dia ref="formDia" @close="handleQuery"></form-dia>
    <!-- 人员入职导入对话框 -->
    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :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格式文件。</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="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { Search, UploadFilled } from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import FormDia from "@/views/personnelManagement/onboarding/components/formDia.vue";
// import FormDia from "@/views/personnelManagement/onboarding/components/formDiaXJHT.vue"; // 新疆食品公司用的表单
import {staffJoinDel, staffJoinListPage} from "@/api/personnelManagement/onboarding.js";
import {ElMessageBox} from "element-plus";
import dayjs from "dayjs";
import { getToken } from "@/utils/auth.js";
const data = reactive({
  searchForm: {
@@ -60,7 +122,7 @@
      if (params == 0) {
        return "离职";
      } else if (params == 1) {
        return "在职";
        return "入职";
      } else {
        return null;
      }
@@ -88,16 +150,17 @@
    prop: "sex",
  },
  {
    label: "籍贯",
    label: "户籍住址",
    prop: "nativePlace",
  },
  {
    label: "岗位",
    prop: "postJob",
    prop: "deptPositionName",
  },
  {
    label: "家庭住址",
    label: "现住址",
    prop: "adress",
    width:200
  },
  {
    label: "第一学历",
@@ -106,10 +169,7 @@
  {
    label: "专业",
    prop: "profession",
  },
  {
    label: "身份证号",
    prop: "identityCard",
    width:100
  },
  {
    label: "年龄",
@@ -118,6 +178,7 @@
  {
    label: "联系电话",
    prop: "phone",
    width:150
  },
  {
    label: "紧急联系人",
@@ -127,11 +188,12 @@
  {
    label: "联系电话",
    prop: "emergencyContactPhone",
    width:150
  },
  {
    label: "合同年限",
    prop: "contractTerm",
  },
  // {
  //   label: "合同年限",
  //   prop: "contractTerm",
  // },
  {
    label: "合同开始日期",
    prop: "contractStartTime",
@@ -164,11 +226,40 @@
const page = reactive({
  current: 1,
  size: 100,
  total: 0,
});
const total = ref(0);
const formDia = ref()
const { proxy } = getCurrentInstance()
const upload = reactive({
  // 是否显示弹出层(人员入职导入)
  open: false,
  // 弹出层标题(人员入职导入)
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 1,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/staff/staffJoinLeaveRecord/import",
});
const handleDateChange = (value,type) => {
  searchForm.value.entryDateEnd = null
  searchForm.value.entryDateStart = null
  if(type === 1){
    if (value) {
      searchForm.value.entryDateStart = dayjs(value).format("YYYY-MM-DD");
    }
  }else{
    if (value) {
      searchForm.value.entryDateEnd = dayjs(value).format("YYYY-MM-DD");
    }
  }
  getList();
};
// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
@@ -185,7 +276,7 @@
  staffJoinListPage({...page, ...searchForm.value, staffState: 1}).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    total.value = res.data.total;
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
@@ -240,6 +331,36 @@
        proxy.$modal.msg("已取消");
      });
};
/** 导入按钮操作 */
function handleImport() {
  upload.title = "人员入职导入";
  upload.open = true;
}
/** 下载模板操作 */
function importTemplate() {
  proxy.download("/staff/staffJoinLeaveRecord/importTemplate", {}, "人员入职模板.xlsx");
}
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  getList();
};
onMounted(() => {
  getList();
});