wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现专项核查拓展查询主题切换

Browse Source
This commit is contained in:
wkc
2026-03-24 23:07:28 +08:00
parent 5ba70789d4
commit 04c9cfc42e
4 changed files with 316 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue
View File

@@ -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>

21
ruoyi-ui/tests/unit/special-check-extended-query-filters.test.js Normal file
View File

@@ -0,0 +1,21 @@
const assert = require("assert");
const fs = require("fs");
const path = require("path");
const source = fs.readFileSync(
path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/ExtendedQuerySection.vue"),
"utf8"
);
assert(source.includes("申请人姓名"), "采购 Tab 应显示申请人姓名查询项");
assert(source.includes("申请日期范围"), "采购 Tab 应显示申请日期范围查询项");
assert(source.includes("面试官姓名"), "招聘 Tab 应显示面试官姓名查询项");
assert(source.includes("员工姓名"), "调动 Tab 应显示员工姓名查询项");
assert(source.includes("调动日期范围"), "调动 Tab 应显示调动日期范围查询项");
assert(source.includes("applicantName"), "采购查询字段应使用 applicantName");
assert(source.includes("interviewerName"), "招聘查询字段应使用 interviewerName");
assert(source.includes("staffName"), "调动查询字段应使用 staffName");
assert(source.includes("applyDateStart"), "采购日期范围应拆分开始字段");
assert(source.includes("applyDateEnd"), "采购日期范围应拆分结束字段");
assert(source.includes("transferDateStart"), "调动日期范围应拆分开始字段");
assert(source.includes("transferDateEnd"), "调动日期范围应拆分结束字段");

17
ruoyi-ui/tests/unit/special-check-extended-query-state-cache.test.js Normal file
View File

@@ -0,0 +1,17 @@
const assert = require("assert");
const fs = require("fs");
const path = require("path");
const source = fs.readFileSync(
path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/ExtendedQuerySection.vue"),
"utf8"
);
assert(source.includes("handleQuery"), "缺少查询提交方法");
assert(source.includes("resetQuery"), "缺少查询重置方法");
assert(source.includes("this.$message.error"), "查询失败时应提示错误");
assert(source.includes("state.rows = []"), "查询失败时应清空当前主题 rows");
assert(source.includes("state.total = 0"), "查询失败时应清空当前主题 total");
assert(source.includes("projectId()"), "应监听 projectId 变化");
assert(source.includes("resetAllStates"), "projectId 变化时应重置三类主题状态");
assert(source.includes("detailVisible"), "projectId 变化时应清空详情状态");

16
ruoyi-ui/tests/unit/special-check-extended-query-tabs.test.js Normal file
View File

@@ -0,0 +1,16 @@
const assert = require("assert");
const fs = require("fs");
const path = require("path");
const source = fs.readFileSync(
path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/ExtendedQuerySection.vue"),
"utf8"
);
assert(source.includes('activeTab: "purchase"'), "默认激活 Tab 应为采购记录");
assert(source.includes("handleTabChange"), "缺少 Tab 切换处理方法");
assert(source.includes("loadList"), "缺少列表加载方法");
assert(source.includes("if (!state.loaded)"), "首次切换到 Tab 时应按 loaded 状态触发首查");
assert(source.includes("purchase:"), "缺少采购 Tab 状态");
assert(source.includes("recruitment:"), "缺少招聘 Tab 状态");
assert(source.includes("transfer:"), "缺少调动 Tab 状态");