实现专项核查拓展查询主题切换
This commit is contained in:
@@ -5,21 +5,132 @@
|
||||
<div class="extended-query-subtitle">在专项核查同范围员工内联查采购、招聘和调动记录</div>
|
||||
</div>
|
||||
|
||||
<el-tabs value="purchase" class="extended-query-tabs">
|
||||
<el-tabs v-model="activeTab" class="extended-query-tabs" @tab-click="handleTabChange">
|
||||
<el-tab-pane label="采购记录" name="purchase">
|
||||
<div class="extended-query-placeholder">采购记录列表区域待接入</div>
|
||||
<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">
|
||||
<div class="extended-query-placeholder">招聘记录列表区域待接入</div>
|
||||
<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">
|
||||
<div class="extended-query-placeholder">调动记录列表区域待接入</div>
|
||||
<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>
|
||||
|
||||
<pagination
|
||||
v-show="currentState.total > 0"
|
||||
:total="currentState.total"
|
||||
:page.sync="currentState.query.pageNum"
|
||||
:limit.sync="currentState.query.pageSize"
|
||||
@pagination="handlePagination"
|
||||
/>
|
||||
</div>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getExtendedPurchaseList,
|
||||
getExtendedRecruitmentList,
|
||||
getExtendedTransferList,
|
||||
} from "@/api/ccdi/projectSpecialCheck";
|
||||
|
||||
const LIST_API_MAP = {
|
||||
purchase: getExtendedPurchaseList,
|
||||
recruitment: getExtendedRecruitmentList,
|
||||
transfer: getExtendedTransferList,
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "ExtendedQuerySection",
|
||||
props: {
|
||||
@@ -28,6 +139,151 @@ export default {
|
||||
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,
|
||||
};
|
||||
},
|
||||
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;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -54,8 +310,7 @@ export default {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.extended-query-placeholder {
|
||||
padding: 20px 0;
|
||||
color: #64748b;
|
||||
.extended-query-table {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user