|
|
@@ -2,12 +2,26 @@
|
|
|
<div>
|
|
|
<!-- 数据表格 -->
|
|
|
<org-user-search @search="reload" ref="searchRef"></org-user-search>
|
|
|
+ <!-- 员工状态 tab：选项来自「员工状态」字典（缺项不渲染、不编造状态码），末尾固定「全部」。
|
|
|
+ 对照 hr 员工档案页样式，位于搜索区下方、表格工具栏之外 -->
|
|
|
+ <div v-if="statusTabs.length" class="status-tab-bar">
|
|
|
+ <button
|
|
|
+ v-for="tab in statusTabs"
|
|
|
+ :key="tab.key"
|
|
|
+ type="button"
|
|
|
+ class="status-tab"
|
|
|
+ :class="{ active: String(statusTab) === String(tab.value) }"
|
|
|
+ @click="switchStatusTab(tab.value)"
|
|
|
+ >
|
|
|
+ {{ tab.label }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
<ele-pro-table
|
|
|
ref="table"
|
|
|
:columns="columns"
|
|
|
:datasource="datasource"
|
|
|
- height="calc(100vh - 265px)"
|
|
|
- full-height="calc(100vh - 116px)"
|
|
|
+ height="calc(100vh - 315px)"
|
|
|
+ full-height="calc(100vh - 160px)"
|
|
|
tool-class="ele-toolbar-form"
|
|
|
:page-size="pageSize"
|
|
|
row-key="id"
|
|
|
@@ -419,6 +433,34 @@
|
|
|
statusList() {
|
|
|
const list = this.getDictListByName('员工状态');
|
|
|
return Array.isArray(list) ? list : [];
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 员工状态 tab：顺序 在职 → 试用期 → 已离职 → 待岗 → 退休 → 全部（对照 hr 员工档案页）。
|
|
|
+ * 前几项来自「员工状态」字典（value 就是接口 status 参数），字典里没有的状态不渲染，
|
|
|
+ * 例如「退休」需要后端在字典里加项后才会出现（前端不编状态码）。
|
|
|
+ * 「全部」为前端固定项（value 空串 → 不传 status 查全量）。
|
|
|
+ */
|
|
|
+ statusTabs() {
|
|
|
+ const defs = [
|
|
|
+ {
|
|
|
+ key: 'active',
|
|
|
+ test: (label) => label.includes('在职') && !label.includes('离职')
|
|
|
+ },
|
|
|
+ { key: 'probation', test: (label) => label.includes('试用') },
|
|
|
+ { key: 'resigned', test: (label) => label.includes('离职') },
|
|
|
+ { key: 'idle', test: (label) => label.includes('待岗') },
|
|
|
+ { key: 'retired', test: (label) => label.includes('退休') }
|
|
|
+ ];
|
|
|
+ const options = this.statusList || [];
|
|
|
+ const tabs = [];
|
|
|
+ defs.forEach((def) => {
|
|
|
+ const hit = options.find((item) => def.test(String(item.label || '')));
|
|
|
+ if (hit) {
|
|
|
+ tabs.push({ key: def.key, label: hit.label, value: String(hit.value) });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ tabs.push({ key: 'all', label: '全部', value: '' });
|
|
|
+ return tabs;
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
@@ -501,7 +543,10 @@
|
|
|
showEdit: false,
|
|
|
pageSize: this.$store.state.tablePageSize,
|
|
|
cacheKeyUrl: 'ef00833a-system-organization',
|
|
|
- selection: []
|
|
|
+ selection: [],
|
|
|
+ // 员工状态 tab 当前选中的状态码（'' = 全部）；
|
|
|
+ // 初始即「正式在职」的字典码 1（2026-10-14 抓包确认），字典异常时由 watch 纠正
|
|
|
+ statusTab: '1'
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -547,7 +592,7 @@
|
|
|
|
|
|
/* 表格数据源 */
|
|
|
datasource({ page, limit, where, order }) {
|
|
|
- return getUserPage({
|
|
|
+ const params = {
|
|
|
...where,
|
|
|
pageNum: page,
|
|
|
orderName: order.order || '',
|
|
|
@@ -556,7 +601,12 @@
|
|
|
groupId: this.organizationId,
|
|
|
isQueryLZ: 1,
|
|
|
affiDeptId: 1
|
|
|
- });
|
|
|
+ };
|
|
|
+ // 员工状态 tab：「全部」（空串）时不传 status，查全量
|
|
|
+ if (this.statusTab !== '') {
|
|
|
+ params.status = this.statusTab;
|
|
|
+ }
|
|
|
+ return getUserPage(params);
|
|
|
},
|
|
|
/* 表格数据源 */
|
|
|
datasource1({ page, limit, where, order }) {
|
|
|
@@ -582,9 +632,19 @@
|
|
|
...where,
|
|
|
pageNum: 1,
|
|
|
size: 10000,
|
|
|
- groupId: this.organizationId
|
|
|
+ groupId: this.organizationId,
|
|
|
+ // 导出同样跟随状态 tab（「全部」时不带 status）
|
|
|
+ ...(this.statusTab !== '' ? { status: this.statusTab } : {})
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ /* 状态 tab 切换：立即生效并回到第一页 */
|
|
|
+ switchStatusTab(value) {
|
|
|
+ const next = value == null ? '' : String(value);
|
|
|
+ if (String(this.statusTab) === next) return;
|
|
|
+ this.statusTab = next;
|
|
|
+ this.reload();
|
|
|
+ },
|
|
|
/* 显示编辑 */
|
|
|
openEdit(row, disabled) {
|
|
|
this.current = row;
|
|
|
@@ -658,7 +718,80 @@
|
|
|
// 监听机构id变化
|
|
|
organizationId() {
|
|
|
this.reload();
|
|
|
+ },
|
|
|
+ // 字典异步到位后检查默认 tab：当前选中值不在字典 tab 里时回到第一项（在职）并补一次查询
|
|
|
+ statusTabs(tabs) {
|
|
|
+ // 字典未加载时只有「全部」，不动默认值
|
|
|
+ if (tabs.length <= 1) return;
|
|
|
+ if (!tabs.some((tab) => tab.value === this.statusTab)) {
|
|
|
+ this.statusTab = tabs[0].value;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.table && this.reload();
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ /* 员工状态 tab（对照 hr 员工档案页样式）：整体高约 40px、字号 14px、每段左右留白约 18px，
|
|
|
+ 位于搜索区下方、表格工具栏之外 */
|
|
|
+ .status-tab-bar {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: stretch;
|
|
|
+ max-width: 100%;
|
|
|
+ margin: 2px 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-tab {
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 18px;
|
|
|
+ border: 0;
|
|
|
+ border-right: 1px solid #e5e5e5;
|
|
|
+ background: #fff;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40px;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color 0.18s ease, background-color 0.18s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-tab:last-child {
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-tab:hover {
|
|
|
+ color: #1890ff;
|
|
|
+ background: #f7fbff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-tab:focus {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-tab.active {
|
|
|
+ color: #1890ff;
|
|
|
+ font-weight: 400;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 窄屏：状态 tab 横向滚动，不换行挤压表头 */
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .status-tab-bar {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-tab {
|
|
|
+ padding: 0 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
