386 lines
12 KiB
Vue
386 lines
12 KiB
Vue
<template>
|
|
<section class="extended-query-card">
|
|
<div class="extended-query-header">
|
|
<div class="extended-query-title">拓展查询</div>
|
|
<div class="extended-query-subtitle">在专项核查同范围员工内联查采购、招聘和调动记录</div>
|
|
</div>
|
|
|
|
<el-tabs v-model="activeTab" class="extended-query-tabs" @tab-click="handleTabChange">
|
|
<el-tab-pane label="采购记录" name="purchase">
|
|
<el-form :model="tabState.purchase.query" size="small" :inline="true" label-width="96px">
|
|
<el-form-item label="申请人姓名">
|
|
<el-input
|
|
v-model="tabState.purchase.query.applicantName"
|
|
placeholder="请输入申请人姓名"
|
|
clearable
|
|
style="width: 220px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="申请日期范围">
|
|
<el-date-picker
|
|
v-model="tabState.purchase.query.applyDateRange"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
style="width: 260px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
|
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="招聘记录" name="recruitment">
|
|
<el-form :model="tabState.recruitment.query" size="small" :inline="true" label-width="96px">
|
|
<el-form-item label="面试官姓名">
|
|
<el-input
|
|
v-model="tabState.recruitment.query.interviewerName"
|
|
placeholder="请输入面试官姓名"
|
|
clearable
|
|
style="width: 220px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
|
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="调动记录" name="transfer">
|
|
<el-form :model="tabState.transfer.query" size="small" :inline="true" label-width="96px">
|
|
<el-form-item label="员工姓名">
|
|
<el-input
|
|
v-model="tabState.transfer.query.staffName"
|
|
placeholder="请输入员工姓名"
|
|
clearable
|
|
style="width: 220px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="调动日期范围">
|
|
<el-date-picker
|
|
v-model="tabState.transfer.query.transferDateRange"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
style="width: 260px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
|
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
|
|
<div class="extended-query-table">
|
|
<el-table v-loading="currentState.loading" :data="currentState.rows" border>
|
|
<template v-if="activeTab === 'purchase'">
|
|
<el-table-column label="采购事项ID" prop="purchaseId" min-width="150" />
|
|
<el-table-column label="项目名称" prop="projectName" min-width="160" />
|
|
<el-table-column label="标的物名称" prop="subjectName" min-width="160" />
|
|
<el-table-column label="申请人姓名" prop="applicantName" width="120" />
|
|
<el-table-column label="申请日期" prop="applyDate" width="140" />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === 'recruitment'">
|
|
<el-table-column label="招聘项目编号" prop="recruitId" min-width="150" />
|
|
<el-table-column label="招聘项目名称" prop="recruitName" min-width="180" />
|
|
<el-table-column label="职位名称" prop="posName" min-width="140" />
|
|
<el-table-column label="面试官姓名摘要" prop="interviewerNameSummary" min-width="180" />
|
|
<el-table-column label="录用情况" prop="admitStatus" width="120" />
|
|
</template>
|
|
|
|
<template v-else>
|
|
<el-table-column label="员工姓名" prop="staffName" min-width="140" />
|
|
<el-table-column label="调动类型" prop="transferType" min-width="120" />
|
|
<el-table-column label="调动前部门" prop="deptNameBefore" min-width="160" />
|
|
<el-table-column label="调动后部门" prop="deptNameAfter" min-width="160" />
|
|
<el-table-column label="调动日期" prop="transferDate" width="140" />
|
|
</template>
|
|
|
|
<el-table-column label="操作" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="handleDetail(scope.row)">查看详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="currentState.total > 0"
|
|
:total="currentState.total"
|
|
:page.sync="currentState.query.pageNum"
|
|
:limit.sync="currentState.query.pageSize"
|
|
@pagination="handlePagination"
|
|
/>
|
|
</div>
|
|
</el-tabs>
|
|
|
|
<extended-purchase-detail-dialog
|
|
:visible.sync="tabState.purchase.detailVisible"
|
|
:detail="tabState.purchase.detailData || {}"
|
|
/>
|
|
<extended-recruitment-detail-dialog
|
|
:visible.sync="tabState.recruitment.detailVisible"
|
|
:detail="tabState.recruitment.detailData || {}"
|
|
/>
|
|
<extended-transfer-detail-dialog
|
|
:visible.sync="tabState.transfer.detailVisible"
|
|
:detail="tabState.transfer.detailData || {}"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getExtendedPurchaseDetail,
|
|
getExtendedPurchaseList,
|
|
getExtendedRecruitmentDetail,
|
|
getExtendedRecruitmentList,
|
|
getExtendedTransferDetail,
|
|
getExtendedTransferList,
|
|
} from "@/api/ccdi/projectSpecialCheck";
|
|
import ExtendedPurchaseDetailDialog from "./ExtendedPurchaseDetailDialog";
|
|
import ExtendedRecruitmentDetailDialog from "./ExtendedRecruitmentDetailDialog";
|
|
import ExtendedTransferDetailDialog from "./ExtendedTransferDetailDialog";
|
|
|
|
const LIST_API_MAP = {
|
|
purchase: getExtendedPurchaseList,
|
|
recruitment: getExtendedRecruitmentList,
|
|
transfer: getExtendedTransferList,
|
|
};
|
|
|
|
const DETAIL_API_MAP = {
|
|
purchase: getExtendedPurchaseDetail,
|
|
recruitment: getExtendedRecruitmentDetail,
|
|
transfer: getExtendedTransferDetail,
|
|
};
|
|
|
|
export default {
|
|
name: "ExtendedQuerySection",
|
|
components: {
|
|
ExtendedPurchaseDetailDialog,
|
|
ExtendedRecruitmentDetailDialog,
|
|
ExtendedTransferDetailDialog,
|
|
},
|
|
props: {
|
|
projectId: {
|
|
type: [String, Number],
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: "purchase",
|
|
tabState: this.createInitialStates(),
|
|
};
|
|
},
|
|
computed: {
|
|
currentState() {
|
|
return this.tabState[this.activeTab];
|
|
},
|
|
},
|
|
watch: {
|
|
projectId() {
|
|
this.resetAllStates();
|
|
if (this.projectId) {
|
|
this.loadList(this.activeTab);
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
if (this.projectId) {
|
|
this.loadList(this.activeTab);
|
|
}
|
|
},
|
|
methods: {
|
|
createInitialStates() {
|
|
return {
|
|
purchase: this.createTabState("purchase"),
|
|
recruitment: this.createTabState("recruitment"),
|
|
transfer: this.createTabState("transfer"),
|
|
};
|
|
},
|
|
createTabState(tabName) {
|
|
return {
|
|
query: this.createDefaultQuery(tabName),
|
|
rows: [],
|
|
total: 0,
|
|
loading: false,
|
|
loaded: false,
|
|
detailVisible: false,
|
|
detailLoading: false,
|
|
detailData: null,
|
|
};
|
|
},
|
|
createDefaultQuery(tabName) {
|
|
if (tabName === "purchase") {
|
|
return {
|
|
applicantName: "",
|
|
applyDateRange: [],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
}
|
|
if (tabName === "recruitment") {
|
|
return {
|
|
interviewerName: "",
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
}
|
|
return {
|
|
staffName: "",
|
|
transferDateRange: [],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
},
|
|
handleTabChange(tab) {
|
|
const tabName = tab.name || tab;
|
|
this.activeTab = tabName;
|
|
const state = this.tabState[tabName];
|
|
if (!state.loaded) {
|
|
this.loadList(tabName);
|
|
}
|
|
},
|
|
handleQuery() {
|
|
const state = this.currentState;
|
|
state.query.pageNum = 1;
|
|
this.loadList(this.activeTab);
|
|
},
|
|
resetQuery() {
|
|
const state = this.currentState;
|
|
state.query = this.createDefaultQuery(this.activeTab);
|
|
this.loadList(this.activeTab);
|
|
},
|
|
handlePagination() {
|
|
this.loadList(this.activeTab);
|
|
},
|
|
resetAllStates() {
|
|
this.tabState = this.createInitialStates();
|
|
},
|
|
buildListParams(tabName) {
|
|
const query = this.tabState[tabName].query;
|
|
if (tabName === "purchase") {
|
|
const [applyDateStart, applyDateEnd] = query.applyDateRange || [];
|
|
return {
|
|
projectId: this.projectId,
|
|
applicantName: query.applicantName,
|
|
applyDateStart,
|
|
applyDateEnd,
|
|
pageNum: query.pageNum,
|
|
pageSize: query.pageSize,
|
|
};
|
|
}
|
|
if (tabName === "recruitment") {
|
|
return {
|
|
projectId: this.projectId,
|
|
interviewerName: query.interviewerName,
|
|
pageNum: query.pageNum,
|
|
pageSize: query.pageSize,
|
|
};
|
|
}
|
|
const [transferDateStart, transferDateEnd] = query.transferDateRange || [];
|
|
return {
|
|
projectId: this.projectId,
|
|
staffName: query.staffName,
|
|
transferDateStart,
|
|
transferDateEnd,
|
|
pageNum: query.pageNum,
|
|
pageSize: query.pageSize,
|
|
};
|
|
},
|
|
buildDetailParams(tabName, row) {
|
|
if (tabName === "purchase") {
|
|
return {
|
|
projectId: this.projectId,
|
|
purchaseId: row.purchaseId,
|
|
};
|
|
}
|
|
if (tabName === "recruitment") {
|
|
return {
|
|
projectId: this.projectId,
|
|
recruitId: row.recruitId,
|
|
};
|
|
}
|
|
return {
|
|
projectId: this.projectId,
|
|
id: row.id,
|
|
};
|
|
},
|
|
async loadList(tabName) {
|
|
if (!this.projectId) {
|
|
return;
|
|
}
|
|
|
|
const state = this.tabState[tabName];
|
|
state.loading = true;
|
|
try {
|
|
const request = LIST_API_MAP[tabName];
|
|
const response = await request(this.buildListParams(tabName));
|
|
const data = (response && response.data) || {};
|
|
state.rows = Array.isArray(data.rows) ? data.rows : [];
|
|
state.total = Number(data.total || 0);
|
|
state.loaded = true;
|
|
} catch (error) {
|
|
state.rows = [];
|
|
state.total = 0;
|
|
this.$message.error("拓展查询加载失败");
|
|
} finally {
|
|
state.loading = false;
|
|
}
|
|
},
|
|
async handleDetail(row) {
|
|
const state = this.currentState;
|
|
state.detailLoading = true;
|
|
try {
|
|
const request = DETAIL_API_MAP[this.activeTab];
|
|
const response = await request(this.buildDetailParams(this.activeTab, row));
|
|
state.detailData = (response && response.data) || {};
|
|
state.detailVisible = true;
|
|
} catch (error) {
|
|
this.$message.error("详情加载失败");
|
|
} finally {
|
|
state.detailLoading = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.extended-query-card {
|
|
padding: 20px;
|
|
background: #fff;
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.extended-query-header {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.extended-query-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.extended-query-subtitle {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.extended-query-table {
|
|
margin-top: 12px;
|
|
}
|
|
</style>
|