14 changed files with 3137 additions and 102 deletions
@ -0,0 +1,697 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="showDialog" |
||||
|
title="完整合同查看" |
||||
|
width="1200px" |
||||
|
:destroy-on-close="true" |
||||
|
:close-on-click-modal="false" |
||||
|
class="contract-detail-dialog" |
||||
|
> |
||||
|
<div class="contract-detail-content" v-loading="loading"> |
||||
|
<!-- 合同基础信息 --> |
||||
|
<div class="contract-basic-info" v-if="contractData?.contract"> |
||||
|
<h3>{{ contractData.contract.contract_name }}</h3> |
||||
|
<div class="info-grid"> |
||||
|
<div class="info-item"> |
||||
|
<label>合同类型：</label> |
||||
|
<span>{{ contractData.contract.contract_type }}</span> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<label>签署状态：</label> |
||||
|
<el-tag :type="getStatusType(contractData.status)"> |
||||
|
{{ getStatusLabel(contractData.status) }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<label>创建时间：</label> |
||||
|
<span>{{ formatDate(contractData.created_at) }}</span> |
||||
|
</div> |
||||
|
<div class="info-item" v-if="contractData.sign_time"> |
||||
|
<label>签署时间：</label> |
||||
|
<span>{{ formatDate(contractData.sign_time) }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 合同字段表单 --> |
||||
|
<div class="contract-fields" v-if="contractData?.field_configs"> |
||||
|
<h4>合同字段信息</h4> |
||||
|
|
||||
|
<!-- 字段分组：按类型分组显示 --> |
||||
|
<div class="fields-container"> |
||||
|
<!-- 基本信息字段组 --> |
||||
|
<div class="field-group" v-if="basicFields.length > 0"> |
||||
|
<div class="group-header"> |
||||
|
<span class="group-title">基本信息</span> |
||||
|
<el-tag size="small" type="info">{{ basicFields.length }} 项</el-tag> |
||||
|
</div> |
||||
|
<div class="fields-grid"> |
||||
|
<div |
||||
|
v-for="field in basicFields" |
||||
|
:key="field.placeholder" |
||||
|
class="field-card" |
||||
|
> |
||||
|
<div class="field-header"> |
||||
|
<span class="field-name">{{ field.placeholder }}</span> |
||||
|
<div class="field-tags"> |
||||
|
<el-tag size="small" :type="getFieldTypeColor(field.data_type)"> |
||||
|
{{ getFieldTypeLabel(field.data_type) }} |
||||
|
</el-tag> |
||||
|
<el-tag size="small" type="info" v-if="field.sign_party"> |
||||
|
{{ field.sign_party === 'party_a' ? '甲方' : '乙方' }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="field-content"> |
||||
|
<!-- 用户输入字段 --> |
||||
|
<el-input |
||||
|
v-if="field.data_type === 'user_input' && field.is_editable" |
||||
|
v-model="formData[field.placeholder]" |
||||
|
:placeholder="`请输入${field.placeholder}`" |
||||
|
size="small" |
||||
|
/> |
||||
|
<div v-else class="field-display"> |
||||
|
<!-- 数据库字段和系统字段 --> |
||||
|
<span v-if="field.data_type === 'database' || field.data_type === 'system'" class="value-text"> |
||||
|
{{ field.display_value || '未获取' }} |
||||
|
</span> |
||||
|
<!-- 用户输入只读字段 --> |
||||
|
<span v-else-if="field.data_type === 'user_input'" class="value-text"> |
||||
|
{{ field.display_value || '未填写' }} |
||||
|
</span> |
||||
|
<!-- 签名图片字段 --> |
||||
|
<div v-else-if="field.data_type === 'signature' || field.data_type === 'sign_img'" class="signature-display"> |
||||
|
<el-image |
||||
|
v-if="field.display_value" |
||||
|
:src="field.display_value" |
||||
|
style="width: 100px; height: 50px;" |
||||
|
:preview-src-list="[field.display_value]" |
||||
|
fit="contain" |
||||
|
class="signature-image" |
||||
|
/> |
||||
|
<span v-else class="no-signature">未签名</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 日期时间字段组 --> |
||||
|
<div class="field-group" v-if="dateFields.length > 0"> |
||||
|
<div class="group-header"> |
||||
|
<span class="group-title">日期信息</span> |
||||
|
<el-tag size="small" type="info">{{ dateFields.length }} 项</el-tag> |
||||
|
</div> |
||||
|
<div class="fields-grid"> |
||||
|
<div |
||||
|
v-for="field in dateFields" |
||||
|
:key="field.placeholder" |
||||
|
class="field-card" |
||||
|
> |
||||
|
<div class="field-header"> |
||||
|
<span class="field-name">{{ field.placeholder }}</span> |
||||
|
<div class="field-tags"> |
||||
|
<el-tag size="small" :type="getFieldTypeColor(field.data_type)"> |
||||
|
{{ getFieldTypeLabel(field.data_type) }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="field-content"> |
||||
|
<span class="value-text">{{ field.display_value || '未获取' }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 签名相关字段组 --> |
||||
|
<div class="field-group" v-if="signatureFields.length > 0"> |
||||
|
<div class="group-header"> |
||||
|
<span class="group-title">签名信息</span> |
||||
|
<el-tag size="small" type="info">{{ signatureFields.length }} 项</el-tag> |
||||
|
</div> |
||||
|
<div class="fields-grid signature-grid"> |
||||
|
<div |
||||
|
v-for="field in signatureFields" |
||||
|
:key="field.placeholder" |
||||
|
class="field-card signature-card" |
||||
|
> |
||||
|
<div class="field-header"> |
||||
|
<span class="field-name">{{ field.placeholder }}</span> |
||||
|
<div class="field-tags"> |
||||
|
<el-tag size="small" :type="getFieldTypeColor(field.data_type)"> |
||||
|
{{ getFieldTypeLabel(field.data_type) }} |
||||
|
</el-tag> |
||||
|
<el-tag size="small" type="info" v-if="field.sign_party"> |
||||
|
{{ field.sign_party === 'party_a' ? '甲方' : '乙方' }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="field-content"> |
||||
|
<div class="signature-display"> |
||||
|
<el-image |
||||
|
v-if="field.display_value" |
||||
|
:src="field.display_value" |
||||
|
style="width: 120px; height: 60px;" |
||||
|
:preview-src-list="[field.display_value]" |
||||
|
fit="contain" |
||||
|
class="signature-image" |
||||
|
/> |
||||
|
<span v-else class="no-signature">未签名</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 其他字段组 --> |
||||
|
<div class="field-group" v-if="otherFields.length > 0"> |
||||
|
<div class="group-header"> |
||||
|
<span class="group-title">其他信息</span> |
||||
|
<el-tag size="small" type="info">{{ otherFields.length }} 项</el-tag> |
||||
|
</div> |
||||
|
<div class="fields-grid"> |
||||
|
<div |
||||
|
v-for="field in otherFields" |
||||
|
:key="field.placeholder" |
||||
|
class="field-card" |
||||
|
> |
||||
|
<div class="field-header"> |
||||
|
<span class="field-name">{{ field.placeholder }}</span> |
||||
|
<div class="field-tags"> |
||||
|
<el-tag size="small" :type="getFieldTypeColor(field.data_type)"> |
||||
|
{{ getFieldTypeLabel(field.data_type) }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="field-content"> |
||||
|
<el-input |
||||
|
v-if="field.data_type === 'user_input' && field.is_editable" |
||||
|
v-model="formData[field.placeholder]" |
||||
|
:placeholder="`请输入${field.placeholder}`" |
||||
|
size="small" |
||||
|
/> |
||||
|
<span v-else class="value-text">{{ field.display_value || '未填写' }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 合同内容预览 --> |
||||
|
<div class="contract-content-preview" v-if="contractData?.contract?.contract_content"> |
||||
|
<h4>合同内容预览</h4> |
||||
|
<div class="content-display"> |
||||
|
{{ contractData.contract.contract_content }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="showDialog = false">关闭</el-button> |
||||
|
<el-button |
||||
|
v-if="hasEditableFields" |
||||
|
type="primary" |
||||
|
:loading="saving" |
||||
|
@click="handleSaveFields" |
||||
|
> |
||||
|
保存字段 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
v-if="contractData?.status === 1" |
||||
|
type="success" |
||||
|
:loading="generating" |
||||
|
@click="handleGenerateDocument" |
||||
|
> |
||||
|
生成Word文档 |
||||
|
</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref, computed, watch } from 'vue' |
||||
|
import { ElMessage, ElForm } from 'element-plus' |
||||
|
import { updateContractSignStatus } from '@/app/api/contract_sign' |
||||
|
|
||||
|
interface Props { |
||||
|
show: boolean |
||||
|
contractData: any |
||||
|
personnelId: number | string |
||||
|
} |
||||
|
|
||||
|
const props = defineProps<Props>() |
||||
|
const emit = defineEmits(['update:show', 'success']) |
||||
|
|
||||
|
// 响应式数据 |
||||
|
const showDialog = computed({ |
||||
|
get: () => props.show, |
||||
|
set: (value) => emit('update:show', value) |
||||
|
}) |
||||
|
|
||||
|
const loading = ref(false) |
||||
|
const saving = ref(false) |
||||
|
const generating = ref(false) |
||||
|
const formRef = ref<InstanceType<typeof ElForm>>() |
||||
|
const formData = ref<Record<string, any>>({}) |
||||
|
|
||||
|
// 计算属性 |
||||
|
const hasEditableFields = computed(() => { |
||||
|
if (!props.contractData?.field_configs) return false |
||||
|
return props.contractData.field_configs.some((field: any) => field.is_editable) |
||||
|
}) |
||||
|
|
||||
|
// 字段分组计算 |
||||
|
const fieldGroups = computed(() => { |
||||
|
if (!props.contractData?.field_configs) return { |
||||
|
basicFields: [], |
||||
|
dateFields: [], |
||||
|
signatureFields: [], |
||||
|
otherFields: [] |
||||
|
} |
||||
|
|
||||
|
const fields = props.contractData.field_configs |
||||
|
const basicFields: any[] = [] |
||||
|
const dateFields: any[] = [] |
||||
|
const signatureFields: any[] = [] |
||||
|
const otherFields: any[] = [] |
||||
|
|
||||
|
fields.forEach((field: any) => { |
||||
|
// 签名相关字段 |
||||
|
if (field.data_type === 'signature' || field.data_type === 'sign_img') { |
||||
|
signatureFields.push(field) |
||||
|
} |
||||
|
// 日期相关字段 |
||||
|
else if (field.placeholder.includes('年') || field.placeholder.includes('月') || field.placeholder.includes('日') || |
||||
|
field.placeholder.includes('year') || field.placeholder.includes('month') || field.placeholder.includes('day') || |
||||
|
field.placeholder.includes('时间') || field.placeholder.includes('期')) { |
||||
|
dateFields.push(field) |
||||
|
} |
||||
|
// 基本信息字段（姓名、角色、联系方式等） |
||||
|
else if (field.placeholder.includes('姓名') || field.placeholder.includes('乙方') || field.placeholder.includes('甲方') || |
||||
|
field.placeholder.includes('岗位') || field.placeholder.includes('角色') || field.placeholder.includes('电话') || |
||||
|
field.placeholder.includes('地址') || field.placeholder.includes('证件') || field.placeholder.includes('代码')) { |
||||
|
basicFields.push(field) |
||||
|
} |
||||
|
// 其他字段 |
||||
|
else { |
||||
|
otherFields.push(field) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
return { |
||||
|
basicFields, |
||||
|
dateFields, |
||||
|
signatureFields, |
||||
|
otherFields |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const basicFields = computed(() => fieldGroups.value.basicFields) |
||||
|
const dateFields = computed(() => fieldGroups.value.dateFields) |
||||
|
const signatureFields = computed(() => fieldGroups.value.signatureFields) |
||||
|
const otherFields = computed(() => fieldGroups.value.otherFields) |
||||
|
|
||||
|
// 状态配置 |
||||
|
const statusConfig = { |
||||
|
1: { label: '未签署', type: 'warning' }, |
||||
|
2: { label: '已签署', type: 'success' }, |
||||
|
3: { label: '已生效', type: 'primary' }, |
||||
|
4: { label: '已失效', type: 'info' } |
||||
|
} |
||||
|
|
||||
|
// 方法 |
||||
|
const getStatusLabel = (status?: number) => { |
||||
|
if (!status) return '未签署' |
||||
|
return statusConfig[status as keyof typeof statusConfig]?.label || '未知' |
||||
|
} |
||||
|
|
||||
|
const getStatusType = (status?: number) => { |
||||
|
if (!status) return 'warning' |
||||
|
return statusConfig[status as keyof typeof statusConfig]?.type || 'info' |
||||
|
} |
||||
|
|
||||
|
const getFieldTypeLabel = (dataType: string) => { |
||||
|
const labels = { |
||||
|
'user_input': '用户输入', |
||||
|
'database': '数据库', |
||||
|
'system': '系统函数', |
||||
|
'signature': '手写签名', |
||||
|
'sign_img': '签名图片' |
||||
|
} |
||||
|
return labels[dataType as keyof typeof labels] || dataType |
||||
|
} |
||||
|
|
||||
|
const getFieldTypeColor = (dataType: string) => { |
||||
|
const colors = { |
||||
|
'user_input': 'primary', |
||||
|
'database': 'success', |
||||
|
'system': 'info', |
||||
|
'signature': 'warning', |
||||
|
'sign_img': 'warning' |
||||
|
} |
||||
|
return colors[dataType as keyof typeof colors] || 'info' |
||||
|
} |
||||
|
|
||||
|
const formatDate = (dateStr: string) => { |
||||
|
if (!dateStr) return '未设置' |
||||
|
try { |
||||
|
const date = new Date(dateStr) |
||||
|
return date.toLocaleDateString('zh-CN', { |
||||
|
year: 'numeric', |
||||
|
month: '2-digit', |
||||
|
'day': '2-digit', |
||||
|
hour: '2-digit', |
||||
|
minute: '2-digit' |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
return dateStr |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 初始化表单数据 |
||||
|
const initFormData = () => { |
||||
|
if (!props.contractData?.field_configs) return |
||||
|
|
||||
|
formData.value = {} |
||||
|
props.contractData.field_configs.forEach((field: any) => { |
||||
|
if (field.is_editable && field.data_type === 'user_input') { |
||||
|
formData.value[field.placeholder] = field.value || field.default_value || '' |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 保存字段数据 |
||||
|
const handleSaveFields = async () => { |
||||
|
if (!formRef.value) return |
||||
|
|
||||
|
try { |
||||
|
saving.value = true |
||||
|
|
||||
|
// 这里需要调用API保存字段数据到 fill_data |
||||
|
const fillData = { ...props.contractData.fill_data, ...formData.value } |
||||
|
|
||||
|
// TODO: 调用更新fill_data的API |
||||
|
// await updateContractFillData(props.contractData.id, { fill_data: JSON.stringify(fillData) }) |
||||
|
|
||||
|
ElMessage.success('字段保存成功') |
||||
|
emit('success') |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('保存字段失败:', error) |
||||
|
ElMessage.error('保存字段失败') |
||||
|
} finally { |
||||
|
saving.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 生成Word文档 |
||||
|
const handleGenerateDocument = async () => { |
||||
|
try { |
||||
|
generating.value = true |
||||
|
|
||||
|
// TODO: 调用生成Word文档的API |
||||
|
// await generateContractDocument(props.contractData.id) |
||||
|
|
||||
|
ElMessage.success('Word文档生成成功') |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('生成文档失败:', error) |
||||
|
ElMessage.error('生成文档失败') |
||||
|
} finally { |
||||
|
generating.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 监听弹窗显示状态 |
||||
|
watch(() => props.show, (visible) => { |
||||
|
if (visible && props.contractData) { |
||||
|
initFormData() |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.contract-detail-dialog { |
||||
|
:deep(.el-dialog) { |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-dialog__header) { |
||||
|
padding: 20px 24px 16px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
background: #fafafa; |
||||
|
border-radius: 8px 8px 0 0; |
||||
|
|
||||
|
.el-dialog__title { |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
color: #1f2937; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.el-dialog__body) { |
||||
|
padding: 24px; |
||||
|
max-height: 80vh; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-detail-content { |
||||
|
.contract-basic-info { |
||||
|
margin-bottom: 24px; |
||||
|
padding: 20px; |
||||
|
background: #f8f9fa; |
||||
|
border-radius: 8px; |
||||
|
border: 1px solid #e9ecef; |
||||
|
|
||||
|
h3 { |
||||
|
margin: 0 0 16px; |
||||
|
font-size: 18px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.info-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
||||
|
gap: 20px; |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 12px 16px; |
||||
|
background: #fff; |
||||
|
border-radius: 8px; |
||||
|
border: 1px solid #e4e7ed; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: #409eff; |
||||
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
label { |
||||
|
font-weight: 600; |
||||
|
color: #666; |
||||
|
margin-right: 12px; |
||||
|
min-width: 90px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-fields { |
||||
|
margin-bottom: 24px; |
||||
|
|
||||
|
h4 { |
||||
|
margin: 0 0 24px; |
||||
|
font-size: 18px; |
||||
|
color: #333; |
||||
|
padding-bottom: 12px; |
||||
|
border-bottom: 2px solid #e9ecef; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.fields-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 24px; |
||||
|
} |
||||
|
|
||||
|
.field-group { |
||||
|
background: #fafbfc; |
||||
|
border-radius: 12px; |
||||
|
padding: 20px; |
||||
|
border: 1px solid #e9ecef; |
||||
|
|
||||
|
.group-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 16px; |
||||
|
padding-bottom: 12px; |
||||
|
border-bottom: 1px solid #e9ecef; |
||||
|
|
||||
|
.group-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fields-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
||||
|
gap: 16px; |
||||
|
|
||||
|
// 签名网格特殊布局 |
||||
|
&.signature-grid { |
||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.field-card { |
||||
|
background: #fff; |
||||
|
border-radius: 8px; |
||||
|
padding: 16px; |
||||
|
border: 1px solid #e4e7ed; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: #409eff; |
||||
|
box-shadow: 0 4px 8px rgba(64, 158, 255, 0.1); |
||||
|
transform: translateY(-2px); |
||||
|
} |
||||
|
|
||||
|
&.signature-card { |
||||
|
min-height: 120px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.field-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
.field-name { |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
flex: 1; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.field-tags { |
||||
|
display: flex; |
||||
|
gap: 4px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.field-content { |
||||
|
.field-display { |
||||
|
.value-text { |
||||
|
display: block; |
||||
|
padding: 8px 12px; |
||||
|
background: #f8f9fa; |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 6px; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
min-height: 20px; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
|
||||
|
.signature-display { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.signature-image { |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 6px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.no-signature { |
||||
|
color: #999; |
||||
|
font-style: italic; |
||||
|
padding: 16px 24px; |
||||
|
background: #f8f9fa; |
||||
|
border: 1px dashed #d9d9d9; |
||||
|
border-radius: 6px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.value-text { |
||||
|
display: block; |
||||
|
padding: 8px 12px; |
||||
|
background: #f8f9fa; |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 6px; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
min-height: 20px; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-input) { |
||||
|
.el-input__wrapper { |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-content-preview { |
||||
|
h4 { |
||||
|
margin: 0 0 16px; |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 2px solid #e9ecef; |
||||
|
} |
||||
|
|
||||
|
.content-display { |
||||
|
padding: 20px; |
||||
|
background: #fff; |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 8px; |
||||
|
max-height: 300px; |
||||
|
overflow-y: auto; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.6; |
||||
|
color: #666; |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
.el-button { |
||||
|
padding: 10px 24px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
border-radius: 6px; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,765 @@ |
|||||
|
<template> |
||||
|
<div class="contract-sign-tab"> |
||||
|
<div class="contracts-wrapper"> |
||||
|
<!-- 左侧：筛选区域和合同列表 --> |
||||
|
<div class="contracts-sidebar"> |
||||
|
<!-- 头部筛选区域 --> |
||||
|
<div class="filter-section"> |
||||
|
<div class="filter-header"> |
||||
|
<h4>合同状态筛选</h4> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
:loading="refreshing" |
||||
|
@click="refreshData" |
||||
|
> |
||||
|
刷新 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<el-radio-group v-model="activeStatus" size="small" @change="handleStatusChange"> |
||||
|
<el-radio-button :label="null">全部</el-radio-button> |
||||
|
<el-radio-button :label="1">未签署</el-radio-button> |
||||
|
<el-radio-button :label="2">已签署</el-radio-button> |
||||
|
<el-radio-button :label="3">已生效</el-radio-button> |
||||
|
<el-radio-button :label="4">已失效</el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 合同列表 --> |
||||
|
<div class="contract-list" v-loading="loading"> |
||||
|
<div |
||||
|
v-for="contract in filteredContracts" |
||||
|
:key="contract.id" |
||||
|
class="contract-item" |
||||
|
:class="{ 'active': selectedContract?.id === contract.id }" |
||||
|
@click="selectContract(contract)" |
||||
|
> |
||||
|
<div class="contract-header"> |
||||
|
<div class="contract-title"> |
||||
|
{{ contract.contract_name }} |
||||
|
<el-tag v-if="contract.personnel_name" type="info" size="small" class="personnel-tag"> |
||||
|
{{ contract.personnel_name }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
<div class="contract-status"> |
||||
|
<el-tag |
||||
|
:type="getStatusType(contract.sign_status)" |
||||
|
size="small" |
||||
|
> |
||||
|
{{ getStatusLabel(contract.sign_status) }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="contract-meta"> |
||||
|
<span class="contract-type">{{ contract.contract_type }}</span> |
||||
|
<span class="contract-date">{{ formatDate(contract.created_at) }}</span> |
||||
|
<span v-if="contract.file_size" class="file-size"> |
||||
|
{{ formatFileSize(contract.file_size) }} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="contract.remarks" class="contract-remarks"> |
||||
|
{{ contract.remarks }} |
||||
|
</div> |
||||
|
|
||||
|
<div class="contract-actions" v-if="contract.sign_status === 1"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
@click.stop="handleSignContract(contract)" |
||||
|
> |
||||
|
签署合同 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="filteredContracts.length === 0" class="empty-state"> |
||||
|
<el-empty description="暂无合同数据" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 右侧：合同详情区域 --> |
||||
|
<div class="contract-detail" v-if="selectedContract"> |
||||
|
<div class="detail-header"> |
||||
|
<h3>{{ selectedContract.contract_name }}</h3> |
||||
|
<div class="detail-actions"> |
||||
|
<el-button @click="viewFullContract">查看完整合同</el-button> |
||||
|
<el-button |
||||
|
v-if="selectedContract.sign_status === 1" |
||||
|
type="primary" |
||||
|
@click="handleSignContract(selectedContract)" |
||||
|
> |
||||
|
签署合同 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="detail-content"> |
||||
|
<div class="contract-info"> |
||||
|
<el-descriptions :column="2" border> |
||||
|
<el-descriptions-item label="合同名称"> |
||||
|
{{ selectedContract.contract_name }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="合同类型"> |
||||
|
<el-tag :type="selectedContract.contract_type === '内部' ? 'success' : 'primary'" size="small"> |
||||
|
{{ selectedContract.contract_type }} |
||||
|
</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="签署状态"> |
||||
|
<el-tag :type="getStatusType(selectedContract.sign_status)"> |
||||
|
{{ getStatusLabel(selectedContract.sign_status) }} |
||||
|
</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="员工姓名" v-if="selectedContract.personnel_name"> |
||||
|
<el-tag type="info" size="small"> |
||||
|
{{ selectedContract.personnel_name }} |
||||
|
</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="创建时间"> |
||||
|
{{ formatDate(selectedContract.created_at) }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="签署时间" v-if="selectedContract.sign_time"> |
||||
|
{{ formatDate(selectedContract.sign_time) }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="文件大小" v-if="selectedContract.file_size"> |
||||
|
{{ formatFileSize(selectedContract.file_size) }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="原始文件名" v-if="selectedContract.original_filename"> |
||||
|
{{ selectedContract.original_filename }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="签名图片" v-if="selectedContract.signature_image"> |
||||
|
<el-image |
||||
|
:src="selectedContract.signature_image" |
||||
|
style="width: 80px; height: 40px;" |
||||
|
:preview-src-list="[selectedContract.signature_image]" |
||||
|
fit="contain" |
||||
|
/> |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="selectedContract.remarks" class="contract-remarks-detail"> |
||||
|
<h4>合同备注</h4> |
||||
|
<div class="remarks-content">{{ selectedContract.remarks }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="contract-preview" v-if="selectedContract.contract_content"> |
||||
|
<div class="preview-header"> |
||||
|
<h4>合同内容预览</h4> |
||||
|
</div> |
||||
|
<div class="content-preview"> |
||||
|
{{ getContractPreview(selectedContract.contract_content) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 合同签署弹窗 --> |
||||
|
<ContractSignDialog |
||||
|
v-model:show="showSignDialog" |
||||
|
:contract-data="currentSignContract" |
||||
|
:personnel-id="personnelId" |
||||
|
@success="handleSignSuccess" |
||||
|
/> |
||||
|
|
||||
|
<!-- 合同详情弹窗 --> |
||||
|
<ContractDetailDialog |
||||
|
v-model:show="showContractDetailDialogFlag" |
||||
|
:contract-data="contractDetailData" |
||||
|
:personnel-id="personnelId" |
||||
|
@success="handleSignSuccess" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref, computed, onMounted, watch } from 'vue' |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
import { getContractSignList, getContractSignInfo } from '@/app/api/contract_sign' |
||||
|
import ContractSignDialog from './ContractSignDialog.vue' |
||||
|
import ContractDetailDialog from './ContractDetailDialog.vue' |
||||
|
|
||||
|
interface Props { |
||||
|
personnelId: number | string |
||||
|
} |
||||
|
|
||||
|
interface ContractItem { |
||||
|
id: number |
||||
|
contract_name: string |
||||
|
contract_type: string |
||||
|
contract_status: string |
||||
|
created_at: string |
||||
|
sign_status?: number |
||||
|
sign_time?: string |
||||
|
signature_image?: string |
||||
|
source_type?: string |
||||
|
contract_content?: string |
||||
|
} |
||||
|
|
||||
|
const props = defineProps<Props>() |
||||
|
const emit = defineEmits(['refresh']) |
||||
|
|
||||
|
// 响应式数据 |
||||
|
const loading = ref(false) |
||||
|
const refreshing = ref(false) |
||||
|
const contractList = ref<ContractItem[]>([]) |
||||
|
const selectedContract = ref<ContractItem | null>(null) |
||||
|
const activeStatus = ref<number | null>(null) |
||||
|
const showSignDialog = ref(false) |
||||
|
const currentSignContract = ref<ContractItem | null>(null) |
||||
|
const showContractDetailDialogFlag = ref(false) |
||||
|
const contractDetailData = ref<any>(null) |
||||
|
|
||||
|
// 状态配置 |
||||
|
const statusConfig = { |
||||
|
1: { label: '未签署', type: 'warning' }, |
||||
|
2: { label: '已签署', type: 'success' }, |
||||
|
3: { label: '已生效', type: 'primary' }, |
||||
|
4: { label: '已失效', type: 'info' } |
||||
|
} |
||||
|
|
||||
|
const sourceTypeConfig = { |
||||
|
manual: '手动分发', |
||||
|
auto_course: '自动课程分发' |
||||
|
} |
||||
|
|
||||
|
// 计算属性 |
||||
|
const filteredContracts = computed(() => { |
||||
|
if (activeStatus.value === null) { |
||||
|
return contractList.value |
||||
|
} |
||||
|
return contractList.value.filter(contract => { |
||||
|
// 没有签署记录的算作未签署 |
||||
|
const status = contract.sign_status || 1 |
||||
|
return status === activeStatus.value |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// 格式化日期 |
||||
|
const formatDate = (dateStr: string) => { |
||||
|
if (!dateStr) return '未设置' |
||||
|
try { |
||||
|
const date = new Date(dateStr) |
||||
|
return date.toLocaleDateString('zh-CN', { |
||||
|
year: 'numeric', |
||||
|
month: '2-digit', |
||||
|
'day': '2-digit' |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
return dateStr |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 格式化文件大小 |
||||
|
const formatFileSize = (size: number) => { |
||||
|
if (!size || size === 0) return '' |
||||
|
const units = ['B', 'KB', 'MB', 'GB'] |
||||
|
let fileSize = size |
||||
|
let unitIndex = 0 |
||||
|
|
||||
|
while (fileSize >= 1024 && unitIndex < units.length - 1) { |
||||
|
fileSize /= 1024 |
||||
|
unitIndex++ |
||||
|
} |
||||
|
|
||||
|
return `${fileSize.toFixed(1)} ${units[unitIndex]}` |
||||
|
} |
||||
|
|
||||
|
// 方法 |
||||
|
const getStatusLabel = (status?: number) => { |
||||
|
if (!status) return '未签署' |
||||
|
return statusConfig[status as keyof typeof statusConfig]?.label || '未知' |
||||
|
} |
||||
|
|
||||
|
const getStatusType = (status?: number) => { |
||||
|
if (!status) return 'warning' |
||||
|
return statusConfig[status as keyof typeof statusConfig]?.type || 'info' |
||||
|
} |
||||
|
|
||||
|
const getSourceTypeLabel = (sourceType: string) => { |
||||
|
return sourceTypeConfig[sourceType as keyof typeof sourceTypeConfig] || sourceType |
||||
|
} |
||||
|
|
||||
|
const getContractPreview = (content: string) => { |
||||
|
if (!content) return '' |
||||
|
// 完整显示合同内容 |
||||
|
return content |
||||
|
} |
||||
|
|
||||
|
const loadContractList = async () => { |
||||
|
if (!props.personnelId) return |
||||
|
|
||||
|
loading.value = true |
||||
|
try { |
||||
|
const params = { |
||||
|
personnel_id: props.personnelId, |
||||
|
page: 1, |
||||
|
limit: 100 |
||||
|
} |
||||
|
|
||||
|
const response = await getContractSignList(params) |
||||
|
console.log('API响应数据:', response) // 调试日志 |
||||
|
|
||||
|
// 处理分页格式数据结构 |
||||
|
let dataList = [] |
||||
|
if (response.data && response.data.data && Array.isArray(response.data.data)) { |
||||
|
// 分页格式：{data: {data: [], total: 100}} |
||||
|
dataList = response.data.data |
||||
|
} else { |
||||
|
console.warn('未找到有效的数组数据，原始响应:', response) |
||||
|
dataList = [] |
||||
|
} |
||||
|
|
||||
|
if (dataList.length > 0) { |
||||
|
contractList.value = dataList.map((item: any) => ({ |
||||
|
id: item.id, // 这是合同签署记录的ID |
||||
|
contract_id: item.contract_id, |
||||
|
personnel_id: props.personnelId, |
||||
|
// 直接使用模型关联绑定返回的字段 |
||||
|
contract_name: item.contract_id_name || '未知合同', |
||||
|
contract_type: item.contract_type || '外部', |
||||
|
contract_status: item.contract_status || 'active', |
||||
|
created_at: item.created_at, |
||||
|
sign_status: item.status, |
||||
|
sign_time: item.sign_time, |
||||
|
signature_image: item.signature_image, |
||||
|
source_type: item.source_type, |
||||
|
contract_content: item.contract_content || '', |
||||
|
remarks: item.remarks || '', |
||||
|
original_filename: item.original_filename || '', |
||||
|
file_size: item.file_size || 0, |
||||
|
// 关联的员工信息 |
||||
|
personnel_name: item.personnel_id_name || '' |
||||
|
})) |
||||
|
} else { |
||||
|
contractList.value = [] |
||||
|
} |
||||
|
|
||||
|
console.log('处理后的合同列表:', contractList.value) // 调试日志 |
||||
|
} catch (error) { |
||||
|
console.error('获取合同列表失败:', error) |
||||
|
ElMessage.error('获取合同列表失败') |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const refreshData = async () => { |
||||
|
refreshing.value = true |
||||
|
await loadContractList() |
||||
|
refreshing.value = false |
||||
|
ElMessage.success('数据已刷新') |
||||
|
} |
||||
|
|
||||
|
const handleStatusChange = () => { |
||||
|
// 状态改变时，清空选中状态 |
||||
|
selectedContract.value = null |
||||
|
} |
||||
|
|
||||
|
const selectContract = (contract: ContractItem) => { |
||||
|
selectedContract.value = contract |
||||
|
} |
||||
|
|
||||
|
const viewFullContract = async () => { |
||||
|
console.log('=== viewFullContract 开始 ===') |
||||
|
console.log('选中的合同:', selectedContract.value) |
||||
|
|
||||
|
if (!selectedContract.value) return |
||||
|
|
||||
|
try { |
||||
|
// 找到对应的合同签署记录ID |
||||
|
const contractSignRecord = contractList.value.find( |
||||
|
item => item.contract_id === selectedContract.value?.contract_id |
||||
|
) |
||||
|
|
||||
|
if (!contractSignRecord?.id) { |
||||
|
// 如果没有签署记录，使用合同ID创建一个临时的查看 |
||||
|
console.log('没有签署记录，显示临时合同详情') |
||||
|
showContractDetailDialog(selectedContract.value) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 调用API获取完整的合同信息 |
||||
|
const response = await getContractSignInfo(contractSignRecord.id) |
||||
|
|
||||
|
if (response.data) { |
||||
|
console.log('获取到完整合同信息，显示详情弹窗') |
||||
|
showContractDetailDialog(response.data) |
||||
|
} else { |
||||
|
ElMessage.error('获取合同详情失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('查看完整合同失败:', error) |
||||
|
ElMessage.error('查看完整合同失败') |
||||
|
} |
||||
|
console.log('=== viewFullContract 结束 ===') |
||||
|
} |
||||
|
|
||||
|
const handleSignContract = (contract: ContractItem) => { |
||||
|
// 防止意外调用 |
||||
|
if (!contract) { |
||||
|
ElMessage.warning('请选择合同') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
console.log('=== handleSignContract 开始 ===') |
||||
|
console.log('传入的合同数据:', contract) |
||||
|
|
||||
|
currentSignContract.value = contract |
||||
|
console.log('currentSignContract 已设置:', currentSignContract.value) |
||||
|
|
||||
|
// 确保另一个弹窗是关闭的 |
||||
|
showContractDetailDialogFlag.value = false |
||||
|
console.log('已关闭详情弹窗') |
||||
|
|
||||
|
showSignDialog.value = true |
||||
|
console.log('showSignDialog 已设置为:', showSignDialog.value) |
||||
|
console.log('=== handleSignContract 结束 ===') |
||||
|
} |
||||
|
|
||||
|
const handleSignSuccess = () => { |
||||
|
// 签署成功后刷新数据 |
||||
|
loadContractList() |
||||
|
showSignDialog.value = false |
||||
|
currentSignContract.value = null |
||||
|
emit('refresh') |
||||
|
} |
||||
|
|
||||
|
const showContractDetailDialog = (data: any) => { |
||||
|
contractDetailData.value = data |
||||
|
showContractDetailDialogFlag.value = true |
||||
|
} |
||||
|
|
||||
|
const copyContractContent = async () => { |
||||
|
if (!selectedContract.value?.contract_content) return |
||||
|
|
||||
|
try { |
||||
|
// 使用 Clipboard API 复制内容 |
||||
|
await navigator.clipboard.writeText(selectedContract.value.contract_content) |
||||
|
ElMessage.success('合同内容已复制到剪贴板') |
||||
|
} catch (error) { |
||||
|
// 降级方案：使用传统的复制方法 |
||||
|
const textArea = document.createElement('textarea') |
||||
|
textArea.value = selectedContract.value.contract_content |
||||
|
textArea.style.position = 'fixed' |
||||
|
textArea.style.opacity = '0' |
||||
|
document.body.appendChild(textArea) |
||||
|
textArea.focus() |
||||
|
textArea.select() |
||||
|
|
||||
|
try { |
||||
|
document.execCommand('copy') |
||||
|
ElMessage.success('合同内容已复制到剪贴板') |
||||
|
} catch (err) { |
||||
|
ElMessage.error('复制失败，请手动选择复制') |
||||
|
} |
||||
|
|
||||
|
document.body.removeChild(textArea) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 监听人员ID变化 |
||||
|
watch(() => props.personnelId, (newId) => { |
||||
|
if (newId) { |
||||
|
loadContractList() |
||||
|
} |
||||
|
}, { immediate: true }) |
||||
|
|
||||
|
// 生命周期 - 移除重复调用 |
||||
|
onMounted(() => { |
||||
|
// 不再在这里调用，因为watch已经有immediate: true |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.contract-sign-tab { |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
.contracts-wrapper { |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.contracts-sidebar { |
||||
|
flex: 0 0 400px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: calc(100vh - 300px); |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 8px; |
||||
|
background: #fff; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.filter-section { |
||||
|
padding: 16px; |
||||
|
background: #fafbfc; |
||||
|
border-bottom: 1px solid #e9ecef; |
||||
|
} |
||||
|
|
||||
|
.filter-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
h4 { |
||||
|
margin: 0; |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.filter-section .el-radio-group { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.contract-list { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
background: #fff; |
||||
|
|
||||
|
.contract-item { |
||||
|
padding: 16px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #f8f9fa; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
background: #e3f2fd; |
||||
|
border-color: #2196f3; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 8px; |
||||
|
|
||||
|
.contract-title { |
||||
|
flex: 1; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.4; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-meta { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8px; |
||||
|
|
||||
|
.contract-type { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
background: #f5f5f5; |
||||
|
padding: 2px 6px; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.contract-date { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-actions { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.empty-state { |
||||
|
padding: 40px 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.personnel-tag { |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.file-size { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
background: #f0f0f0; |
||||
|
padding: 2px 6px; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.contract-remarks { |
||||
|
margin-top: 8px; |
||||
|
padding: 8px; |
||||
|
background: #f8f9fa; |
||||
|
border-radius: 4px; |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
line-height: 1.4; |
||||
|
border-left: 3px solid #e9ecef; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-detail { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
height: calc(100vh - 300px); |
||||
|
overflow-y: auto; |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 8px; |
||||
|
background: #fff; |
||||
|
|
||||
|
.detail-header { |
||||
|
padding: 20px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
h3 { |
||||
|
margin: 0; |
||||
|
font-size: 18px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.detail-actions { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-content { |
||||
|
padding: 20px; |
||||
|
|
||||
|
.contract-info { |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.contract-preview { |
||||
|
.preview-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
h4 { |
||||
|
margin: 0; |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.preview-actions { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content-preview { |
||||
|
padding: 20px; |
||||
|
background: #f8f9fa; |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 6px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.8; |
||||
|
color: #333; |
||||
|
white-space: pre-wrap; |
||||
|
word-wrap: break-word; |
||||
|
min-height: 400px; |
||||
|
max-height: 70vh; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
// 美化滚动条样式 |
||||
|
&::-webkit-scrollbar { |
||||
|
width: 8px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-track { |
||||
|
background: #f1f1f1; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
background: #c1c1c1; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #a8a8a8; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 美化下划线样式，使其更明显 |
||||
|
:deep(＿) { |
||||
|
color: #1890ff; |
||||
|
font-weight: 500; |
||||
|
background: #e6f7ff; |
||||
|
padding: 0 2px; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-remarks-detail { |
||||
|
margin-bottom: 24px; |
||||
|
|
||||
|
h4 { |
||||
|
margin: 0 0 12px; |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.remarks-content { |
||||
|
padding: 12px 16px; |
||||
|
background: #f8f9fa; |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 6px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.6; |
||||
|
color: #666; |
||||
|
white-space: pre-wrap; |
||||
|
border-left: 4px solid #007bff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 美化滚动条 |
||||
|
.contract-list, |
||||
|
.contract-detail { |
||||
|
&::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-track { |
||||
|
background: #f1f1f1; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
background: #c1c1c1; |
||||
|
border-radius: 3px; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #a8a8a8; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue