逻辑调整
This commit is contained in:
fuenmao
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<div class="template-panel">
|
||||
<div class="toolbar">
|
||||
<el-input
|
||||
v-model="query.keyword"
|
||||
clearable
|
||||
placeholder="搜索模板编码或名称"
|
||||
class="keyword-input"
|
||||
@keyup.enter="loadTemplates"
|
||||
/>
|
||||
<el-select v-model="query.companyId" clearable filterable placeholder="全部公司" class="company-filter">
|
||||
<el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="loadTemplates">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<div class="toolbar-spacer" />
|
||||
<el-button type="primary" icon="Plus" @click="openCreate">新增入职模板</el-button>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
title="入职模板统一管理公司、岗位、合同、员工补充字段和上传材料；创建任务后会冻结本次配置。"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="tip"
|
||||
/>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" border>
|
||||
<el-table-column prop="templateCode" label="模板编码" min-width="150" />
|
||||
<el-table-column prop="templateName" label="模板名称" min-width="180" />
|
||||
<el-table-column prop="companyName" label="所属公司" min-width="160" />
|
||||
<el-table-column label="适用岗位" min-width="220">
|
||||
<template #default="scope">
|
||||
<el-space wrap>
|
||||
<el-tag v-for="name in scope.row.positionNames" :key="name" size="small">{{ name }}</el-tag>
|
||||
</el-space>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="配置内容" min-width="230">
|
||||
<template #default="scope">
|
||||
合同 {{ scope.row.contractCount || 0 }} 份 / 补充字段 {{ scope.row.formFieldCount || 0 }} 项 / 材料 {{ scope.row.materialCount || 0 }} 项
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="90" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 'enable' ? 'success' : 'info'">
|
||||
{{ scope.row.status === "enable" ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="openEdit(scope.row)">编辑</el-button>
|
||||
<el-button link type="danger" @click="removeTemplate(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="query.pageNum"
|
||||
v-model:page-size="query.pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="loadTemplates"
|
||||
@size-change="loadTemplates"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="form.id ? '编辑入职模板' : '新增入职模板'"
|
||||
width="1080px"
|
||||
top="5vh"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form label-width="110px">
|
||||
<el-divider content-position="left">基本信息</el-divider>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="模板编码" required>
|
||||
<el-input v-model="form.templateCode" placeholder="例如 FULLTIME_DEFAULT" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="模板名称" required>
|
||||
<el-input v-model="form.templateName" placeholder="例如 全职员工入职模板" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="状态" required>
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio value="enable">启用</el-radio>
|
||||
<el-radio value="disable">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="所属公司" required>
|
||||
<el-select v-model="form.companyId" filterable class="full-width" @change="onCompanyChange">
|
||||
<el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-form-item label="适用岗位" required>
|
||||
<el-select v-model="form.positionIds" multiple filterable collapse-tags class="full-width" :disabled="!form.companyId">
|
||||
<el-option v-for="item in positions" :key="item.id" :label="item.positionName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="模板说明">
|
||||
<el-input v-model="form.description" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">合同文件</el-divider>
|
||||
<div class="section-action">
|
||||
<span>合同变量由上传 DOCX 时自动识别，这里只选择已确认并启用的版本。</span>
|
||||
<el-button type="primary" plain icon="Plus" @click="addContract">添加合同</el-button>
|
||||
</div>
|
||||
<el-table :data="form.contracts" border empty-text="请至少添加一份合同">
|
||||
<el-table-column label="合同模板" min-width="210">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.contractTemplateId" filterable class="full-width" @change="onContractTemplateChange(scope.row)">
|
||||
<el-option v-for="item in contractTemplates" :key="item.id" :label="item.templateName" :value="item.id" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="启用版本" min-width="180">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.contractTemplateVersionId" class="full-width" :disabled="!scope.row.contractTemplateId">
|
||||
<el-option
|
||||
v-for="item in versionOptions[scope.row.contractTemplateId] || []"
|
||||
:key="item.id"
|
||||
:label="item.versionNo"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必须确认" width="100" align="center">
|
||||
<template #default="scope"><el-switch v-model="scope.row.required" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打印份数" width="130">
|
||||
<template #default="scope"><el-input-number v-model="scope.row.printCopies" :min="1" :max="10" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" width="110">
|
||||
<template #default="scope"><el-input-number v-model="scope.row.sortCode" :min="0" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" align="center">
|
||||
<template #default="scope"><el-button link type="danger" @click="form.contracts.splice(scope.$index, 1)">移除</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-divider content-position="left">员工补充字段</el-divider>
|
||||
<el-alert title="姓名、手机号、身份证号等基本信息固定展示；这里只选择额外需要员工填写的字段。" type="info" :closable="false" class="section-tip" />
|
||||
<el-table :data="formFields" border max-height="260">
|
||||
<el-table-column label="选择" width="70" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox :model-value="hasField(scope.row.id)" @change="value => toggleField(scope.row.id, Boolean(value))" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fieldCode" label="字段编码" min-width="170" />
|
||||
<el-table-column prop="fieldName" label="字段名称" min-width="180" />
|
||||
<el-table-column prop="dataType" label="数据类型" width="110" />
|
||||
<el-table-column label="必填" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-if="hasField(scope.row.id)" v-model="fieldConfig(scope.row.id)!.required" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" width="120">
|
||||
<template #default="scope">
|
||||
<el-input-number v-if="hasField(scope.row.id)" v-model="fieldConfig(scope.row.id)!.sortCode" :min="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-divider content-position="left">员工上传材料</el-divider>
|
||||
<el-table :data="materialTypes" border max-height="260">
|
||||
<el-table-column label="选择" width="70" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox :model-value="hasMaterial(scope.row.id)" @change="value => toggleMaterial(scope.row.id, Boolean(value))" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="materialCode" label="材料编码" min-width="170" />
|
||||
<el-table-column prop="materialName" label="材料名称" min-width="200" />
|
||||
<el-table-column prop="maxFileCount" label="最多文件" width="100" align="center" />
|
||||
<el-table-column label="必传" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-if="hasMaterial(scope.row.id)" v-model="materialConfig(scope.row.id)!.required" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" width="120">
|
||||
<template #default="scope">
|
||||
<el-input-number v-if="hasMaterial(scope.row.id)" v-model="materialConfig(scope.row.id)!.sortCode" :min="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="save">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import {
|
||||
onboardingTaskApi,
|
||||
type OnboardingCompanyOption,
|
||||
type OnboardingContractTemplate,
|
||||
type OnboardingContractVersion,
|
||||
type OnboardingFormField,
|
||||
type OnboardingMaterialType,
|
||||
type OnboardingPositionOption,
|
||||
type OnboardingTemplate,
|
||||
type OnboardingTemplateContractConfig,
|
||||
type OnboardingTemplateFieldConfig,
|
||||
type OnboardingTemplateMaterialConfig
|
||||
} from "@/api/modules/biz/onboarding";
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const visible = ref(false);
|
||||
const total = ref(0);
|
||||
const rows = ref<OnboardingTemplate[]>([]);
|
||||
const companies = ref<OnboardingCompanyOption[]>([]);
|
||||
const positions = ref<OnboardingPositionOption[]>([]);
|
||||
const contractTemplates = ref<OnboardingContractTemplate[]>([]);
|
||||
const formFields = ref<OnboardingFormField[]>([]);
|
||||
const materialTypes = ref<OnboardingMaterialType[]>([]);
|
||||
const versionOptions = reactive<Record<number, OnboardingContractVersion[]>>({});
|
||||
|
||||
const query = reactive({
|
||||
keyword: "",
|
||||
companyId: undefined as number | undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
|
||||
const emptyForm = (): OnboardingTemplate => ({
|
||||
id: undefined as unknown as number,
|
||||
templateCode: "",
|
||||
templateName: "",
|
||||
companyId: undefined as unknown as number,
|
||||
positionIds: [],
|
||||
contracts: [],
|
||||
formFields: [],
|
||||
materials: [],
|
||||
status: "enable",
|
||||
description: ""
|
||||
});
|
||||
const form = reactive<OnboardingTemplate>(emptyForm());
|
||||
|
||||
async function loadBaseData() {
|
||||
try {
|
||||
const [companyRes, contractRes, fieldRes, materialRes] = await Promise.all([
|
||||
onboardingTaskApi.listCompanies().catch(() => ({ data: [] })),
|
||||
onboardingTaskApi.templatePage({ pageNum: 1, pageSize: 100, status: "enable" }).catch(() => ({ data: { list: [] } })),
|
||||
onboardingTaskApi.listFormFields().catch(() => ({ data: [] })),
|
||||
onboardingTaskApi.listMaterialTypes().catch(() => ({ data: [] }))
|
||||
]);
|
||||
companies.value = companyRes.data || [];
|
||||
contractTemplates.value = contractRes.data?.list || [];
|
||||
formFields.value = (fieldRes.data || []).filter(item => item.status === "enable");
|
||||
materialTypes.value = (materialRes.data || []).filter(item => item.status === "enable");
|
||||
} catch (e) {
|
||||
console.error("加载基础数据失败", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTemplates() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await onboardingTaskApi.onboardingTemplatePage(query);
|
||||
rows.value = data?.list || [];
|
||||
total.value = data?.total || 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
Object.assign(query, { keyword: "", companyId: undefined, pageNum: 1 });
|
||||
loadTemplates();
|
||||
}
|
||||
|
||||
async function loadPositions(companyId: number) {
|
||||
const { data } = await onboardingTaskApi.listPositions(companyId);
|
||||
positions.value = data || [];
|
||||
}
|
||||
|
||||
async function onCompanyChange(companyId: number) {
|
||||
form.positionIds = [];
|
||||
positions.value = [];
|
||||
if (companyId) await loadPositions(companyId);
|
||||
}
|
||||
|
||||
function addContract() {
|
||||
form.contracts.push({
|
||||
contractTemplateId: undefined as unknown as number,
|
||||
contractTemplateVersionId: undefined as unknown as number,
|
||||
required: true,
|
||||
printCopies: 1,
|
||||
sortCode: (form.contracts.length + 1) * 10
|
||||
});
|
||||
}
|
||||
|
||||
async function loadVersions(templateId: number) {
|
||||
if (!templateId || versionOptions[templateId]) return;
|
||||
const { data } = await onboardingTaskApi.versionPage({ templateId, pageNum: 1, pageSize: 100 });
|
||||
versionOptions[templateId] = (data?.list || []).filter(item => item.versionStatus === "enabled");
|
||||
}
|
||||
|
||||
async function onContractTemplateChange(row: OnboardingTemplateContractConfig) {
|
||||
row.contractTemplateVersionId = undefined as unknown as number;
|
||||
await loadVersions(row.contractTemplateId);
|
||||
}
|
||||
|
||||
function hasField(fieldId: number) {
|
||||
return form.formFields.some(item => item.fieldId === fieldId);
|
||||
}
|
||||
|
||||
function fieldConfig(fieldId: number) {
|
||||
return form.formFields.find(item => item.fieldId === fieldId);
|
||||
}
|
||||
|
||||
function toggleField(fieldId: number, selected: boolean) {
|
||||
if (selected && !hasField(fieldId)) {
|
||||
form.formFields.push({ fieldId, required: true, sortCode: (form.formFields.length + 1) * 10 });
|
||||
} else if (!selected) {
|
||||
form.formFields = form.formFields.filter(item => item.fieldId !== fieldId);
|
||||
}
|
||||
}
|
||||
|
||||
function hasMaterial(materialTypeId: number) {
|
||||
return form.materials.some(item => item.materialTypeId === materialTypeId);
|
||||
}
|
||||
|
||||
function materialConfig(materialTypeId: number) {
|
||||
return form.materials.find(item => item.materialTypeId === materialTypeId);
|
||||
}
|
||||
|
||||
function toggleMaterial(materialTypeId: number, selected: boolean) {
|
||||
if (selected && !hasMaterial(materialTypeId)) {
|
||||
form.materials.push({ materialTypeId, required: true, sortCode: (form.materials.length + 1) * 10 });
|
||||
} else if (!selected) {
|
||||
form.materials = form.materials.filter(item => item.materialTypeId !== materialTypeId);
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
Object.assign(form, emptyForm());
|
||||
positions.value = [];
|
||||
visible.value = true;
|
||||
}
|
||||
|
||||
async function openEdit(row: OnboardingTemplate) {
|
||||
const { data } = await onboardingTaskApi.onboardingTemplateDetail({ id: row.id! });
|
||||
Object.assign(form, emptyForm(), data);
|
||||
await loadPositions(form.companyId);
|
||||
await Promise.all(form.contracts.map(item => loadVersions(item.contractTemplateId)));
|
||||
visible.value = true;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!form.templateCode.trim() || !form.templateName.trim() || !form.companyId) {
|
||||
return ElMessage.warning("请填写模板编码、模板名称和所属公司");
|
||||
}
|
||||
if (!form.positionIds.length) return ElMessage.warning("请至少选择一个适用岗位");
|
||||
if (!form.contracts.length || form.contracts.some(item => !item.contractTemplateId || !item.contractTemplateVersionId)) {
|
||||
return ElMessage.warning("请完整选择至少一份合同模板及版本");
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
try {
|
||||
await onboardingTaskApi.saveOnboardingTemplate(form);
|
||||
ElMessage.success("入职模板保存成功");
|
||||
visible.value = false;
|
||||
await loadTemplates();
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeTemplate(row: OnboardingTemplate) {
|
||||
await ElMessageBox.confirm(`确认删除入职模板“${row.templateName}”吗？`, "删除确认", { type: "warning" });
|
||||
await onboardingTaskApi.deleteOnboardingTemplate([row.id!]);
|
||||
ElMessage.success("删除成功");
|
||||
await loadTemplates();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadBaseData(), loadTemplates()]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.template-panel {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.keyword-input {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.company-filter {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tip,
|
||||
.section-tip {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user