32 changed files with 1623 additions and 3039 deletions
@ -1,96 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
/** |
|
||||
* 获取模板列表 |
|
||||
*/ |
|
||||
export function getDocumentTemplateList(params?: any) { |
|
||||
return request.get('/document_template/lists', { params }) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 获取模板详情 |
|
||||
*/ |
|
||||
export function getDocumentTemplateInfo(id: number) { |
|
||||
return request.get(`/document_template/info/${id}`) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 删除模板 |
|
||||
*/ |
|
||||
export function deleteDocumentTemplate(id: number) { |
|
||||
return request.delete(`/document_template/delete/${id}`) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 复制模板 |
|
||||
*/ |
|
||||
export function copyDocumentTemplate(id: number) { |
|
||||
return request.post(`/document_template/copy/${id}`) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 上传模板 |
|
||||
*/ |
|
||||
export function uploadDocumentTemplate(formData: FormData) { |
|
||||
return request.post('/document_template/upload', formData, { |
|
||||
headers: { |
|
||||
'Content-Type': 'multipart/form-data' |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 解析占位符 |
|
||||
*/ |
|
||||
export function parseDocumentPlaceholder(data: any) { |
|
||||
return request.post('/document_template/parse', data) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 预览模板 |
|
||||
*/ |
|
||||
export function previewDocumentTemplate(id: number) { |
|
||||
return request.get(`/document_template/preview/${id}`) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 保存占位符配置 |
|
||||
*/ |
|
||||
export function saveDocumentPlaceholderConfig(data: any) { |
|
||||
return request.post('/document_template/config/save', data) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 获取数据源列表 |
|
||||
*/ |
|
||||
export function getDocumentDataSources() { |
|
||||
return request.get('/document_template/datasources') |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 生成文档 |
|
||||
*/ |
|
||||
export function generateDocumentFile(data: any) { |
|
||||
return request.post('/document_template/generate', data) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 下载文档 |
|
||||
*/ |
|
||||
export function downloadDocumentFile(logId: number) { |
|
||||
return request.get(`/document_template/download/${logId}`, { responseType: 'blob' }) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 获取生成记录 |
|
||||
*/ |
|
||||
export function getDocumentGenerateLog(params?: any) { |
|
||||
return request.get('/document_template/log/lists', { params }) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 批量删除生成记录 |
|
||||
*/ |
|
||||
export function batchDeleteDocumentLog(ids: number[]) { |
|
||||
return request.post('/document_template/log/batch_delete', { ids }) |
|
||||
} |
|
||||
@ -1,12 +0,0 @@ |
|||||
<!-- |
|
||||
Word模板管理页面 - 路由入口文件 |
|
||||
此文件是为了匹配动态路由系统的组件加载规则而创建的 |
|
||||
实际功能组件位于: ./document-template/index.vue |
|
||||
--> |
|
||||
<template> |
|
||||
<DocumentTemplateIndex /> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import DocumentTemplateIndex from './document-template/index.vue' |
|
||||
</script> |
|
||||
@ -1,300 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog v-model="visible" title="生成Word文档" width="800px" :before-close="handleClose"> |
|
||||
<div v-if="loading" class="text-center py-8"> |
|
||||
<el-icon class="is-loading"><Loading /></el-icon> |
|
||||
<span class="ml-2">加载中...</span> |
|
||||
</div> |
|
||||
|
|
||||
<div v-else> |
|
||||
<el-form :model="generateForm" label-width="120px" ref="generateFormRef"> |
|
||||
<!-- 模板选择 --> |
|
||||
<el-form-item label="选择模板" prop="template_id" :rules="[{required: true, message: '请选择模板'}]"> |
|
||||
<el-select v-model="generateForm.template_id" |
|
||||
@change="onTemplateChange" |
|
||||
placeholder="请选择要使用的模板" |
|
||||
style="width: 100%" |
|
||||
filterable> |
|
||||
<el-option v-for="template in activeTemplates" |
|
||||
:key="template.id" |
|
||||
:label="template.contract_name" |
|
||||
:value="template.id"> |
|
||||
<div class="flex justify-between items-center"> |
|
||||
<span>{{ template.contract_name }}</span> |
|
||||
<el-tag size="small" type="primary">{{ getTypeText(template.contract_type) }}</el-tag> |
|
||||
</div> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<!-- 输出文件名 --> |
|
||||
<el-form-item label="输出文件名" prop="output_filename"> |
|
||||
<el-input v-model="generateForm.output_filename" |
|
||||
placeholder="不填写将自动生成文件名" |
|
||||
:suffix-icon="DocumentAdd"> |
|
||||
<template #append>.docx</template> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<!-- 动态填充字段 --> |
|
||||
<div v-if="placeholderConfigs && Object.keys(placeholderConfigs).length > 0"> |
|
||||
<el-divider> |
|
||||
<span class="text-gray-600">数据填充</span> |
|
||||
</el-divider> |
|
||||
|
|
||||
<div class="space-y-4 max-h-96 overflow-y-auto p-4 bg-gray-50 rounded"> |
|
||||
<div v-for="(config, placeholder) in placeholderConfigs" |
|
||||
:key="placeholder" |
|
||||
class="bg-white p-4 rounded border"> |
|
||||
<div class="flex items-center justify-between mb-3"> |
|
||||
<label class="font-semibold text-gray-700"> |
|
||||
{{ config.name }} |
|
||||
<el-tag size="small" class="ml-2">{{ placeholder }}</el-tag> |
|
||||
</label> |
|
||||
<div class="text-sm text-gray-500"> |
|
||||
<span v-if="config.data_source === 'database'" class="text-blue-600"> |
|
||||
<el-icon><Database /></el-icon> |
|
||||
自动获取 |
|
||||
</span> |
|
||||
<span v-else class="text-orange-600"> |
|
||||
<el-icon><Edit /></el-icon> |
|
||||
手动填写 |
|
||||
<el-tag v-if="config.is_required" type="danger" size="small" class="ml-1">必填</el-tag> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 手动填写的字段 --> |
|
||||
<div v-if="config.data_source === 'manual'"> |
|
||||
<el-form-item :prop="`fill_data.${placeholder}`" |
|
||||
:rules="config.is_required ? [{required: true, message: `${config.name}不能为空`}] : []"> |
|
||||
<el-input v-model="generateForm.fill_data[placeholder]" |
|
||||
:placeholder="`请输入${config.name}`" |
|
||||
:value="generateForm.fill_data[placeholder] || config.default_value"> |
|
||||
<template #prepend v-if="config.process_function"> |
|
||||
<el-tooltip :content="getProcessFunctionDesc(config.process_function)" placement="top"> |
|
||||
<el-icon><Magic /></el-icon> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 数据库字段显示 --> |
|
||||
<div v-else class="bg-blue-50 p-3 rounded text-sm"> |
|
||||
<div class="text-blue-700"> |
|
||||
<el-icon><Database /></el-icon> |
|
||||
数据来源：{{ getTableDisplayName(config.table_name) }} > {{ getFieldDisplayName(config.table_name, config.field_name) }} |
|
||||
</div> |
|
||||
<div v-if="config.process_function" class="text-blue-600 mt-1"> |
|
||||
<el-icon><Magic /></el-icon> |
|
||||
处理函数：{{ getProcessFunctionDesc(config.process_function) }} |
|
||||
</div> |
|
||||
<div v-if="config.default_value" class="text-blue-600 mt-1"> |
|
||||
<el-icon><Star /></el-icon> |
|
||||
默认值：{{ config.default_value }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 无占位符提示 --> |
|
||||
<div v-else-if="generateForm.template_id" class="text-center py-8 text-gray-500"> |
|
||||
<el-icon size="48"><DocumentRemove /></el-icon> |
|
||||
<div class="mt-4">该模板暂无配置的占位符</div> |
|
||||
<div class="text-sm mt-2">请先配置模板的占位符</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
|
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="handleClose">取消</el-button> |
|
||||
<el-button type="primary" |
|
||||
@click="generateDocument" |
|
||||
:loading="generateLoading" |
|
||||
:disabled="!generateForm.template_id"> |
|
||||
<el-icon v-if="!generateLoading"><Document /></el-icon> |
|
||||
{{ generateLoading ? '生成中...' : '生成文档' }} |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { reactive, ref, onMounted } from 'vue' |
|
||||
import { ElMessage, type FormInstance } from 'element-plus' |
|
||||
import { getDocumentTemplateList, getDocumentTemplateInfo, generateDocumentFile, getDocumentDataSources } from '@/app/api/document' |
|
||||
|
|
||||
const emit = defineEmits(['complete']) |
|
||||
|
|
||||
// 组件状态 |
|
||||
const visible = ref(false) |
|
||||
const loading = ref(false) |
|
||||
const generateLoading = ref(false) |
|
||||
|
|
||||
// 数据 |
|
||||
const activeTemplates = ref([]) |
|
||||
const dataSources = ref({}) |
|
||||
const placeholderConfigs = ref({}) |
|
||||
|
|
||||
// 生成表单 |
|
||||
const generateForm = reactive({ |
|
||||
template_id: '', |
|
||||
output_filename: '', |
|
||||
fill_data: {} |
|
||||
}) |
|
||||
|
|
||||
// 组件引用 |
|
||||
const generateFormRef = ref<FormInstance>() |
|
||||
|
|
||||
// 打开生成对话框 |
|
||||
const open = async (preSelectedTemplate?: any) => { |
|
||||
visible.value = true |
|
||||
loading.value = true |
|
||||
|
|
||||
try { |
|
||||
// 获取活跃模板列表和数据源 |
|
||||
const [templatesResult, dataSourceResult] = await Promise.all([ |
|
||||
getDocumentTemplateList({ contract_status: 'active', limit: 100 }), |
|
||||
getDocumentDataSources() |
|
||||
]) |
|
||||
|
|
||||
activeTemplates.value = templatesResult.data.data |
|
||||
dataSources.value = dataSourceResult.data |
|
||||
|
|
||||
// 如果有预选模板，自动选择 |
|
||||
if (preSelectedTemplate) { |
|
||||
generateForm.template_id = preSelectedTemplate.id |
|
||||
await onTemplateChange() |
|
||||
} |
|
||||
} catch (error) { |
|
||||
ElMessage.error('加载数据失败') |
|
||||
console.error(error) |
|
||||
} finally { |
|
||||
loading.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 模板变化 |
|
||||
const onTemplateChange = async () => { |
|
||||
if (!generateForm.template_id) { |
|
||||
placeholderConfigs.value = {} |
|
||||
generateForm.fill_data = {} |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
try { |
|
||||
const { data } = await getDocumentTemplateInfo(generateForm.template_id) |
|
||||
placeholderConfigs.value = data.placeholder_config || {} |
|
||||
|
|
||||
// 初始化填充数据 |
|
||||
generateForm.fill_data = {} |
|
||||
Object.keys(placeholderConfigs.value).forEach(placeholder => { |
|
||||
const config = placeholderConfigs.value[placeholder] |
|
||||
if (config.data_source === 'manual') { |
|
||||
generateForm.fill_data[placeholder] = config.default_value || '' |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 自动设置文件名 |
|
||||
const template = activeTemplates.value.find(t => t.id === generateForm.template_id) |
|
||||
if (template && !generateForm.output_filename) { |
|
||||
const timestamp = new Date().toISOString().slice(0, 16).replace(/[-:T]/g, '') |
|
||||
generateForm.output_filename = `${template.contract_name}_${timestamp}` |
|
||||
} |
|
||||
} catch (error) { |
|
||||
ElMessage.error('获取模板信息失败') |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 类型文本映射 |
|
||||
const getTypeText = (type: string) => { |
|
||||
const typeMap = { |
|
||||
'general': '通用', |
|
||||
'course': '课程', |
|
||||
'membership': '会员' |
|
||||
} |
|
||||
return typeMap[type] || '未知' |
|
||||
} |
|
||||
|
|
||||
// 获取表显示名称 |
|
||||
const getTableDisplayName = (tableName: string) => { |
|
||||
return dataSources.value[tableName]?.table_alias || tableName |
|
||||
} |
|
||||
|
|
||||
// 获取字段显示名称 |
|
||||
const getFieldDisplayName = (tableName: string, fieldName: string) => { |
|
||||
const fields = dataSources.value[tableName]?.fields || [] |
|
||||
const field = fields.find(f => f.field_name === fieldName) |
|
||||
return field?.field_alias || fieldName |
|
||||
} |
|
||||
|
|
||||
// 获取处理函数描述 |
|
||||
const getProcessFunctionDesc = (funcName: string) => { |
|
||||
const funcMap = { |
|
||||
'formatDate': '格式化为：2024年01月01日', |
|
||||
'formatDateTime': '格式化为：2024年01月01日 10:30', |
|
||||
'formatNumber': '格式化为数字：1,234.56', |
|
||||
'toUpper': '转换为大写', |
|
||||
'toLower': '转换为小写' |
|
||||
} |
|
||||
return funcMap[funcName] || funcName |
|
||||
} |
|
||||
|
|
||||
// 生成文档 |
|
||||
const generateDocument = async () => { |
|
||||
if (!generateFormRef.value) return |
|
||||
|
|
||||
const valid = await generateFormRef.value.validate() |
|
||||
if (!valid) return |
|
||||
|
|
||||
generateLoading.value = true |
|
||||
try { |
|
||||
const { data } = await generateDocumentFile({ |
|
||||
template_id: generateForm.template_id, |
|
||||
output_filename: generateForm.output_filename, |
|
||||
fill_data: generateForm.fill_data |
|
||||
}) |
|
||||
|
|
||||
ElMessage.success('文档生成成功！') |
|
||||
|
|
||||
// 下载文件 |
|
||||
if (data.download_url) { |
|
||||
window.open(data.download_url, '_blank') |
|
||||
} |
|
||||
|
|
||||
handleClose() |
|
||||
emit('complete') |
|
||||
} catch (error) { |
|
||||
ElMessage.error(error.message || '生成失败') |
|
||||
} finally { |
|
||||
generateLoading.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 关闭对话框 |
|
||||
const handleClose = () => { |
|
||||
visible.value = false |
|
||||
generateForm.template_id = '' |
|
||||
generateForm.output_filename = '' |
|
||||
generateForm.fill_data = {} |
|
||||
placeholderConfigs.value = {} |
|
||||
} |
|
||||
|
|
||||
// 暴露方法给父组件 |
|
||||
defineExpose({ |
|
||||
open |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.dialog-footer { |
|
||||
text-align: right; |
|
||||
} |
|
||||
|
|
||||
.space-y-4 > * + * { |
|
||||
margin-top: 1rem; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,280 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog v-model="visible" :title="`配置占位符 - ${templateInfo.contract_name}`" width="900px" :before-close="handleClose"> |
|
||||
<div v-if="loading" class="text-center py-8"> |
|
||||
<el-icon class="is-loading"><Loading /></el-icon> |
|
||||
<span class="ml-2">加载中...</span> |
|
||||
</div> |
|
||||
|
|
||||
<div v-else-if="placeholders.length === 0" class="text-center py-8 text-gray-500"> |
|
||||
<el-icon size="48"><DocumentRemove /></el-icon> |
|
||||
<div class="mt-4">该模板中未发现占位符</div> |
|
||||
<div class="text-sm mt-2">请确保模板中包含 {{变量名}} 格式的占位符</div> |
|
||||
</div> |
|
||||
|
|
||||
<div v-else> |
|
||||
<div class="mb-4 p-4 bg-blue-50 rounded"> |
|
||||
<h4 class="text-blue-800 mb-2"> |
|
||||
<el-icon><InfoFilled /></el-icon> |
|
||||
配置说明 |
|
||||
</h4> |
|
||||
<ul class="text-sm text-blue-700 space-y-1"> |
|
||||
<li>• 为每个占位符配置数据源和显示名称</li> |
|
||||
<li>• 数据库数据源：从系统数据表中自动获取数据</li> |
|
||||
<li>• 手动填写数据源：生成文档时需要手动输入</li> |
|
||||
<li>• 可设置默认值和处理函数</li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
|
|
||||
<el-form :model="configForm" label-width="120px" ref="configFormRef"> |
|
||||
<div class="space-y-6"> |
|
||||
<div v-for="(placeholder, index) in placeholders" :key="placeholder" |
|
||||
class="border rounded-lg p-4 bg-gray-50"> |
|
||||
<div class="flex items-center justify-between mb-4"> |
|
||||
<h4 class="text-lg font-semibold text-gray-800"> |
|
||||
<el-tag type="primary" size="large">{{ placeholder }}</el-tag> |
|
||||
</h4> |
|
||||
<el-tag v-if="configForm.configs[placeholder]?.is_required" type="danger" size="small">必填</el-tag> |
|
||||
</div> |
|
||||
|
|
||||
<el-row :gutter="16"> |
|
||||
<el-col :span="12"> |
|
||||
<el-form-item label="显示名称" :prop="`configs.${placeholder}.name`" |
|
||||
:rules="[{required: true, message: '请输入显示名称'}]"> |
|
||||
<el-input v-model="configForm.configs[placeholder].name" |
|
||||
placeholder="请输入显示名称" /> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<el-form-item label="数据源类型" :prop="`configs.${placeholder}.data_source`" |
|
||||
:rules="[{required: true, message: '请选择数据源类型'}]"> |
|
||||
<el-select v-model="configForm.configs[placeholder].data_source" |
|
||||
@change="onDataSourceChange(placeholder)" |
|
||||
style="width: 100%"> |
|
||||
<el-option label="数据库" value="database"></el-option> |
|
||||
<el-option label="手动填写" value="manual"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
|
|
||||
<!-- 数据库数据源配置 --> |
|
||||
<div v-if="configForm.configs[placeholder]?.data_source === 'database'"> |
|
||||
<el-row :gutter="16"> |
|
||||
<el-col :span="12"> |
|
||||
<el-form-item label="数据表" :prop="`configs.${placeholder}.table_name`" |
|
||||
:rules="[{required: true, message: '请选择数据表'}]"> |
|
||||
<el-select v-model="configForm.configs[placeholder].table_name" |
|
||||
@change="onTableChange(placeholder)" |
|
||||
placeholder="请选择数据表" style="width: 100%"> |
|
||||
<el-option v-for="(tableInfo, tableName) in dataSources" |
|
||||
:key="tableName" |
|
||||
:label="tableInfo.table_alias || tableName" |
|
||||
:value="tableName"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<el-form-item label="字段" :prop="`configs.${placeholder}.field_name`" |
|
||||
:rules="[{required: true, message: '请选择字段'}]"> |
|
||||
<el-select v-model="configForm.configs[placeholder].field_name" |
|
||||
placeholder="请选择字段" style="width: 100%" |
|
||||
:disabled="!configForm.configs[placeholder]?.table_name"> |
|
||||
<el-option v-for="field in getTableFields(configForm.configs[placeholder]?.table_name)" |
|
||||
:key="field.field_name" |
|
||||
:label="field.field_alias || field.field_name" |
|
||||
:value="field.field_name"> |
|
||||
<span>{{ field.field_alias || field.field_name }}</span> |
|
||||
<span class="text-gray-400 text-xs ml-2">({{ field.field_type }})</span> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
|
|
||||
<el-row :gutter="16"> |
|
||||
<el-col :span="8"> |
|
||||
<el-form-item label="处理函数"> |
|
||||
<el-select v-model="configForm.configs[placeholder].process_function" |
|
||||
clearable placeholder="请选择处理函数" style="width: 100%"> |
|
||||
<el-option label="无" value=""></el-option> |
|
||||
<el-option label="格式化日期" value="formatDate"></el-option> |
|
||||
<el-option label="格式化日期时间" value="formatDateTime"></el-option> |
|
||||
<el-option label="格式化数字" value="formatNumber"></el-option> |
|
||||
<el-option label="转大写" value="toUpper"></el-option> |
|
||||
<el-option label="转小写" value="toLower"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="8"> |
|
||||
<el-form-item label="默认值"> |
|
||||
<el-input v-model="configForm.configs[placeholder].default_value" |
|
||||
placeholder="请输入默认值" /> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="8"> |
|
||||
<el-form-item label="是否必填"> |
|
||||
<el-switch v-model="configForm.configs[placeholder].is_required" /> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
|
|
||||
<template #footer v-if="placeholders.length > 0"> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="handleClose">取消</el-button> |
|
||||
<el-button type="primary" @click="saveConfig" :loading="saveLoading"> |
|
||||
{{ saveLoading ? '保存中...' : '保存配置' }} |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { reactive, ref, nextTick } from 'vue' |
|
||||
import { ElMessage, type FormInstance } from 'element-plus' |
|
||||
import { getDocumentTemplateInfo, saveDocumentPlaceholderConfig, getDocumentDataSources } from '@/app/api/document' |
|
||||
|
|
||||
const emit = defineEmits(['complete']) |
|
||||
|
|
||||
// 组件状态 |
|
||||
const visible = ref(false) |
|
||||
const loading = ref(false) |
|
||||
const saveLoading = ref(false) |
|
||||
|
|
||||
// 数据 |
|
||||
const templateInfo = ref({}) |
|
||||
const placeholders = ref([]) |
|
||||
const dataSources = ref({}) |
|
||||
|
|
||||
// 配置表单 |
|
||||
const configForm = reactive({ |
|
||||
template_id: 0, |
|
||||
configs: {} |
|
||||
}) |
|
||||
|
|
||||
// 组件引用 |
|
||||
const configFormRef = ref<FormInstance>() |
|
||||
|
|
||||
// 打开配置对话框 |
|
||||
const open = async (template: any) => { |
|
||||
templateInfo.value = template |
|
||||
configForm.template_id = template.id |
|
||||
visible.value = true |
|
||||
loading.value = true |
|
||||
|
|
||||
try { |
|
||||
// 同时获取模板详情和数据源 |
|
||||
const [templateResult, dataSourceResult] = await Promise.all([ |
|
||||
getDocumentTemplateInfo(template.id), |
|
||||
getDocumentDataSources() |
|
||||
]) |
|
||||
|
|
||||
placeholders.value = templateResult.data.placeholders || [] |
|
||||
dataSources.value = dataSourceResult.data |
|
||||
|
|
||||
// 初始化配置表单 |
|
||||
initConfigForm(templateResult.data.placeholder_config) |
|
||||
} catch (error) { |
|
||||
ElMessage.error('加载数据失败') |
|
||||
console.error(error) |
|
||||
} finally { |
|
||||
loading.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 初始化配置表单 |
|
||||
const initConfigForm = (existingConfig: any) => { |
|
||||
configForm.configs = {} |
|
||||
|
|
||||
placeholders.value.forEach(placeholder => { |
|
||||
// 如果有现有配置，使用现有配置，否则使用默认值 |
|
||||
const existing = existingConfig && existingConfig[placeholder] |
|
||||
|
|
||||
configForm.configs[placeholder] = { |
|
||||
name: existing?.name || placeholder, |
|
||||
data_source: existing?.data_source || 'manual', |
|
||||
table_name: existing?.table_name || '', |
|
||||
field_name: existing?.field_name || '', |
|
||||
process_function: existing?.process_function || '', |
|
||||
default_value: existing?.default_value || '', |
|
||||
is_required: existing?.is_required ?? true |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 数据源类型变化 |
|
||||
const onDataSourceChange = (placeholder: string) => { |
|
||||
if (configForm.configs[placeholder].data_source === 'manual') { |
|
||||
configForm.configs[placeholder].table_name = '' |
|
||||
configForm.configs[placeholder].field_name = '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 数据表变化 |
|
||||
const onTableChange = (placeholder: string) => { |
|
||||
configForm.configs[placeholder].field_name = '' |
|
||||
} |
|
||||
|
|
||||
// 获取表字段 |
|
||||
const getTableFields = (tableName: string) => { |
|
||||
return dataSources.value[tableName]?.fields || [] |
|
||||
} |
|
||||
|
|
||||
// 保存配置 |
|
||||
const saveConfig = async () => { |
|
||||
if (!configFormRef.value) return |
|
||||
|
|
||||
const valid = await configFormRef.value.validate() |
|
||||
if (!valid) return |
|
||||
|
|
||||
saveLoading.value = true |
|
||||
try { |
|
||||
await saveDocumentPlaceholderConfig({ |
|
||||
template_id: configForm.template_id, |
|
||||
placeholder_config: configForm.configs |
|
||||
}) |
|
||||
|
|
||||
ElMessage.success('配置保存成功') |
|
||||
handleClose() |
|
||||
emit('complete') |
|
||||
} catch (error) { |
|
||||
ElMessage.error(error.message || '保存失败') |
|
||||
} finally { |
|
||||
saveLoading.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 关闭对话框 |
|
||||
const handleClose = () => { |
|
||||
visible.value = false |
|
||||
templateInfo.value = {} |
|
||||
placeholders.value = [] |
|
||||
configForm.configs = {} |
|
||||
configForm.template_id = 0 |
|
||||
} |
|
||||
|
|
||||
// 暴露方法给父组件 |
|
||||
defineExpose({ |
|
||||
open |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.dialog-footer { |
|
||||
text-align: right; |
|
||||
} |
|
||||
|
|
||||
.space-y-6 > * + * { |
|
||||
margin-top: 1.5rem; |
|
||||
} |
|
||||
|
|
||||
.space-y-1 > * + * { |
|
||||
margin-top: 0.25rem; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,477 +0,0 @@ |
|||||
<template> |
|
||||
<div class="main-container"> |
|
||||
<el-card class="box-card !border-none" shadow="never"> |
|
||||
<div class="flex justify-between items-center"> |
|
||||
<span class="text-lg">Word模板管理</span> |
|
||||
<div class="space-x-2"> |
|
||||
<el-button type="primary" @click="uploadTemplate"> |
|
||||
<el-icon><Upload /></el-icon> |
|
||||
上传模板 |
|
||||
</el-button> |
|
||||
<el-button type="success" @click="generateDocument"> |
|
||||
<el-icon><Document /></el-icon> |
|
||||
生成文档 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|
||||
<el-form :inline="true" :model="templateTable.searchParam" ref="searchFormRef"> |
|
||||
<el-form-item label="模板名称" prop="contract_name"> |
|
||||
<el-input class="w-[280px]" v-model="templateTable.searchParam.contract_name" clearable placeholder="请输入模板名称" /> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="状态" prop="contract_status"> |
|
||||
<el-select class="w-[280px]" v-model="templateTable.searchParam.contract_status" clearable placeholder="请选择状态"> |
|
||||
<el-option label="全部" value=""></el-option> |
|
||||
<el-option label="草稿" value="draft"></el-option> |
|
||||
<el-option label="启用" value="active"></el-option> |
|
||||
<el-option label="禁用" value="disabled"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="类型" prop="contract_type"> |
|
||||
<el-select class="w-[280px]" v-model="templateTable.searchParam.contract_type" clearable placeholder="请选择类型"> |
|
||||
<el-option label="全部" value=""></el-option> |
|
||||
<el-option label="通用" value="general"></el-option> |
|
||||
<el-option label="课程" value="course"></el-option> |
|
||||
<el-option label="会员" value="membership"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="创建时间" prop="created_at"> |
|
||||
<el-date-picker v-model="templateTable.searchParam.created_at" type="datetimerange" |
|
||||
format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" /> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="loadTemplateList()">搜索</el-button> |
|
||||
<el-button @click="resetForm(searchFormRef)">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
|
|
||||
<div class="mt-[10px]"> |
|
||||
<el-table :data="templateTable.data" size="large" v-loading="templateTable.loading"> |
|
||||
<template #empty> |
|
||||
<span>{{ !templateTable.loading ? '暂无数据' : '' }}</span> |
|
||||
</template> |
|
||||
|
|
||||
<el-table-column prop="contract_name" label="模板名称" min-width="200" :show-overflow-tooltip="true"/> |
|
||||
|
|
||||
<el-table-column label="原始文件名" min-width="180" :show-overflow-tooltip="true"> |
|
||||
<template #default="{ row }"> |
|
||||
<span>{{ row.original_filename || '-' }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="文件大小" min-width="100" align="center"> |
|
||||
<template #default="{ row }"> |
|
||||
<span>{{ row.file_size_formatted || '-' }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="占位符数量" min-width="120" align="center"> |
|
||||
<template #default="{ row }"> |
|
||||
<el-tag type="info" size="small">{{ row.placeholders ? row.placeholders.length : 0 }}</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="状态" min-width="100" align="center"> |
|
||||
<template #default="{ row }"> |
|
||||
<el-tag :type="getStatusType(row.contract_status)" size="small"> |
|
||||
{{ getStatusText(row.contract_status) }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="类型" min-width="100" align="center"> |
|
||||
<template #default="{ row }"> |
|
||||
<el-tag type="primary" size="small" plain> |
|
||||
{{ getTypeText(row.contract_type) }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column prop="created_at" label="创建时间" min-width="160" :show-overflow-tooltip="true"/> |
|
||||
|
|
||||
<el-table-column label="操作" fixed="right" min-width="280"> |
|
||||
<template #default="{ row }"> |
|
||||
<el-button type="primary" link size="small" @click="previewTemplate(row)"> |
|
||||
<el-icon><View /></el-icon> |
|
||||
预览 |
|
||||
</el-button> |
|
||||
<el-button type="warning" link size="small" @click="configPlaceholder(row)" v-if="row.contract_status === 'draft'"> |
|
||||
<el-icon><Setting /></el-icon> |
|
||||
配置 |
|
||||
</el-button> |
|
||||
<el-button type="success" link size="small" @click="generateFromTemplate(row)" v-if="row.contract_status === 'active'"> |
|
||||
<el-icon><Document /></el-icon> |
|
||||
生成 |
|
||||
</el-button> |
|
||||
<el-button type="info" link size="small" @click="copyTemplate(row)"> |
|
||||
<el-icon><CopyDocument /></el-icon> |
|
||||
复制 |
|
||||
</el-button> |
|
||||
<el-button type="danger" link size="small" @click="deleteTemplate(row)"> |
|
||||
<el-icon><Delete /></el-icon> |
|
||||
删除 |
|
||||
</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<div class="mt-[16px] flex justify-end"> |
|
||||
<el-pagination v-model:current-page="templateTable.page" v-model:page-size="templateTable.limit" |
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="templateTable.total" |
|
||||
@size-change="loadTemplateList()" @current-change="loadTemplateList" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 上传模板对话框 --> |
|
||||
<el-dialog v-model="uploadDialog.visible" title="上传Word模板" width="500px" :before-close="closeUploadDialog"> |
|
||||
<el-form :model="uploadDialog.form" label-width="100px" ref="uploadFormRef"> |
|
||||
<el-form-item label="模板名称" prop="template_name" :rules="[{required: true, message: '请输入模板名称'}]"> |
|
||||
<el-input v-model="uploadDialog.form.template_name" placeholder="请输入模板名称" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="模板类型" prop="template_type" :rules="[{required: true, message: '请选择模板类型'}]"> |
|
||||
<el-select v-model="uploadDialog.form.template_type" placeholder="请选择模板类型" style="width: 100%"> |
|
||||
<el-option label="通用" value="general"></el-option> |
|
||||
<el-option label="课程" value="course"></el-option> |
|
||||
<el-option label="会员" value="membership"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="选择文件" prop="file" :rules="[{required: true, message: '请选择Word文件'}]"> |
|
||||
<el-upload |
|
||||
class="upload-demo" |
|
||||
:before-upload="beforeUpload" |
|
||||
:on-change="handleFileChange" |
|
||||
:auto-upload="false" |
|
||||
accept=".doc,.docx" |
|
||||
:show-file-list="true" |
|
||||
:limit="1"> |
|
||||
<el-button type="primary"> |
|
||||
<el-icon><Upload /></el-icon> |
|
||||
选择文件 |
|
||||
</el-button> |
|
||||
<template #tip> |
|
||||
<div class="el-upload__tip"> |
|
||||
只能上传 .doc/.docx 文件，且不超过 10MB |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-upload> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="备注"> |
|
||||
<el-input v-model="uploadDialog.form.remarks" type="textarea" :rows="3" placeholder="请输入备注信息" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="closeUploadDialog">取消</el-button> |
|
||||
<el-button type="primary" @click="submitUpload" :loading="uploadDialog.loading"> |
|
||||
{{ uploadDialog.loading ? '上传中...' : '上传' }} |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
|
|
||||
<!-- 模板预览对话框 --> |
|
||||
<el-dialog v-model="previewDialog.visible" title="模板预览" width="800px"> |
|
||||
<div v-if="previewDialog.loading" class="text-center py-8"> |
|
||||
<el-icon class="is-loading"><Loading /></el-icon> |
|
||||
<span class="ml-2">加载中...</span> |
|
||||
</div> |
|
||||
<div v-else> |
|
||||
<div class="mb-4"> |
|
||||
<h4>占位符列表：</h4> |
|
||||
<div class="flex flex-wrap gap-2 mt-2"> |
|
||||
<el-tag v-for="placeholder in previewDialog.placeholders" :key="placeholder" size="small" type="info"> |
|
||||
{{ placeholder }} |
|
||||
</el-tag> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="border rounded p-4 max-h-96 overflow-y-auto"> |
|
||||
<pre class="whitespace-pre-wrap text-sm">{{ previewDialog.content }}</pre> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
|
|
||||
<!-- 占位符配置组件 --> |
|
||||
<PlaceholderConfig ref="placeholderConfigRef" @complete="loadTemplateList" /> |
|
||||
|
|
||||
<!-- 文档生成组件 --> |
|
||||
<DocumentGenerate ref="documentGenerateRef" @complete="loadTemplateList" /> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { reactive, ref, onMounted } from 'vue' |
|
||||
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus' |
|
||||
import { getDocumentTemplateList, deleteDocumentTemplate, uploadDocumentTemplate, previewDocumentTemplate, copyDocumentTemplate } from '@/app/api/document' |
|
||||
import PlaceholderConfig from './components/PlaceholderConfig.vue' |
|
||||
import DocumentGenerate from './components/DocumentGenerate.vue' |
|
||||
|
|
||||
// 表格数据 |
|
||||
const templateTable = reactive({ |
|
||||
page: 1, |
|
||||
limit: 10, |
|
||||
total: 0, |
|
||||
loading: false, |
|
||||
data: [], |
|
||||
searchParam: { |
|
||||
contract_name: '', |
|
||||
contract_status: '', |
|
||||
contract_type: '', |
|
||||
created_at: [] |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 上传对话框 |
|
||||
const uploadDialog = reactive({ |
|
||||
visible: false, |
|
||||
loading: false, |
|
||||
form: { |
|
||||
template_name: '', |
|
||||
template_type: 'general', |
|
||||
remarks: '', |
|
||||
file: null |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 预览对话框 |
|
||||
const previewDialog = reactive({ |
|
||||
visible: false, |
|
||||
loading: false, |
|
||||
content: '', |
|
||||
placeholders: [] |
|
||||
}) |
|
||||
|
|
||||
// 组件引用 |
|
||||
const searchFormRef = ref<FormInstance>() |
|
||||
const uploadFormRef = ref<FormInstance>() |
|
||||
const placeholderConfigRef = ref() |
|
||||
const documentGenerateRef = ref() |
|
||||
|
|
||||
// 获取模板列表 |
|
||||
const loadTemplateList = async () => { |
|
||||
templateTable.loading = true |
|
||||
try { |
|
||||
const { data } = await getDocumentTemplateList({ |
|
||||
page: templateTable.page, |
|
||||
limit: templateTable.limit, |
|
||||
...templateTable.searchParam |
|
||||
}) |
|
||||
templateTable.data = data.data |
|
||||
templateTable.total = data.total |
|
||||
} catch (error) { |
|
||||
ElMessage.error('获取模板列表失败') |
|
||||
} finally { |
|
||||
templateTable.loading = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 重置搜索表单 |
|
||||
const resetForm = (formEl: FormInstance | undefined) => { |
|
||||
if (!formEl) return |
|
||||
formEl.resetFields() |
|
||||
loadTemplateList() |
|
||||
} |
|
||||
|
|
||||
// 状态类型映射 |
|
||||
const getStatusType = (status: string) => { |
|
||||
const statusMap = { |
|
||||
'draft': 'info', |
|
||||
'active': 'success', |
|
||||
'disabled': 'danger' |
|
||||
} |
|
||||
return statusMap[status] || 'info' |
|
||||
} |
|
||||
|
|
||||
// 状态文本映射 |
|
||||
const getStatusText = (status: string) => { |
|
||||
const statusMap = { |
|
||||
'draft': '草稿', |
|
||||
'active': '启用', |
|
||||
'disabled': '禁用' |
|
||||
} |
|
||||
return statusMap[status] || '未知' |
|
||||
} |
|
||||
|
|
||||
// 类型文本映射 |
|
||||
const getTypeText = (type: string) => { |
|
||||
const typeMap = { |
|
||||
'general': '通用', |
|
||||
'course': '课程', |
|
||||
'membership': '会员' |
|
||||
} |
|
||||
return typeMap[type] || '未知' |
|
||||
} |
|
||||
|
|
||||
// 上传模板 |
|
||||
const uploadTemplate = () => { |
|
||||
uploadDialog.visible = true |
|
||||
uploadDialog.form = { |
|
||||
template_name: '', |
|
||||
template_type: 'general', |
|
||||
remarks: '', |
|
||||
file: null |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 关闭上传对话框 |
|
||||
const closeUploadDialog = () => { |
|
||||
uploadDialog.visible = false |
|
||||
uploadDialog.form = { |
|
||||
template_name: '', |
|
||||
template_type: 'general', |
|
||||
remarks: '', |
|
||||
file: null |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 文件上传前验证 |
|
||||
const beforeUpload = (file: File) => { |
|
||||
const isValidType = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || |
|
||||
file.type === 'application/msword' |
|
||||
const isLt10M = file.size / 1024 / 1024 < 10 |
|
||||
|
|
||||
if (!isValidType) { |
|
||||
ElMessage.error('只能上传 Word 文档!') |
|
||||
return false |
|
||||
} |
|
||||
if (!isLt10M) { |
|
||||
ElMessage.error('文件大小不能超过 10MB!') |
|
||||
return false |
|
||||
} |
|
||||
return false // 阻止自动上传 |
|
||||
} |
|
||||
|
|
||||
// 文件选择变化 |
|
||||
const handleFileChange = (file: any) => { |
|
||||
uploadDialog.form.file = file.raw |
|
||||
// 自动设置模板名称 |
|
||||
if (!uploadDialog.form.template_name) { |
|
||||
const fileName = file.name.replace(/\.[^/.]+$/, '') |
|
||||
uploadDialog.form.template_name = fileName |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 提交上传 |
|
||||
const submitUpload = async () => { |
|
||||
if (!uploadFormRef.value) return |
|
||||
|
|
||||
const valid = await uploadFormRef.value.validate() |
|
||||
if (!valid) return |
|
||||
|
|
||||
if (!uploadDialog.form.file) { |
|
||||
ElMessage.error('请选择要上传的文件') |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
uploadDialog.loading = true |
|
||||
try { |
|
||||
const formData = new FormData() |
|
||||
formData.append('file', uploadDialog.form.file) |
|
||||
formData.append('template_name', uploadDialog.form.template_name) |
|
||||
formData.append('template_type', uploadDialog.form.template_type) |
|
||||
formData.append('remarks', uploadDialog.form.remarks) |
|
||||
|
|
||||
await uploadDocumentTemplate(formData) |
|
||||
ElMessage.success('模板上传成功') |
|
||||
closeUploadDialog() |
|
||||
loadTemplateList() |
|
||||
} catch (error) { |
|
||||
ElMessage.error(error.message || '上传失败') |
|
||||
} finally { |
|
||||
uploadDialog.loading = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 预览模板 |
|
||||
const previewTemplate = async (row: any) => { |
|
||||
previewDialog.visible = true |
|
||||
previewDialog.loading = true |
|
||||
try { |
|
||||
const { data } = await previewDocumentTemplate(row.id) |
|
||||
previewDialog.content = data.content |
|
||||
previewDialog.placeholders = data.placeholders |
|
||||
} catch (error) { |
|
||||
ElMessage.error('预览失败') |
|
||||
} finally { |
|
||||
previewDialog.loading = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 配置占位符 |
|
||||
const configPlaceholder = (row: any) => { |
|
||||
placeholderConfigRef.value?.open(row) |
|
||||
} |
|
||||
|
|
||||
// 生成文档 |
|
||||
const generateDocument = () => { |
|
||||
documentGenerateRef.value?.open() |
|
||||
} |
|
||||
|
|
||||
// 从模板生成文档 |
|
||||
const generateFromTemplate = (row: any) => { |
|
||||
documentGenerateRef.value?.open(row) |
|
||||
} |
|
||||
|
|
||||
// 复制模板 |
|
||||
const copyTemplate = async (row: any) => { |
|
||||
try { |
|
||||
await copyDocumentTemplate(row.id) |
|
||||
ElMessage.success('模板复制成功') |
|
||||
loadTemplateList() |
|
||||
} catch (error) { |
|
||||
ElMessage.error('复制失败') |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 删除模板 |
|
||||
const deleteTemplate = (row: any) => { |
|
||||
ElMessageBox.confirm( |
|
||||
`确定要删除模板 "${row.contract_name}" 吗？此操作不可恢复！`, |
|
||||
'删除确认', |
|
||||
{ |
|
||||
confirmButtonText: '确定', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning' |
|
||||
} |
|
||||
).then(async () => { |
|
||||
try { |
|
||||
await deleteDocumentTemplate(row.id) |
|
||||
ElMessage.success('删除成功') |
|
||||
loadTemplateList() |
|
||||
} catch (error) { |
|
||||
ElMessage.error('删除失败') |
|
||||
} |
|
||||
}).catch(() => { |
|
||||
// 用户取消 |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 页面加载时获取数据 |
|
||||
onMounted(() => { |
|
||||
loadTemplateList() |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.main-container { |
|
||||
padding: 20px; |
|
||||
} |
|
||||
|
|
||||
.table-search-wrap { |
|
||||
background-color: #f8f9fa; |
|
||||
} |
|
||||
|
|
||||
.upload-demo { |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.dialog-footer { |
|
||||
text-align: right; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,305 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog v-model="visible" title="占位符配置" width="1000px" @open="loadConfig"> |
|
||||
<div class="config-container"> |
|
||||
<!-- 说明文档 --> |
|
||||
<el-alert |
|
||||
title="配置说明" |
|
||||
type="info" |
|
||||
:closable="false" |
|
||||
show-icon |
|
||||
> |
|
||||
<template #default> |
|
||||
<p>1. 占位符格式：双大括号包围，例如：学员姓名</p> |
|
||||
<p>2. 请为每个占位符配置对应的数据源表和字段</p> |
|
||||
<p>3. 必填项在生成合同时必须有值，否则会报错</p> |
|
||||
</template> |
|
||||
</el-alert> |
|
||||
|
|
||||
<!-- 配置表格 --> |
|
||||
<el-table :data="configList" v-loading="loading" class="config-table"> |
|
||||
<el-table-column prop="placeholder" label="占位符" width="200"> |
|
||||
<template #default="{ row }"> |
|
||||
<code>{{ `${row.placeholder}` }}</code> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="数据源表" width="150"> |
|
||||
<template #default="{ row, $index }"> |
|
||||
<el-select v-model="row.table_name" placeholder="选择表" @change="onTableChange(row, $index)"> |
|
||||
<el-option |
|
||||
v-for="table in tableOptions" |
|
||||
:key="table.value" |
|
||||
:label="table.label" |
|
||||
:value="table.value" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="字段名" width="150"> |
|
||||
<template #default="{ row, $index }"> |
|
||||
<el-select v-model="row.field_name" placeholder="选择字段"> |
|
||||
<el-option |
|
||||
v-for="field in getFieldOptions(row.table_name)" |
|
||||
:key="field.value" |
|
||||
:label="field.label" |
|
||||
:value="field.value" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="字段类型" width="120"> |
|
||||
<template #default="{ row }"> |
|
||||
<el-select v-model="row.field_type" placeholder="选择类型"> |
|
||||
<el-option label="文本" value="text" /> |
|
||||
<el-option label="数字" value="number" /> |
|
||||
<el-option label="日期" value="date" /> |
|
||||
<el-option label="金额" value="money" /> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="是否必填" width="100"> |
|
||||
<template #default="{ row }"> |
|
||||
<el-switch v-model="row.is_required" :active-value="1" :inactive-value="0" /> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="默认值" width="150"> |
|
||||
<template #default="{ row }"> |
|
||||
<el-input v-model="row.default_value" placeholder="默认值" /> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="操作" width="80"> |
|
||||
<template #default="{ $index }"> |
|
||||
<el-button type="danger" size="small" @click="removeConfig($index)"> |
|
||||
删除 |
|
||||
</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<!-- 添加配置 --> |
|
||||
<div class="add-config"> |
|
||||
<el-button type="primary" @click="addConfig"> |
|
||||
<el-icon><Plus /></el-icon> |
|
||||
添加占位符 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<template #footer> |
|
||||
<el-button @click="visible = false">取消</el-button> |
|
||||
<el-button type="primary" :loading="saving" @click="saveConfig">保存配置</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, reactive, computed, watch, nextTick } from 'vue' |
|
||||
import { ElMessage } from 'element-plus' |
|
||||
import { Plus } from '@element-plus/icons-vue' |
|
||||
import { contractTemplateApi, type PlaceholderConfig } from '@/api/contract' |
|
||||
|
|
||||
interface Props { |
|
||||
modelValue: boolean |
|
||||
contractId: number |
|
||||
} |
|
||||
|
|
||||
interface Emits { |
|
||||
(e: 'update:modelValue', value: boolean): void |
|
||||
(e: 'success'): void |
|
||||
} |
|
||||
|
|
||||
const props = defineProps<Props>() |
|
||||
const emit = defineEmits<Emits>() |
|
||||
|
|
||||
const loading = ref(false) |
|
||||
const saving = ref(false) |
|
||||
const configList = ref<PlaceholderConfig[]>([]) |
|
||||
|
|
||||
const visible = computed({ |
|
||||
get: () => props.modelValue, |
|
||||
set: (value) => emit('update:modelValue', value) |
|
||||
}) |
|
||||
|
|
||||
// 监听弹窗状态变化 |
|
||||
watch(() => props.modelValue, (newVal) => { |
|
||||
if (newVal) { |
|
||||
// 弹窗打开时加载配置 |
|
||||
loadConfig() |
|
||||
} |
|
||||
}, { immediate: false }) |
|
||||
|
|
||||
// 重置表单状态 |
|
||||
const resetForm = () => { |
|
||||
configList.value = [] |
|
||||
loading.value = false |
|
||||
saving.value = false |
|
||||
} |
|
||||
|
|
||||
// 表选项 |
|
||||
const tableOptions = [ |
|
||||
{ label: '学员信息', value: 'school_student' }, |
|
||||
{ label: '人员信息', value: 'school_personnel' }, |
|
||||
{ label: '课程信息', value: 'school_course' }, |
|
||||
{ label: '班级信息', value: 'school_class' } |
|
||||
] |
|
||||
|
|
||||
// 字段选项映射 |
|
||||
const fieldOptionsMap: Record<string, Array<{label: string, value: string}>> = { |
|
||||
school_student: [ |
|
||||
{ label: '学员姓名', value: 'name' }, |
|
||||
{ label: '手机号', value: 'phone' }, |
|
||||
{ label: '身份证号', value: 'id_card' }, |
|
||||
{ label: '年龄', value: 'age' } |
|
||||
], |
|
||||
school_personnel: [ |
|
||||
{ label: '员工姓名', value: 'name' }, |
|
||||
{ label: '工号', value: 'employee_number' }, |
|
||||
{ label: '手机号', value: 'phone' }, |
|
||||
{ label: '邮箱', value: 'email' } |
|
||||
], |
|
||||
school_course: [ |
|
||||
{ label: '课程名称', value: 'course_name' }, |
|
||||
{ label: '课程价格', value: 'price' }, |
|
||||
{ label: '课时数', value: 'class_hours' } |
|
||||
], |
|
||||
school_class: [ |
|
||||
{ label: '班级名称', value: 'class_name' }, |
|
||||
{ label: '开课时间', value: 'start_time' }, |
|
||||
{ label: '结课时间', value: 'end_time' } |
|
||||
] |
|
||||
} |
|
||||
|
|
||||
// 获取字段选项 |
|
||||
const getFieldOptions = (tableName: string) => { |
|
||||
return fieldOptionsMap[tableName] || [] |
|
||||
} |
|
||||
|
|
||||
// 加载配置 |
|
||||
const loadConfig = async () => { |
|
||||
if (!props.contractId) return |
|
||||
|
|
||||
loading.value = true |
|
||||
try { |
|
||||
const { data } = await contractTemplateApi.getPlaceholderConfig(props.contractId) |
|
||||
console.log('API返回数据:', data) |
|
||||
|
|
||||
// 处理API返回的数据格式 |
|
||||
if (data && typeof data === 'object') { |
|
||||
// 如果返回的是合同对象，提取placeholder_config字段 |
|
||||
if (data.placeholder_config) { |
|
||||
configList.value = Array.isArray(data.placeholder_config) ? data.placeholder_config : [] |
|
||||
} |
|
||||
// 如果有placeholders字段，转换为配置格式 |
|
||||
else if (data.placeholders && Array.isArray(data.placeholders)) { |
|
||||
configList.value = data.placeholders.map(placeholder => ({ |
|
||||
placeholder: placeholder, |
|
||||
table_name: '', |
|
||||
field_name: '', |
|
||||
field_type: 'text', |
|
||||
is_required: 0, |
|
||||
default_value: '' |
|
||||
})) |
|
||||
} |
|
||||
// 如果直接是数组 |
|
||||
else if (Array.isArray(data)) { |
|
||||
configList.value = data |
|
||||
} |
|
||||
// 其他情况 |
|
||||
else { |
|
||||
configList.value = [] |
|
||||
} |
|
||||
} else { |
|
||||
configList.value = [] |
|
||||
} |
|
||||
|
|
||||
console.log('处理后的配置列表:', configList.value) |
|
||||
} catch (error) { |
|
||||
console.error('加载配置失败:', error) |
|
||||
ElMessage.error('加载配置失败') |
|
||||
configList.value = [] |
|
||||
} finally { |
|
||||
loading.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 表变化时清空字段 |
|
||||
const onTableChange = (row: PlaceholderConfig, index: number) => { |
|
||||
row.field_name = '' |
|
||||
} |
|
||||
|
|
||||
// 添加配置 |
|
||||
const addConfig = () => { |
|
||||
configList.value.push({ |
|
||||
id: 0, |
|
||||
contract_id: props.contractId, |
|
||||
placeholder: '', |
|
||||
table_name: '', |
|
||||
field_name: '', |
|
||||
field_type: 'text', |
|
||||
is_required: 0, |
|
||||
default_value: '' |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 删除配置 |
|
||||
const removeConfig = (index: number) => { |
|
||||
configList.value.splice(index, 1) |
|
||||
} |
|
||||
|
|
||||
// 保存配置 |
|
||||
const saveConfig = async () => { |
|
||||
// 验证配置 |
|
||||
for (const config of configList.value) { |
|
||||
if (!config.placeholder) { |
|
||||
ElMessage.error('请填写占位符名称') |
|
||||
return |
|
||||
} |
|
||||
if (!config.table_name) { |
|
||||
ElMessage.error('请选择数据源表') |
|
||||
return |
|
||||
} |
|
||||
if (!config.field_name) { |
|
||||
ElMessage.error('请选择字段名') |
|
||||
return |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
saving.value = true |
|
||||
try { |
|
||||
await contractTemplateApi.savePlaceholderConfig(props.contractId, configList.value) |
|
||||
emit('success') |
|
||||
} catch (error) { |
|
||||
ElMessage.error('保存失败') |
|
||||
} finally { |
|
||||
saving.value = false |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.config-container { |
|
||||
max-height: 600px; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
|
|
||||
.config-table { |
|
||||
margin: 20px 0; |
|
||||
} |
|
||||
|
|
||||
.add-config { |
|
||||
text-align: center; |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
|
|
||||
code { |
|
||||
background-color: #f5f7fa; |
|
||||
padding: 2px 4px; |
|
||||
border-radius: 3px; |
|
||||
font-family: 'Courier New', monospace; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,72 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
v-model="visible" |
|
||||
title="占位符配置" |
|
||||
width="800px" |
|
||||
:close-on-click-modal="false" |
|
||||
> |
|
||||
<div> |
|
||||
<p>合同ID: {{ contractId }}</p> |
|
||||
<p>弹窗状态: {{ visible ? '打开' : '关闭' }}</p> |
|
||||
<div v-if="loading">加载中...</div> |
|
||||
<div v-else> |
|
||||
<p>配置数据: {{ JSON.stringify(configData) }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<template #footer> |
|
||||
<el-button @click="visible = false">取消</el-button> |
|
||||
<el-button type="primary" @click="save">保存</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, computed, watch } from 'vue' |
|
||||
import { ElMessage } from 'element-plus' |
|
||||
|
|
||||
interface Props { |
|
||||
modelValue: boolean |
|
||||
contractId: number |
|
||||
} |
|
||||
|
|
||||
const props = defineProps<Props>() |
|
||||
const emit = defineEmits<{ |
|
||||
'update:modelValue': [value: boolean] |
|
||||
'success': [] |
|
||||
}>() |
|
||||
|
|
||||
const loading = ref(false) |
|
||||
const configData = ref<any>({}) |
|
||||
|
|
||||
const visible = computed({ |
|
||||
get: () => props.modelValue, |
|
||||
set: (value) => emit('update:modelValue', value) |
|
||||
}) |
|
||||
|
|
||||
// 监听弹窗打开 |
|
||||
watch(() => props.modelValue, (newVal) => { |
|
||||
if (newVal) { |
|
||||
loadData() |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const loadData = async () => { |
|
||||
loading.value = true |
|
||||
try { |
|
||||
// 模拟API调用 |
|
||||
await new Promise(resolve => setTimeout(resolve, 1000)) |
|
||||
configData.value = { test: '测试数据', contractId: props.contractId } |
|
||||
} catch (error) { |
|
||||
ElMessage.error('加载失败') |
|
||||
} finally { |
|
||||
loading.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const save = () => { |
|
||||
ElMessage.success('保存成功') |
|
||||
emit('success') |
|
||||
visible.value = false |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,175 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog v-model="visible" title="上传合同模板" width="600px" @close="resetForm"> |
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> |
|
||||
<el-form-item label="模板名称" prop="contract_name"> |
|
||||
<el-input v-model="form.contract_name" placeholder="请输入模板名称" /> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="合同类型" prop="contract_type"> |
|
||||
<el-select v-model="form.contract_type" placeholder="请选择合同类型"> |
|
||||
<el-option label="课程合同" value="course" /> |
|
||||
<el-option label="服务合同" value="service" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="模板文件" prop="file"> |
|
||||
<FileUpload |
|
||||
:upload-url="uploadUrl" |
|
||||
@success="handleFileSuccess" |
|
||||
@error="handleFileError" |
|
||||
/> |
|
||||
<div v-if="form.file_path" class="file-info"> |
|
||||
<el-icon><Document /></el-icon> |
|
||||
<span>{{ form.file_name }}</span> |
|
||||
</div> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="备注"> |
|
||||
<el-input v-model="form.remarks" type="textarea" :rows="3" placeholder="请输入备注信息" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
|
|
||||
<template #footer> |
|
||||
<el-button @click="visible = false">取消</el-button> |
|
||||
<el-button type="primary" :loading="loading" @click="submit">确定</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, reactive, computed, watch } from 'vue' |
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus' |
|
||||
import { Document } from '@element-plus/icons-vue' |
|
||||
import { contractTemplateApi } from '@/api/contract' |
|
||||
import FileUpload from '@/components/FileUpload/index.vue' |
|
||||
|
|
||||
interface Props { |
|
||||
modelValue: boolean |
|
||||
} |
|
||||
|
|
||||
interface Emits { |
|
||||
(e: 'update:modelValue', value: boolean): void |
|
||||
(e: 'success'): void |
|
||||
} |
|
||||
|
|
||||
const props = defineProps<Props>() |
|
||||
const emit = defineEmits<Emits>() |
|
||||
|
|
||||
const formRef = ref<FormInstance>() |
|
||||
const loading = ref(false) |
|
||||
|
|
||||
const visible = computed({ |
|
||||
get: () => props.modelValue, |
|
||||
set: (value) => emit('update:modelValue', value) |
|
||||
}) |
|
||||
|
|
||||
const form = reactive({ |
|
||||
contract_name: '', |
|
||||
contract_type: '', |
|
||||
file_path: '', |
|
||||
file_name: '', |
|
||||
remarks: '' |
|
||||
}) |
|
||||
|
|
||||
const rules: FormRules = { |
|
||||
contract_name: [ |
|
||||
{ required: true, message: '请输入模板名称', trigger: 'blur' } |
|
||||
], |
|
||||
contract_type: [ |
|
||||
{ required: true, message: '请选择合同类型', trigger: 'change' } |
|
||||
], |
|
||||
file: [ |
|
||||
{ required: true, message: '请上传模板文件', trigger: 'change' } |
|
||||
] |
|
||||
} |
|
||||
|
|
||||
const uploadUrl = `${import.meta.env.VITE_APP_BASE_URL}document_template/upload` |
|
||||
|
|
||||
// 文件上传成功 |
|
||||
const handleFileSuccess = (data: any) => { |
|
||||
// 文件上传成功后，直接保存模板信息 |
|
||||
form.file_path = data.file_path || data.url |
|
||||
form.file_name = data.file_name || data.original_name |
|
||||
|
|
||||
// 如果上传接口已经返回了完整的模板信息，直接完成 |
|
||||
if (data.id) { |
|
||||
ElMessage.success('模板上传成功') |
|
||||
emit('success') |
|
||||
visible.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 文件上传失败 |
|
||||
const handleFileError = (error: any) => { |
|
||||
console.error('文件上传失败:', error) |
|
||||
ElMessage.error('文件上传失败') |
|
||||
} |
|
||||
|
|
||||
// 提交表单（如果需要额外信息） |
|
||||
const submit = async () => { |
|
||||
if (!formRef.value) return |
|
||||
|
|
||||
try { |
|
||||
await formRef.value.validate() |
|
||||
|
|
||||
if (!form.file_path) { |
|
||||
ElMessage.error('请先上传模板文件') |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
loading.value = true |
|
||||
|
|
||||
// 如果文件已经上传但需要更新模板信息 |
|
||||
const data = { |
|
||||
contract_name: form.contract_name, |
|
||||
contract_type: form.contract_type, |
|
||||
remarks: form.remarks |
|
||||
} |
|
||||
|
|
||||
// 这里可以调用更新模板信息的接口 |
|
||||
// await contractTemplateApi.updateTemplate(templateId, data) |
|
||||
|
|
||||
ElMessage.success('模板信息保存成功') |
|
||||
emit('success') |
|
||||
|
|
||||
} catch (error) { |
|
||||
console.error('提交失败:', error) |
|
||||
ElMessage.error('提交失败') |
|
||||
} finally { |
|
||||
loading.value = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 重置表单 |
|
||||
const resetForm = () => { |
|
||||
Object.assign(form, { |
|
||||
contract_name: '', |
|
||||
contract_type: '', |
|
||||
file_path: '', |
|
||||
file_name: '', |
|
||||
remarks: '' |
|
||||
}) |
|
||||
formRef.value?.resetFields() |
|
||||
} |
|
||||
|
|
||||
// 监听对话框关闭 |
|
||||
watch(visible, (newVal) => { |
|
||||
if (!newVal) { |
|
||||
resetForm() |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.file-info { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 8px; |
|
||||
margin-top: 8px; |
|
||||
padding: 8px; |
|
||||
background-color: #f5f7fa; |
|
||||
border-radius: 4px; |
|
||||
font-size: 14px; |
|
||||
color: #606266; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,37 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
v-model="dialogVisible" |
|
||||
title="测试弹窗" |
|
||||
width="500px" |
|
||||
> |
|
||||
<div> |
|
||||
<p>这是一个测试弹窗</p> |
|
||||
<p>合同ID: {{ contractId }}</p> |
|
||||
</div> |
|
||||
|
|
||||
<template #footer> |
|
||||
<el-button @click="dialogVisible = false">关闭</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, watch } from 'vue' |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
modelValue: Boolean, |
|
||||
contractId: Number |
|
||||
}) |
|
||||
|
|
||||
const emit = defineEmits(['update:modelValue']) |
|
||||
|
|
||||
const dialogVisible = ref(false) |
|
||||
|
|
||||
watch(() => props.modelValue, (val) => { |
|
||||
dialogVisible.value = val |
|
||||
}) |
|
||||
|
|
||||
watch(dialogVisible, (val) => { |
|
||||
emit('update:modelValue', val) |
|
||||
}) |
|
||||
</script> |
|
||||
File diff suppressed because it is too large
Loading…
Reference in new issue