yuanlin/OnboardXFront
2
0
Fork 0
Code Pull Requests Actions Releases Activity

11

Browse Source
This commit is contained in:
fuenmao
2026-08-25 20:37:24 +08:00
parent aec6c1f36c
commit eab359d9fa
6 changed files with 1748 additions and 1503 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/biz/onboarding/entry-config/index.vue
+72 -187
View File
@@ -1,58 +1,24 @@
<template>
<template>
<div class="main-box config-container">
<el-tabs v-model="activeTab" class="config-tabs">
<el-tab-pane label="动态填写字段" name="fields">
<el-tab-pane label="合同变量字典" name="variables">
<div class="tab-card-wrapper">
<div class="toolbar">
<el-button type="primary" icon="Plus" @click="openFieldCreate">
新增字段
</el-button>
</div>
<el-table :data="fields" border stripe>
<el-table-column prop="fieldCode" label="字段编码" min-width="140" />
<el-table-column prop="fieldName" label="字段名称" min-width="150" />
<el-table-column prop="dataType" label="数据类型" width="120" align="center">
<template #default="scope">
<el-tag size="small" type="info">{{ scope.row.dataType }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="placeholder" label="提示语" min-width="160" />
<el-table-column prop="status" label="状态" width="100" align="center">
<template #default="scope">
<el-tag size="small" :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" icon="Edit" @click="openFieldEdit(scope.row)">
编辑
</el-button>
<el-button link type="danger" icon="Delete" @click="removeField(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<VariableDefinitionPanel />
</div>
</el-tab-pane>
<el-tab-pane label="上传资料类型" name="materials">
<div class="tab-card-wrapper">
<div class="tab-card-wrapper material-tab-wrapper">
<div class="toolbar">
<el-button type="primary" icon="Plus" @click="openMaterialCreate">
新增资料类型
</el-button>
</div>
<el-table :data="materialTypes" border stripe>
<el-table :data="materialTypes" border stripe height="100%">
<el-table-column prop="materialCode" label="资料编码" min-width="140" />
<el-table-column prop="materialName" label="资料名称" min-width="150" />
<el-table-column prop="allowedExtensions" label="允许扩展名" min-width="140">
<el-table-column prop="allowedExtensions" label="允许扩展名" min-width="160">
<template #default="scope">
<code>{{ scope.row.allowedExtensions || '不限' }}</code>
</template>
@@ -67,7 +33,7 @@
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<el-table-column label="操作" width="150" fixed="right" align="center">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="openMaterialEdit(scope.row)">
编辑
@@ -89,60 +55,9 @@
</el-tab-pane>
</el-tabs>
<el-dialog v-model="fieldVisible" :title="fieldForm.id ? '编辑字段' : '新增字段'" width="560px" destroy-on-close>
<el-form :model="fieldForm" label-width="110px">
<el-form-item label="字段编码" required>
<el-input v-model="fieldForm.fieldCode" />
</el-form-item>
<el-form-item label="字段名称" required>
<el-input v-model="fieldForm.fieldName" />
</el-form-item>
<el-form-item label="数据类型" required>
<el-select v-model="fieldForm.dataType">
<el-option label="文本" value="string" />
<el-option label="日期" value="date" />
<el-option label="整数" value="int" />
<el-option label="数字" value="number" />
<el-option label="金额" value="decimal" />
<el-option label="下拉选择" value="select" />
</el-select>
</el-form-item>
<el-form-item label="提示语">
<el-input v-model="fieldForm.placeholder" />
</el-form-item>
<el-form-item label="选项JSON">
<el-input v-model="fieldForm.optionsJson" type="textarea" placeholder="下拉/多选字段可填写选项JSON" />
</el-form-item>
<el-form-item label="校验规则">
<el-input v-model="fieldForm.validationRule" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="fieldForm.status">
<el-option label="启用" value="enable" />
<el-option label="停用" value="disable" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="fieldVisible = false">
取消
</el-button>
<el-button type="primary" @click="saveField">
保存
</el-button>
</template>
</el-dialog>
<!-- 资料类型弹窗 -->
<el-dialog v-model="materialVisible" :title="materialForm.id ? '编辑资料类型' : '新增资料类型'" width="560px" destroy-on-close>
<el-form :model="materialForm" label-width="120px">
<el-form :model="materialForm" label-width="110px">
<el-form-item label="资料编码" required>
<el-input v-model="materialForm.materialCode" />
</el-form-item>
@@ -152,110 +67,72 @@
</el-form-item>
<el-form-item label="允许扩展名">
<el-input v-model="materialForm.allowedExtensions" placeholder="如：jpg,png,pdf" />
<el-input v-model="materialForm.allowedExtensions" placeholder="逗号分隔，如：png,jpg,jpeg,pdf" />
</el-form-item>
<el-form-item label="最大文件数量">
<el-input-number v-model="materialForm.maxFileCount" :min="1" />
<el-form-item label="最大文件数">
<el-input-number v-model="materialForm.maxFileCount" :min="1" :max="10" />
</el-form-item>
<el-form-item label="最大大小(MB)">
<el-input-number v-model="materialForm.maxFileSizeMb" :min="1" />
<el-form-item label="单文件大小(MB)">
<el-input-number v-model="materialForm.maxFileSizeMb" :min="1" :max="100" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="materialForm.status">
<el-option label="启用" value="enable" />
<el-option label="停用" value="disable" />
</el-select>
<el-radio-group v-model="materialForm.status">
<el-radio label="enable">启用</el-radio>
<el-radio label="disable">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="materialVisible = false">
取消
</el-button>
<el-button type="primary" @click="saveMaterial">
保存
</el-button>
<el-button @click="materialVisible = false">取消</el-button>
<el-button type="primary" @click="saveMaterial">保存</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="onboardingEntryConfig">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
onboardingTaskApi,
type OnboardingFormField,
type OnboardingMaterialType
OnboardingMaterialType,
onboardingTaskApi
} from "@/api/modules/biz/onboarding";
import OnboardingTemplatePanel from "./components/OnboardingTemplatePanel.vue";
import VariableDefinitionPanel from "./components/VariableDefinitionPanel.vue";
const activeTab = ref("fields");
const fields = ref<OnboardingFormField[]>([]);
const activeTab = ref("variables");
const materialTypes = ref<OnboardingMaterialType[]>([]);
const fieldVisible = ref(false);
const materialVisible = ref(false);
const fieldForm = reactive<Partial<OnboardingFormField>>({});
const materialForm = reactive<Partial<OnboardingMaterialType>>({});
async function loadBase() {
const [fieldResult, materialResult] = await Promise.all([
onboardingTaskApi.listFormFields(),
onboardingTaskApi.listMaterialTypes()
]);
fields.value = fieldResult.data || [];
materialTypes.value = materialResult.data || [];
const materialForm = reactive<Partial<OnboardingMaterialType>>({
materialCode: "",
materialName: "",
allowedExtensions: "png,jpg,jpeg,pdf",
maxFileCount: 3,
maxFileSizeMb: 10,
status: "enable"
});
async function loadMaterials() {
const res = await onboardingTaskApi.listMaterialTypes();
materialTypes.value = res.data || [];
}
function resetField() {
Object.assign(fieldForm, {
id: undefined,
fieldCode: "",
fieldName: "",
dataType: "string",
placeholder: "",
optionsJson: "",
validationRule: "",
status: "enable"
});
}
function resetMaterial() {
function openMaterialCreate() {
Object.assign(materialForm, {
id: undefined,
materialCode: "",
materialName: "",
allowedExtensions: "",
maxFileCount: 1,
maxFileSizeMb: undefined,
allowedExtensions: "png,jpg,jpeg,pdf",
maxFileCount: 3,
maxFileSizeMb: 10,
status: "enable"
});
}
function openFieldCreate() {
resetField();
fieldVisible.value = true;
}
function openFieldEdit(row: OnboardingFormField) {
Object.assign(fieldForm, row);
fieldVisible.value = true;
}
async function saveField() {
if (!fieldForm.fieldCode || !fieldForm.fieldName || !fieldForm.dataType) {
return ElMessage.warning("请填写字段编码、名称和数据类型");
}
await onboardingTaskApi.saveFormField(fieldForm);
fieldVisible.value = false;
ElMessage.success("保存成功");
await loadBase();
}
function openMaterialCreate() {
resetMaterial();
materialVisible.value = true;
}
@@ -266,29 +143,24 @@ function openMaterialEdit(row: OnboardingMaterialType) {
async function saveMaterial() {
if (!materialForm.materialCode || !materialForm.materialName) {
return ElMessage.warning("请填写资料编码和名称");
return ElMessage.warning("请填写资料编码和资料名称");
}
await onboardingTaskApi.saveMaterialType(materialForm);
ElMessage.success("资料类型保存成功");
materialVisible.value = false;
ElMessage.success("保存成功");
await loadBase();
}
async function removeField(row: OnboardingFormField) {
await ElMessageBox.confirm(`确认删除字段“${row.fieldName}”？`, "删除确认");
await onboardingTaskApi.deleteFormFields([row.id]);
ElMessage.success("删除成功");
await loadBase();
await loadMaterials();
}
async function removeMaterial(row: OnboardingMaterialType) {
await ElMessageBox.confirm(`确认删除资料类型“${row.materialName}”？`, "删除确认");
await onboardingTaskApi.deleteMaterialTypes([row.id]);
await ElMessageBox.confirm(`确认删除资料类型“${row.materialName}”吗？`, "删除确认", { type: "warning" });
await onboardingTaskApi.deleteMaterialTypes([row.id!]);
ElMessage.success("删除成功");
await loadBase();
await loadMaterials();
}
onMounted(loadBase);
onMounted(() => {
loadMaterials();
});
</script>
<style scoped>
@@ -318,21 +190,34 @@ onMounted(loadBase);
.config-tabs :deep(.el-tabs__content) {
flex: 1;
overflow: auto;
height: 0;
overflow: hidden;
}
.config-tabs :deep(.el-tab-pane) {
height: 100%;
display: flex;
flex-direction: column;
}
.tab-card-wrapper {
height: 100%;
width: 100%;
background: #fff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
}
.material-tab-wrapper {
display: flex;
flex-direction: column;
}
.toolbar {
margin-bottom: 14px;
}
.hint {
margin-bottom: 14px;
margin-bottom: 12px;
}
</style>