From f8b148c77b41b6dca8f469d4c37df2d6410360ee Mon Sep 17 00:00:00 2001
From: tuqin <tuqin@tuqin.cn>
Date: 星期四, 08 十月 2026 16:58:31 +0800
Subject: [PATCH] feat(芯导): 仓储物流出库管理 / 人力资源(离职/在职台账/合同/薪资) 前端
---
src/views/personnelManagement/contractManagement/index.vue | 438 +++++++++++++++++++++---------------------------------
1 files changed, 169 insertions(+), 269 deletions(-)
diff --git a/src/views/personnelManagement/contractManagement/index.vue b/src/views/personnelManagement/contractManagement/index.vue
index 98f0272..5298a4f 100644
--- a/src/views/personnelManagement/contractManagement/index.vue
+++ b/src/views/personnelManagement/contractManagement/index.vue
@@ -3,18 +3,19 @@
<div class="search_form">
<div>
<span class="search_title">濮撳悕锛�</span>
- <el-input v-model="searchForm.staffName" style="width: 240px" placeholder="璇疯緭鍏ュ鍚嶆悳绱�" @change="handleQuery"
- clearable :prefix-icon="Search" />
- <span style="margin-left: 10px" class="search_title">鍚堝悓缁撴潫鏃ユ湡锛�</span>
- <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
- placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
+ <el-input v-model="searchForm.staffName" style="width: 200px" placeholder="璇疯緭鍏ュ鍚嶆悳绱�" @change="handleQuery" clearable :prefix-icon="Search" />
+ <span style="margin-left: 10px" class="search_title">鐘舵�侊細</span>
+ <el-select v-model="searchForm.status" placeholder="鍏ㄩ儴" clearable style="width: 140px" @change="handleQuery">
+ <el-option label="鏈夋晥" :value="0" />
+ <el-option label="宸茬画绛�" :value="1" />
+ <el-option label="宸茶В闄�" :value="2" />
+ </el-select>
<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 type="primary" @click="openForm('add')">鏂板鍚堝悓</el-button>
<el-button @click="handleOut">瀵煎嚭</el-button>
- <!-- <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>-->
+ <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
</div>
</div>
<div class="table_list">
@@ -22,308 +23,207 @@
@selection-change="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination"
: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>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span>
- <!-- <el-link
- type="primary"
- :underline="false"
- style="font-size: 12px; vertical-align: baseline"
- @click="importTemplate"
- >涓嬭浇妯℃澘</el-link
- > -->
- </div>
- </template>
- </el-upload>
+ <!-- 鏂板/缂栬緫鍚堝悓 -->
+ <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板鍚堝悓' : '缂栬緫鍚堝悓'" width="60%" @close="closeDia">
+ <el-form :model="form" label-width="120px" label-position="top" :rules="rules" ref="formRef">
+ <el-row :gutter="30">
+ <el-col :span="12"><el-form-item label="鍛樺伐濮撳悕锛�" prop="staffName"><el-input v-model="form.staffName" placeholder="璇疯緭鍏�" /></el-form-item></el-col>
+ <el-col :span="12"><el-form-item label="鍛樺伐缂栧彿锛�" prop="staffNo"><el-input v-model="form.staffNo" placeholder="璇疯緭鍏�" /></el-form-item></el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12"><el-form-item label="宀椾綅锛�" prop="postJob"><el-input v-model="form.postJob" placeholder="璇疯緭鍏�" /></el-form-item></el-col>
+ <el-col :span="12"><el-form-item label="鍚堝悓骞撮檺锛�" prop="contractTerm"><el-input-number v-model="form.contractTerm" :min="0" :step="1" :precision="0" style="width:100%" /></el-form-item></el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12"><el-form-item label="绛捐鏃ユ湡锛�" prop="signDate"><el-date-picker v-model="form.signDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="璇烽�夋嫨" style="width:100%" /></el-form-item></el-col>
+ <el-col :span="12"><el-form-item label="鍚堝悓寮�濮嬫棩鏈燂細" prop="startDate"><el-date-picker v-model="form.startDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="璇烽�夋嫨" style="width:100%" /></el-form-item></el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12"><el-form-item label="鍚堝悓缁撴潫鏃ユ湡锛�" prop="endDate"><el-date-picker v-model="form.endDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="璇烽�夋嫨" style="width:100%" /></el-form-item></el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="24"><el-form-item label="鍚堝悓鍐呭锛�" prop="contractContent"><el-input v-model="form.contractContent" type="textarea" :rows="4" placeholder="璇疯緭鍏ュ悎鍚屽唴瀹�" /></el-form-item></el-col>
+ </el-row>
+ </el-form>
<template #footer>
<div class="dialog-footer">
- <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button>
- <el-button @click="upload.open = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="submitForm">纭</el-button>
+ <el-button @click="closeDia">鍙栨秷</el-button>
</div>
</template>
</el-dialog>
- <files-dia ref="filesDia"></files-dia>
+
+ <!-- 缁 -->
+ <el-dialog v-model="renewVisible" title="缁鍚堝悓" width="40%">
+ <el-form :model="renewForm" label-width="140px" label-position="top">
+ <el-form-item label="缁鏃ユ湡锛�"><el-date-picker v-model="renewForm.renewDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="璇烽�夋嫨" style="width:100%" /></el-form-item>
+ <el-form-item label="缁鍚庡埌鏈熸棩鏈燂細"><el-date-picker v-model="renewForm.renewEndDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="璇烽�夋嫨" style="width:100%" /></el-form-item>
+ <el-form-item label="鍚堝悓骞撮檺锛�"><el-input-number v-model="renewForm.contractTerm" :min="0" :step="1" :precision="0" style="width:100%" /></el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button type="primary" @click="submitRenew">纭缁</el-button>
+ <el-button @click="renewVisible = false">鍙栨秷</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 瑙ｉ櫎 -->
+ <el-dialog v-model="terminateVisible" title="瑙ｉ櫎鍚堝悓" width="40%">
+ <el-form :model="terminateForm" label-width="140px" label-position="top">
+ <el-form-item label="瑙ｉ櫎鏃ユ湡锛�"><el-date-picker v-model="terminateForm.terminateDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="璇烽�夋嫨" style="width:100%" /></el-form-item>
+ <el-form-item label="瑙ｉ櫎鍘熷洜锛�"><el-input v-model="terminateForm.terminateReason" type="textarea" :rows="3" placeholder="璇疯緭鍏ヨВ闄ゅ師鍥�" /></el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button type="primary" @click="submitTerminate">纭瑙ｉ櫎</el-button>
+ <el-button @click="terminateVisible = false">鍙栨秷</el-button>
+ </template>
+ </el-dialog>
+
+ <form-dia ref="formDia" @close="handleQuery"></form-dia>
</div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
-import { onMounted, ref } from "vue";
-import FormDia from "@/views/personnelManagement/contractManagement/components/formDia.vue";
+import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import { ElMessageBox } from "element-plus";
-import { staffOnJobListPage } from "@/api/personnelManagement/employeeRecord.js";
+import FormDia from "@/views/personnelManagement/contractManagement/components/formDia.vue";
+import {
+ contractListPage, contractAdd, contractUpdate, contractDel, contractRenew, contractTerminate,
+} from "@/api/personnelManagement/contract.js";
import dayjs from "dayjs";
-import { getToken } from "@/utils/auth.js";
-import FilesDia from "./filesDia.vue";
-const data = reactive({
- searchForm: {
- staffName: "",
- entryDate: [
- dayjs().format("YYYY-MM-DD"),
- dayjs().add(1, "day").format("YYYY-MM-DD"),
- ], // 褰曞叆鏃ユ湡
- entryDateStart: dayjs().format("YYYY-MM-DD"),
- entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"),
- },
-});
+
+const { proxy } = getCurrentInstance();
+const data = reactive({ searchForm: { staffName: "", status: undefined } });
const { searchForm } = toRefs(data);
+
+const statusText = (s) => (s == 0 ? "鏈夋晥" : s == 1 ? "宸茬画绛�" : s == 2 ? "宸茶В闄�" : "");
+const statusType = (s) => (s == 0 ? "primary" : s == 1 ? "warning" : s == 2 ? "danger" : "");
+
const tableColumn = ref([
+ { label: "鍛樺伐缂栧彿", prop: "staffNo" },
+ { label: "鍛樺伐濮撳悕", prop: "staffName" },
+ { label: "宀椾綅", prop: "postJob" },
+ { label: "绛捐鏃ユ湡", prop: "signDate", width: 120 },
+ { label: "鍚堝悓寮�濮嬫棩鏈�", prop: "startDate", width: 120 },
+ { label: "鍚堝悓缁撴潫鏃ユ湡", prop: "endDate", width: 120 },
+ { label: "鍚堝悓骞撮檺", prop: "contractTerm", width: 90 },
+ { label: "鍚堝悓鍐呭", prop: "contractContent", showOverflowTooltip: true },
{
- label: "鐘舵��",
- prop: "staffState",
- dataType: "tag",
- formatData: (params) => {
- if (params == 0) {
- return "绂昏亴";
- } else if (params == 1) {
- return "鍦ㄨ亴";
- } else {
- return null;
- }
- },
- formatType: (params) => {
- if (params == 0) {
- return "danger";
- } else if (params == 1) {
- return "primary";
- } else {
- return null;
- }
- },
+ label: "鐘舵��", prop: "status", dataType: "tag",
+ formatData: (p) => statusText(p), formatType: (p) => statusType(p),
},
+ { label: "缁鏃ユ湡", prop: "renewDate", width: 120 },
+ { label: "瑙ｉ櫎鏃ユ湡", prop: "terminateDate", width: 120 },
{
- label: "鍛樺伐缂栧彿",
- prop: "staffNo",
- },
- {
- label: "濮撳悕",
- prop: "staffName",
- },
- {
- label: "鎬у埆",
- prop: "sex",
- },
- {
- label: "绫嶈疮",
- prop: "nativePlace",
- },
- {
- label: "宀椾綅",
- prop: "postJob",
- },
- {
- label: "瀹跺涵浣忓潃",
- prop: "adress",
- width: 200
- },
- {
- label: "绗竴瀛﹀巻",
- prop: "firstStudy",
- },
- {
- label: "涓撲笟",
- prop: "profession",
- width: 100
- },
- {
- label: "韬唤璇佸彿",
- prop: "identityCard",
- width: 200
- },
- {
- label: "骞撮緞",
- prop: "age",
- },
- {
- label: "鑱旂郴鐢佃瘽",
- prop: "phone",
- width: 150
- },
- {
- label: "绱ф�ヨ仈绯讳汉",
- prop: "emergencyContact",
- width: 120
- },
- {
- label: "绱ф�ヨ仈绯讳汉鐢佃瘽",
- prop: "emergencyContactPhone",
- width: 150
- },
- {
- label: "鍚堝悓骞撮檺",
- prop: "contractTerm",
- },
- // {
- // label: "鍚堝悓寮�濮嬫棩鏈�",
- // prop: "contractStartTime",
- // width: 120
- // },
- {
- label: "鍚堝悓缁撴潫鏃ユ湡",
- prop: "contractExpireTime",
- width: 120
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: 'right',
- width: 120,
+ dataType: "action", label: "鎿嶄綔", align: "center", fixed: "right", width: 200,
operation: [
- {
- name: "璇︽儏",
- type: "text",
- clickFun: (row) => {
- openForm("edit", row);
- },
- },
- {
- name: "闄勪欢",
- type: "text",
- clickFun: (row) => {
- openFilesFormDia(row);
- },
- },
+ { name: "缂栬緫", type: "text", clickFun: (row) => openForm("edit", row) },
+ { name: "缁", type: "text", clickFun: (row) => openRenew(row) },
+ { name: "瑙ｉ櫎", type: "text", clickFun: (row) => openTerminate(row) },
],
},
]);
-const filesDia = ref()
+
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
-const page = reactive({
- current: 1,
- size: 100,
- total: 0,
-});
-const formDia = ref()
-const { proxy } = getCurrentInstance()
+const page = reactive({ current: 1, size: 100, total: 0 });
+const formDia = ref();
-const changeDaterange = (value) => {
- searchForm.value.entryDateStart = undefined;
- searchForm.value.entryDateEnd = undefined;
- if (value) {
- searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
- searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
+const dialogFormVisible = ref(false);
+const operationType = ref("");
+const formRef = ref();
+const form = ref({});
+const rules = {
+ staffName: [{ required: true, message: "璇疯緭鍏ュ憳宸ュ鍚�", trigger: "blur" }],
+ signDate: [{ required: true, message: "璇烽�夋嫨绛捐鏃ユ湡", trigger: "change" }],
+};
+
+const openForm = (type, row) => {
+ operationType.value = type;
+ if (type === "add") {
+ form.value = { status: 0, contractTerm: 1 };
+ } else {
+ form.value = { ...row };
}
- getList();
+ dialogFormVisible.value = true;
};
-// 鎵撳紑闄勪欢寮规
-const openFilesFormDia = (row) => {
- console.log(row)
- nextTick(() => {
- filesDia.value?.openDialog( row,'鍚堝悓')
- })
+const closeDia = () => { proxy.resetForm("formRef"); dialogFormVisible.value = false; };
+const submitForm = () => {
+ formRef.value.validate((valid) => {
+ if (!valid) return;
+ const payload = { ...form.value };
+ const p = operationType.value === "add" ? contractAdd(payload) : contractUpdate(payload);
+ p.then(() => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeDia();
+ getList();
+ });
+ });
};
-// 鏌ヨ鍒楄〃
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-const handleQuery = () => {
- page.current = 1;
- getList();
+
+const renewVisible = ref(false);
+const renewForm = ref({});
+const currentId = ref(null);
+const openRenew = (row) => {
+ currentId.value = row.id;
+ renewForm.value = { renewDate: dayjs().format("YYYY-MM-DD"), renewEndDate: row.endDate, contractTerm: row.contractTerm };
+ renewVisible.value = true;
};
-const pagination = (obj) => {
- page.current = obj.page;
- page.size = obj.limit;
- getList();
+const submitRenew = () => {
+ contractRenew(currentId.value, renewForm.value).then(() => {
+ proxy.$modal.msgSuccess("缁鎴愬姛");
+ renewVisible.value = false;
+ getList();
+ });
};
+
+const terminateVisible = ref(false);
+const terminateForm = ref({});
+const openTerminate = (row) => {
+ currentId.value = row.id;
+ terminateForm.value = { terminateDate: dayjs().format("YYYY-MM-DD"), terminateReason: "" };
+ terminateVisible.value = true;
+};
+const submitTerminate = () => {
+ contractTerminate(currentId.value, terminateForm.value).then(() => {
+ proxy.$modal.msgSuccess("瑙ｉ櫎鎴愬姛");
+ terminateVisible.value = false;
+ getList();
+ });
+};
+
+const handleQuery = () => { page.current = 1; getList(); };
+const pagination = (obj) => { page.current = obj.page; page.size = obj.limit; getList(); };
const getList = () => {
tableLoading.value = true;
- const params = { ...searchForm.value, ...page };
- params.entryDate = undefined
- staffOnJobListPage(params).then(res => {
+ contractListPage({ ...searchForm.value, ...page }).then((res) => {
tableLoading.value = false;
- tableData.value = res.data.records
+ tableData.value = res.data.records;
page.total = res.data.total;
- }).catch(err => {
- tableLoading.value = false;
- })
+ }).catch(() => { tableLoading.value = false; });
};
-// 琛ㄦ牸閫夋嫨鏁版嵁
-const handleSelectionChange = (selection) => {
- selectedRows.value = selection;
-};
+const handleSelectionChange = (selection) => { selectedRows.value = selection; };
-// 鎵撳紑寮规
-const openForm = (type, row) => {
- nextTick(() => {
- formDia.value?.openDialog(type, row)
- })
+const handleDelete = () => {
+ if (!selectedRows.value.length) { proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁"); return; }
+ const ids = selectedRows.value.map((i) => i.id);
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", {
+ confirmButtonText: "纭", cancelButtonText: "鍙栨秷", type: "warning",
+ }).then(() => {
+ contractDel(ids).then(() => { proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); getList(); });
+ }).catch(() => { proxy.$modal.msg("宸插彇娑�"); });
};
-// 瀵煎嚭
const handleOut = () => {
ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- proxy.download("/staff/staffOnJob/export", {}, "鍚堝悓绠＄悊.xlsx");
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
+ confirmButtonText: "纭", cancelButtonText: "鍙栨秷", type: "warning",
+ }).then(() => {
+ proxy.download("/staff/contract/export", { ...searchForm.value }, "鍚堝悓绠＄悊.xlsx");
+ }).catch(() => { proxy.$modal.msg("宸插彇娑�"); });
};
-const upload = reactive({
- // 鏄惁鏄剧ず寮瑰嚭灞傦紙鍚堝悓瀵煎叆锛�
- open: false,
- // 寮瑰嚭灞傛爣棰橈紙鍚堝悓瀵煎叆锛�
- title: "",
- // 鏄惁绂佺敤涓婁紶
- isUploading: false,
- // 鏄惁鏇存柊宸茬粡瀛樺湪鐨勭敤鎴锋暟鎹�
- updateSupport: 1,
- // 璁剧疆涓婁紶鐨勮姹傚ご閮�
- headers: { Authorization: "Bearer " + getToken() },
- // 涓婁紶鐨勫湴鍧�
- url: import.meta.env.VITE_APP_BASE_API + "/staff/staffOnJob/import",
-});
-/** 瀵煎叆鎸夐挳鎿嶄綔 */
-function handleImport() {
- upload.title = "鍚堝悓瀵煎叆";
- upload.open = true;
-}
-/** 鎻愪氦涓婁紶鏂囦欢 */
-function submitFileForm() {
- console.log(upload.url + '?updateSupport=' + upload.updateSupport)
- 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();
-});
+
+onMounted(() => { getList(); });
</script>
<style scoped></style>
--
Gitblit v1.9.3