zhouhaibin
2 months ago
23 changed files with 2235 additions and 280 deletions
@ -0,0 +1,57 @@ |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { ID, IDS, commonExport } from '@/api/base'; |
|||
import { ContractualInfoVO, ContractualInfoForm, ContractualInfoQuery } from './model'; |
|||
|
|||
/** |
|||
* 查询合同信息保存列表 |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export function ContractualInfoList(params?: ContractualInfoQuery) { |
|||
return defHttp.get<ContractualInfoVO[]>({ url: '/productManagement/ContractualInfo/list', params }); |
|||
} |
|||
|
|||
/** |
|||
* 导出合同信息保存列表 |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export function ContractualInfoExport(params?: ContractualInfoQuery) { |
|||
return commonExport('/productManagement/ContractualInfo/export', params ?? {}); |
|||
} |
|||
|
|||
/** |
|||
* 查询合同信息保存详细 |
|||
* @param id id |
|||
* @returns |
|||
*/ |
|||
export function ContractualInfoInfo(id: ID) { |
|||
return defHttp.get<ContractualInfoVO>({ url: '/productManagement/ContractualInfo/' + id }); |
|||
} |
|||
|
|||
/** |
|||
* 新增合同信息保存 |
|||
* @param data |
|||
* @returns |
|||
*/ |
|||
export function ContractualInfoAdd(data: ContractualInfoForm) { |
|||
return defHttp.postWithMsg<void>({ url: '/productManagement/ContractualInfo', data }); |
|||
} |
|||
|
|||
/** |
|||
* 更新合同信息保存 |
|||
* @param data |
|||
* @returns |
|||
*/ |
|||
export function ContractualInfoUpdate(data: ContractualInfoForm) { |
|||
return defHttp.putWithMsg<void>({ url: '/productManagement/ContractualInfo', data }); |
|||
} |
|||
|
|||
/** |
|||
* 删除合同信息保存 |
|||
* @param id id |
|||
* @returns |
|||
*/ |
|||
export function ContractualInfoRemove(id: ID | IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: '/productManagement/ContractualInfo/' + id },); |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
import { BaseEntity, PageQuery } from '@/api/base'; |
|||
|
|||
export interface ContractualInfoVO { |
|||
/** |
|||
* 合同名称 |
|||
*/ |
|||
fileName: string; |
|||
|
|||
/** |
|||
* 采购人名称 |
|||
*/ |
|||
purchaserName: string; |
|||
|
|||
/** |
|||
* 供应商名称或姓名 |
|||
*/ |
|||
supplierName: string; |
|||
|
|||
/** |
|||
* 合同签订时间 |
|||
*/ |
|||
signDate: string; |
|||
|
|||
/** |
|||
* 合同金额 |
|||
*/ |
|||
contractAmount: string; |
|||
|
|||
} |
|||
|
|||
export interface ContractualInfoForm extends BaseEntity { |
|||
/** |
|||
* 合同名称 |
|||
*/ |
|||
fileName?: string; |
|||
|
|||
/** |
|||
* 采购人名称 |
|||
*/ |
|||
purchaserName?: string; |
|||
|
|||
/** |
|||
* 供应商名称或姓名 |
|||
*/ |
|||
supplierName?: string; |
|||
|
|||
/** |
|||
* 合同签订时间 |
|||
*/ |
|||
signDate?: string; |
|||
|
|||
/** |
|||
* 合同金额 |
|||
*/ |
|||
contractAmount?: string; |
|||
|
|||
} |
|||
|
|||
export interface ContractualInfoQuery extends PageQuery { |
|||
|
|||
/** |
|||
* 合同名称 |
|||
*/ |
|||
fileName?: string; |
|||
|
|||
/** |
|||
* 采购人名称 |
|||
*/ |
|||
purchaserName?: string; |
|||
|
|||
/** |
|||
* 供应商名称或姓名 |
|||
*/ |
|||
supplierName?: string; |
|||
|
|||
/** |
|||
* 合同签订时间 |
|||
*/ |
|||
signDate?: string; |
|||
|
|||
/** |
|||
* 合同金额 |
|||
*/ |
|||
contractAmount?: string; |
|||
|
|||
/** |
|||
* 日期范围参数 |
|||
*/ |
|||
params?: any; |
|||
} |
|||
@ -0,0 +1,103 @@ |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { ID, IDS, commonExport } from '@/api/base'; |
|||
import { JyjcontractualTaskBatchVO, JyjcontractualTaskBatchForm, JyjcontractualTaskBatchQuery } from './model'; |
|||
|
|||
/** |
|||
* 查询合同批处理记录列表 |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export function JyjcontractualTaskBatchList(params?: JyjcontractualTaskBatchQuery) { |
|||
return defHttp.get<JyjcontractualTaskBatchVO[]>({ url: '/productManagement/JyjcontractualTaskBatch/list', params }); |
|||
} |
|||
|
|||
/** |
|||
* 导出合同批处理记录列表 |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export function JyjcontractualTaskBatchExport(params?: JyjcontractualTaskBatchQuery) { |
|||
return commonExport('/productManagement/JyjcontractualTaskBatch/export', params ?? {}); |
|||
} |
|||
|
|||
/** |
|||
* 查询合同批处理记录详细 |
|||
* @param id id |
|||
* @returns |
|||
*/ |
|||
export function JyjcontractualTaskBatchInfo(id: ID) { |
|||
return defHttp.get<JyjcontractualTaskBatchVO>({ url: '/productManagement/JyjcontractualTaskBatch/' + id }); |
|||
} |
|||
|
|||
/** |
|||
* 新增合同批处理记录 |
|||
* @param data |
|||
* @returns |
|||
*/ |
|||
export function JyjcontractualTaskBatchAdd(data: JyjcontractualTaskBatchForm) { |
|||
return defHttp.postWithMsg<void>({ url: '/productManagement/JyjcontractualTaskBatch', data ,timeout:1000 * 60 * 10}); |
|||
} |
|||
|
|||
/** |
|||
* 更新合同批处理记录 |
|||
* @param data |
|||
* @returns |
|||
*/ |
|||
export function JyjcontractualTaskBatchUpdate(data: JyjcontractualTaskBatchForm) { |
|||
return defHttp.putWithMsg<void>({ url: '/productManagement/JyjcontractualTaskBatch', data }); |
|||
} |
|||
|
|||
/** |
|||
* 删除合同批处理记录 |
|||
* @param id id |
|||
* @returns |
|||
*/ |
|||
export function JyjcontractualTaskBatchRemove(id: ID | IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: '/productManagement/JyjcontractualTaskBatch/' + id },); |
|||
} |
|||
|
|||
import { UploadFileParams } from '#/axios'; |
|||
import { AxiosProgressEvent } from 'axios'; |
|||
|
|||
/** |
|||
* @description: Upload interface |
|||
*/ |
|||
export function uploadContractual( |
|||
params: UploadFileParams, |
|||
onUploadProgress?: (progressEvent: AxiosProgressEvent) => void, |
|||
) { |
|||
return defHttp.uploadFile<any>( |
|||
{ |
|||
// 固定url地址
|
|||
url: '/productManagement/JyjcontractualTaskBatch/back/upload', |
|||
onUploadProgress, |
|||
timeout: 1000 * 60 * 10, |
|||
}, |
|||
params, |
|||
); |
|||
} |
|||
/** |
|||
* 根据id获取合同的审查结果 |
|||
* @param id id |
|||
* @returns |
|||
*/ |
|||
export function getContractualResultById(id: ID) { |
|||
return defHttp.get({ url: '/productManagement/JyjcontractualTaskBatch/getContractulResultById/' + id }); |
|||
} |
|||
/** |
|||
* 获取PDF文件流 |
|||
* @param fileName - PDF文件名 |
|||
* @returns Blob 数据 |
|||
*/ |
|||
export function getPdfFile(id:Number) { |
|||
return defHttp.get( |
|||
{ |
|||
url: `/productManagement/JyjcontractualTaskBatch/getContractulPdf/${id}`, |
|||
responseType: 'blob', |
|||
headers: { |
|||
Accept: 'application/pdf', |
|||
} |
|||
}, |
|||
{ isReturnNativeResponse: true } |
|||
); |
|||
} |
|||
@ -0,0 +1,160 @@ |
|||
import { BaseEntity, PageQuery } from '@/api/base'; |
|||
|
|||
export interface JyjcontractualTaskBatchVO { |
|||
/** |
|||
* 任务名称 |
|||
*/ |
|||
taskName: string; |
|||
|
|||
/** |
|||
* 任务类型 |
|||
*/ |
|||
taskType: string; |
|||
|
|||
/** |
|||
* 文档名称 |
|||
*/ |
|||
documentName: string; |
|||
|
|||
/** |
|||
* OSS文件ID |
|||
*/ |
|||
ossId: string | number; |
|||
|
|||
/** |
|||
* 进度状态 |
|||
*/ |
|||
progressStatus: string; |
|||
|
|||
/** |
|||
* 列队任务id |
|||
*/ |
|||
groupId: string | number; |
|||
|
|||
/** |
|||
* 合同总数 |
|||
*/ |
|||
totalContracts: number; |
|||
|
|||
/** |
|||
* 已审批总数 |
|||
*/ |
|||
approvedCount: number; |
|||
|
|||
/** |
|||
* 审核通过数量 |
|||
*/ |
|||
passCount: number; |
|||
|
|||
/** |
|||
* 审核不通过数量 |
|||
*/ |
|||
rejectCount: number; |
|||
|
|||
/** |
|||
* 非审查范围数量 |
|||
*/ |
|||
irrelevantCount: number; |
|||
|
|||
/** |
|||
* 进度(百分比) |
|||
*/ |
|||
progress: number; |
|||
|
|||
} |
|||
|
|||
export interface JyjcontractualTaskBatchForm extends BaseEntity { |
|||
/** |
|||
* 任务名称 |
|||
*/ |
|||
taskName?: string; |
|||
|
|||
/** |
|||
* 任务类型 |
|||
*/ |
|||
taskType?: string; |
|||
|
|||
/** |
|||
* 文档名称 |
|||
*/ |
|||
documentName?: string; |
|||
|
|||
/** |
|||
* OSS文件ID |
|||
*/ |
|||
ossId?: string | number; |
|||
|
|||
/** |
|||
* 进度状态 |
|||
*/ |
|||
progressStatus?: string; |
|||
|
|||
} |
|||
|
|||
export interface JyjcontractualTaskBatchQuery extends PageQuery { |
|||
|
|||
/** |
|||
* 任务名称 |
|||
*/ |
|||
taskName?: string; |
|||
|
|||
/** |
|||
* 任务类型 |
|||
*/ |
|||
taskType?: string; |
|||
|
|||
/** |
|||
* 文档名称 |
|||
*/ |
|||
documentName?: string; |
|||
|
|||
/** |
|||
* OSS文件ID |
|||
*/ |
|||
ossId?: string | number; |
|||
|
|||
/** |
|||
* 进度状态 |
|||
*/ |
|||
progressStatus?: string; |
|||
|
|||
/** |
|||
* 列队任务id |
|||
*/ |
|||
groupId?: string | number; |
|||
|
|||
/** |
|||
* 合同总数 |
|||
*/ |
|||
totalContracts?: number; |
|||
|
|||
/** |
|||
* 已审批总数 |
|||
*/ |
|||
approvedCount?: number; |
|||
|
|||
/** |
|||
* 审核通过数量 |
|||
*/ |
|||
passCount?: number; |
|||
|
|||
/** |
|||
* 审核不通过数量 |
|||
*/ |
|||
rejectCount?: number; |
|||
|
|||
/** |
|||
* 非审查范围数量 |
|||
*/ |
|||
irrelevantCount?: number; |
|||
|
|||
/** |
|||
* 进度(百分比) |
|||
*/ |
|||
progress?: number; |
|||
|
|||
/** |
|||
* 日期范围参数 |
|||
*/ |
|||
params?: any; |
|||
} |
|||
@ -0,0 +1,85 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
label: '合同名称', |
|||
field: 'fileName', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '采购人名称', |
|||
field: 'purchaserName', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '供应商名称或姓名', |
|||
field: 'supplierName', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '合同签订时间', |
|||
field: 'signDate', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '合同金额', |
|||
field: 'contractAmount', |
|||
component: 'Input', |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '合同名称', |
|||
dataIndex: 'fileName', |
|||
}, |
|||
{ |
|||
title: '采购人名称', |
|||
dataIndex: 'purchaserName', |
|||
}, |
|||
{ |
|||
title: '供应商名称或姓名', |
|||
dataIndex: 'supplierName', |
|||
}, |
|||
{ |
|||
title: '合同签订时间', |
|||
dataIndex: 'signDate', |
|||
}, |
|||
{ |
|||
title: '合同金额', |
|||
dataIndex: 'contractAmount', |
|||
}, |
|||
]; |
|||
|
|||
export const modalSchemas: FormSchema[] = [ |
|||
{ |
|||
label: '合同名称', |
|||
field: 'fileName', |
|||
required: true, |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '采购人名称', |
|||
field: 'purchaserName', |
|||
required: true, |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '供应商名称或姓名', |
|||
field: 'supplierName', |
|||
required: true, |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '合同签订时间', |
|||
field: 'signDate', |
|||
required: true, |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '合同金额', |
|||
field: 'contractAmount', |
|||
required: true, |
|||
component: 'Input', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" |
|||
:title="title" |
|||
@register="registerInnerModal" |
|||
@ok="handleSubmit" |
|||
@cancel="resetForm" |
|||
> |
|||
<BasicForm @register="registerForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { BasicModal, useModalInner } from '@/components/Modal'; |
|||
import { BasicForm, useForm } from '@/components/Form'; |
|||
import { computed, ref, unref } from 'vue'; |
|||
import { ContractualInfoInfo, ContractualInfoAdd, ContractualInfoUpdate } from '@/api/contractReview/ContractualInfo'; |
|||
import { modalSchemas } from './ContractualInfo.data'; |
|||
|
|||
defineOptions({ name: 'ContractualInfoModal' }); |
|||
|
|||
const emit = defineEmits(['register', 'reload']); |
|||
|
|||
const isUpdate = ref<boolean>(false); |
|||
const title = computed<string>(() => { |
|||
return isUpdate.value ? '编辑合同信息保存' : '新增合同信息保存'; |
|||
}); |
|||
|
|||
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner( |
|||
async (data: { record?: Recordable; update: boolean }) => { |
|||
modalLoading(true); |
|||
const { record, update } = data; |
|||
isUpdate.value = update; |
|||
if (update && record) { |
|||
const ret = await ContractualInfoInfo(record.id); |
|||
await setFieldsValue(ret); |
|||
} |
|||
modalLoading(false); |
|||
}, |
|||
); |
|||
|
|||
const [registerForm, { setFieldsValue, resetForm, validate }] = useForm({ |
|||
labelWidth: 100, |
|||
showActionButtonGroup: false, |
|||
baseColProps: { span: 24 }, |
|||
schemas: modalSchemas, |
|||
}); |
|||
|
|||
async function handleSubmit() { |
|||
try { |
|||
modalLoading(true); |
|||
const data = await validate(); |
|||
if (unref(isUpdate)) { |
|||
await ContractualInfoUpdate(data); |
|||
} else { |
|||
await ContractualInfoAdd(data); |
|||
} |
|||
emit('reload'); |
|||
closeModal(); |
|||
await resetForm(); |
|||
} catch (e) { |
|||
} finally { |
|||
modalLoading(false); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button |
|||
@click="downloadExcel(ContractualInfoExport, '合同信息保存数据', getForm().getFieldsValue())" |
|||
v-auth="'productManagement:ContractualInfo:export'" |
|||
>导出</a-button |
|||
> |
|||
<a-button |
|||
type="primary" |
|||
danger |
|||
@click="multipleRemove(ContractualInfoRemove)" |
|||
:disabled="!selected" |
|||
v-auth="'productManagement:ContractualInfo:remove'" |
|||
>删除</a-button |
|||
> |
|||
<a-button |
|||
type="primary" |
|||
@click="handleAdd" |
|||
v-auth="'productManagement:ContractualInfo:add'" |
|||
>新增</a-button |
|||
> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'action'"> |
|||
<TableAction |
|||
stopButtonPropagation |
|||
:actions="[ |
|||
{ |
|||
label: '修改', |
|||
icon: IconEnum.EDIT, |
|||
type: 'primary', |
|||
ghost: true, |
|||
auth: 'productManagement:ContractualInfo:edit', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
icon: IconEnum.DELETE, |
|||
type: 'primary', |
|||
danger: true, |
|||
ghost: true, |
|||
auth: 'productManagement:ContractualInfo:remove', |
|||
popConfirm: { |
|||
placement: 'left', |
|||
title: '是否删除合同信息保存[' + record.id + ']?', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<ContractualInfoModal @register="registerModal" @reload="reload" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable, TableAction } from '@/components/Table'; |
|||
import { ContractualInfoList, ContractualInfoExport, ContractualInfoRemove } from '@/api/contractReview/ContractualInfo'; |
|||
import { downloadExcel } from '@/utils/file/download'; |
|||
import { useModal } from '@/components/Modal'; |
|||
import ContractualInfoModal from './ContractualInfoModal.vue'; |
|||
import { formSchemas, columns } from './ContractualInfo.data'; |
|||
import { IconEnum } from '@/enums/appEnum'; |
|||
|
|||
defineOptions({ name: 'ContractualInfo' }); |
|||
|
|||
const [registerTable, { reload, multipleRemove, selected, getForm }] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '合同信息保存列表', |
|||
api: ContractualInfoList, |
|||
showIndexColumn: false, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
const [registerModal, { openModal }] = useModal(); |
|||
|
|||
function handleEdit(record: Recordable) { |
|||
openModal(true, { record, update: true }); |
|||
} |
|||
|
|||
function handleAdd() { |
|||
openModal(true, { update: false }); |
|||
} |
|||
|
|||
async function handleDelete(record: Recordable) { |
|||
await ContractualInfoRemove([record.id]); |
|||
await reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,264 @@ |
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" |
|||
title="title" |
|||
:canFullscreen="true" |
|||
:defaultFullscreen="true" |
|||
:showOkBtn="false" |
|||
@register="registerInnerModal" |
|||
> |
|||
<div class="grid grid-cols-5 gap-4"> |
|||
<div class="col-span-3"> |
|||
<!-- <CanvasEditor |
|||
ref="canvasEditor" |
|||
:parentContent="parentContent" |
|||
:view="view" |
|||
@save-content="handleSaveCanvasEditorContent" |
|||
/> --> |
|||
<PdfViewer :id="currentId" :key="pdfViewerkey" v-if="currentId!=0"/> |
|||
</div> |
|||
<div class="col-span-2"> |
|||
<!-- 添加 col-span-2 和高度样式 --> |
|||
<div class="tabs-container"> |
|||
<Tabs v-model:activeKey="activeKey" type="card"> |
|||
<TabPane key="1" tab="审查结果"> |
|||
<div class="scroll-container"> |
|||
<div class="card-container"> |
|||
<Card |
|||
v-for="(item, index) in cardList" |
|||
:key="index" |
|||
:class="['custom-card', { 'card-selected': selectedCard === item.title }]" |
|||
@click="handleCardClick(item.title)" |
|||
> |
|||
<template #title>{{ item.title }}</template> |
|||
{{ item.text }} |
|||
{{ item.content }} |
|||
</Card> |
|||
</div> |
|||
</div> |
|||
</TabPane> |
|||
<!-- <TabPane key="2" tab="Tab 2">Content of Tab Pane 2</TabPane> |
|||
<TabPane key="3" tab="Tab 3">Content of Tab Pane 3</TabPane> --> |
|||
</Tabs> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</BasicModal> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, reactive } from 'vue'; |
|||
import { BasicModal, useModalInner } from '@/components/Modal'; |
|||
|
|||
import { Tabs, TabPane, Card } from 'ant-design-vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
import CanvasEditor from '@/views/CanvasEditor/index.vue'; |
|||
import { getContractualResultById } from '@/api/contractReview/JyjcontractualTaskBatch'; |
|||
import PdfViewer from "./PdfViewer.vue" |
|||
const activeKey = ref('1'); |
|||
const currentId = ref<any>(0); |
|||
const pdfViewerkey = ref(0); |
|||
// 卡片数据 |
|||
const cardList = ref<any>([]); |
|||
const selectedCard = ref(''); // 用于存储当前选中的卡片标题 |
|||
const handleCardClick = (title) => { |
|||
selectedCard.value = title; |
|||
console.log('点击的卡片标题:', title); |
|||
}; |
|||
|
|||
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner( |
|||
async (data: { record?: Recordable }) => { |
|||
modalLoading(true); |
|||
cardList.value=[] |
|||
const { record } = data; |
|||
const res = await getContractualResultById(record.id); |
|||
pdfViewerkey.value+=1 |
|||
currentId.value=record.id |
|||
for (const item of res.results) { |
|||
for (const content of item.contentList) { |
|||
cardList.value.push({ |
|||
title: content.problemTitle, |
|||
text: content.text, |
|||
content: content.problemDesc, |
|||
isPosition: content.isPosition, |
|||
accord: item.accord, |
|||
}); |
|||
} |
|||
} |
|||
modalLoading(false); |
|||
}, |
|||
); |
|||
|
|||
// 存放父组件传递的数据 |
|||
let parentContent = reactive<any>(undefined); |
|||
// 存放子组件数据 |
|||
const content = ref<any>(undefined); |
|||
// 标识符 |
|||
const view = ref<string | undefined>(undefined); |
|||
|
|||
// 初始化数据 |
|||
onMounted(() => { |
|||
console.log('模拟父组件向后端请求数据, 传递给子组件'); |
|||
getEditorContent(); |
|||
view.value = 'parent'; |
|||
}); |
|||
|
|||
// 模拟后端获取数据的方法 |
|||
const getEditorContent = () => { |
|||
parentContent = { |
|||
header: [ |
|||
{ |
|||
value: '', |
|||
size: 12, |
|||
bold: false, |
|||
color: 'rgb(33, 53, 71)', |
|||
italic: false, |
|||
}, |
|||
], |
|||
main: [ |
|||
{ |
|||
value: |
|||
'父类传递的数据 通过后端获取!\n甲方：企查查科技股份有限公司\n法定代表人：陈德强\n住所：苏州工业园区科创东区东石泾港路2号润港产业园6号楼10层1001室11', |
|||
size: 10, |
|||
bold: false, |
|||
}, |
|||
], |
|||
}; |
|||
}; |
|||
|
|||
// 组件引用 |
|||
const canvasEditor = ref<InstanceType<typeof CanvasEditor> | null>(null); |
|||
|
|||
// 保存内容方法 |
|||
const handleSaveContent = () => { |
|||
// 访问子组件的方法 |
|||
(canvasEditor.value as any).saveContent(); |
|||
}; |
|||
|
|||
// 处理子组件传递的数据 |
|||
const handleSaveCanvasEditorContent = (data: any) => { |
|||
console.log('从子组件接收到的数据:', data); |
|||
// 将data数据转换为 json 格式的数据, 方便入库处理 |
|||
content.value = JSON.stringify(data); |
|||
console.log('转换后的数据 content 为: ', content.value); |
|||
}; |
|||
|
|||
const router = useRouter(); |
|||
// 状态定义 |
|||
const loading = ref(false); |
|||
const handleMenuClick = ({ key }) => { |
|||
console.log(key); |
|||
router.push({ path: key }); |
|||
}; |
|||
// 获取任务列表 |
|||
const fetchTaskList = async () => {}; |
|||
|
|||
// 页面加载时获取数据 |
|||
onMounted(() => { |
|||
fetchTaskList(); |
|||
}); |
|||
setTimeout(() => { |
|||
loading.value = false; |
|||
}, 1500); |
|||
</script> |
|||
<style scoped> |
|||
/* Tabs 相关样式 */ |
|||
/* 设置未选中标签的基本样式 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) { |
|||
color: rgba(0, 0, 0, 0.85) !important; /* 文字颜色为黑色，带透明度 */ |
|||
background: #fff; /* 背景色为白色 */ |
|||
border: 1px solid #f0f0f0; /* 浅灰色边框 */ |
|||
} |
|||
|
|||
/* 设置选中标签的样式 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) { |
|||
color: #ffffff !important; /* 文字颜色为白色 */ |
|||
background: #1890ff !important; /* 背景色为蓝色 */ |
|||
border-color: #1890ff !important; /* 边框颜色也改为蓝色 */ |
|||
} |
|||
|
|||
/* 确保选中标签的文字颜色为白色 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn) { |
|||
color: #ffffff !important; /* 文字颜色强制设为白色 */ |
|||
} |
|||
|
|||
/* 鼠标悬停时的文字颜色效果 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-btn) { |
|||
color: #1890ff !important; /* 悬停时文字变为蓝色 */ |
|||
} |
|||
|
|||
/* Card 相关样式 */ |
|||
/* 卡片容器布局设置 */ |
|||
.card-container { |
|||
display: flex; |
|||
gap: 16px; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 单个卡片的基本样式 */ |
|||
.custom-card { |
|||
width: 100%; |
|||
margin-bottom: 16px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
background-color: #fff; /* 添加默认背景色 */ |
|||
border: 1px solid #e8e8e8; /* 添加默认边框 */ |
|||
} |
|||
|
|||
/* 卡片选中状态 */ |
|||
.custom-card.card-selected { |
|||
background-color: #e6f4ff !important; /* 选中时的淡蓝色背景 */ |
|||
border: 1px solid #1890ff !important; /* 选中时的蓝色边框 */ |
|||
} |
|||
|
|||
/* 卡片悬停效果 */ |
|||
.custom-card:hover { |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|||
transform: translateY(-2px); |
|||
} |
|||
|
|||
/* 选中状态下的悬停效果 */ |
|||
.custom-card.card-selected:hover { |
|||
background-color: #e6f4ff !important; |
|||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1); |
|||
} |
|||
|
|||
/* 卡片点击效果 */ |
|||
.custom-card:active { |
|||
transform: translateY(0); |
|||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 修改卡片内容区域的内边距 */ |
|||
:deep(.ant-card-body) { |
|||
padding: 16px; |
|||
} |
|||
|
|||
/* 滚动容器样式 */ |
|||
.scroll-container { |
|||
height: calc(100vh - 25vh); /* 可以根据实际需要调整高度 */ |
|||
overflow-y: auto; /* 添加垂直滚动条 */ |
|||
padding: 16px; |
|||
} |
|||
|
|||
/* 美化滚动条样式（可选） */ |
|||
.scroll-container::-webkit-scrollbar { |
|||
width: 6px; /* 滚动条宽度 */ |
|||
} |
|||
|
|||
.scroll-container::-webkit-scrollbar-thumb { |
|||
background-color: #ccc; /* 滚动条颜色 */ |
|||
border-radius: 3px; /* 滚动条圆角 */ |
|||
} |
|||
|
|||
.scroll-container::-webkit-scrollbar-track { |
|||
background-color: #f1f1f1; /* 滚动条轨道颜色 */ |
|||
} |
|||
|
|||
/* 保持原有的卡片容器样式 */ |
|||
.card-container { |
|||
display: flex; |
|||
gap: 16px; |
|||
flex-wrap: wrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,208 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar v-if="props.showAdd"> |
|||
<a-button |
|||
type="primary" |
|||
@click="handleAdd" |
|||
v-auth="'productManagement:ContractualTasks:add'" |
|||
>新增</a-button |
|||
> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'action'"> |
|||
<TableAction |
|||
stopButtonPropagation |
|||
:actions="[ |
|||
{ |
|||
label: '详情', |
|||
icon: IconEnum.EDIT, |
|||
type: 'primary', |
|||
ghost: true, |
|||
ifShow: () => { |
|||
if ( |
|||
record.progressStatus != 'PENDING' && |
|||
record.progressStatus != 'STARTED' && |
|||
record.progressStatus != 'REVOKED' |
|||
) { |
|||
return true; |
|||
} else { |
|||
return false; |
|||
} |
|||
}, |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
// { |
|||
// label: '下载', |
|||
// icon: IconEnum.DOWNLOAD, |
|||
// type: 'primary', |
|||
// color: 'success', |
|||
// ghost: true, |
|||
// ifShow: () => { |
|||
// if ( |
|||
// record.progressStatus != 'PENDING' && |
|||
// record.progressStatus != 'STARTED' && |
|||
// record.progressStatus != 'REVOKED' |
|||
// ) { |
|||
// return true; |
|||
// } else { |
|||
// return false; |
|||
// } |
|||
// }, |
|||
// onClick: handleDownload.bind(null, record), |
|||
// }, |
|||
// { |
|||
// label: '下载', |
|||
// icon: IconEnum.DOWNLOAD, |
|||
// type: 'primary', |
|||
// color: 'success', |
|||
// ghost: true, |
|||
// ifShow: () => { |
|||
// if ( |
|||
// record.progressStatus != 'PENDING' && |
|||
// record.progressStatus != 'STARTED' && |
|||
// record.progressStatus != 'REVOKED' |
|||
// ) { |
|||
// return true; |
|||
// } else { |
|||
// return false; |
|||
// } |
|||
// }, |
|||
// onClick: handleDownload.bind(null, record), |
|||
// }, |
|||
{ |
|||
label: '终止任务', |
|||
icon: IconEnum.DELETE, |
|||
type: 'primary', |
|||
danger: true, |
|||
ghost: true, |
|||
ifShow: () => { |
|||
if (record.progressStatus == 'PENDING') { |
|||
return true; |
|||
} else { |
|||
return false; |
|||
} |
|||
}, |
|||
popConfirm: { |
|||
placement: 'left', |
|||
title: '是否终止当前任务?', |
|||
confirm: handleStop.bind(null, record), |
|||
}, |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<ContractualTasksModal @register="registerModal" @reload="reload" /> |
|||
<ContractualShowModal @register="registerShowModal" /> |
|||
<DocsDrawer @register="registerDrawer" /> |
|||
|
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable, TableAction } from '@/components/Table'; |
|||
|
|||
import { useModal } from '@/components/Modal'; |
|||
import ContractualTasksModal from './ContractualTasksModal.vue'; |
|||
import DocsDrawer from '@/views/documentReview/DocumentTasks/DocsDrawer.vue'; |
|||
|
|||
import { formSchemas, columns } from './ContractualTasks.data'; |
|||
import { IconEnum } from '@/enums/appEnum'; |
|||
import ContractualShowModal from '@/views/contractReview/ContractualTasks/ContractualShowModal.vue'; |
|||
import { DocumentTasksStop } from '@/api/documentReview/DocumentTasks'; |
|||
import { ContractualTasksList } from '@/api/contractReview/ContractualTasks'; |
|||
import { |
|||
DocumentTaskResultsInfoByTaskId, |
|||
DocumentTaskResultDownload, |
|||
} from '@/api/documentReview/DocumentTaskResults'; |
|||
import { onMounted } from 'vue'; |
|||
import { useDrawer } from '@/components/Drawer'; |
|||
|
|||
// 组件初始化时判断 batchName 是否存在 |
|||
onMounted(() => { |
|||
console.log('onMountedonMountedonMounted'); |
|||
const { setFieldsValue, updateSchema } = getForm(); |
|||
if (props.batchName) { |
|||
setFieldsValue({ batchName: props.batchName }); |
|||
updateSchema({ field: 'batchName', dynamicDisabled: true }); |
|||
} |
|||
if (props.resultType) { |
|||
if (props.resultType == '审查失败文件') { |
|||
setFieldsValue({ progressStatus: 'FAILURE', groupId: props.groupId }); |
|||
updateSchema([ |
|||
{ field: 'progressStatus', dynamicDisabled: true }, |
|||
{ field: 'resultType', dynamicDisabled: true }, |
|||
]); |
|||
} else { |
|||
setFieldsValue({ resultType: props.resultType, groupId: props.groupId }); |
|||
updateSchema({ field: 'resultType', dynamicDisabled: true }); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
const [registerShowModal, { openModal: openShowModal }] = useModal(); |
|||
const [registerDrawer, { openDrawer }] = useDrawer(); |
|||
|
|||
defineOptions({ name: 'ContractualTasks' }); |
|||
let props = defineProps(['showAdd', 'groupId', 'batchName', 'resultType']); |
|||
|
|||
const [registerTable, { reload, multipleRemove, selected, getForm }] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '合同任务列表', |
|||
api: ContractualTasksList, |
|||
showIndexColumn: false, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
const [registerModal, { openModal }] = useModal(); |
|||
|
|||
async function handleDetail(record: Recordable) { |
|||
if(record.progressStatus=="FAILURE"){ |
|||
let res = await DocumentTaskResultsInfoByTaskId(record.id); |
|||
openDrawer(true, { value: res.result, type: 'markdown' }); |
|||
}else{ |
|||
openShowModal(true, {record }); |
|||
|
|||
} |
|||
|
|||
//根据record.id查询结果详情 |
|||
} |
|||
|
|||
async function handleStop(record: Recordable) { |
|||
await DocumentTasksStop(record.id); |
|||
await reload(); |
|||
} |
|||
|
|||
function handleAdd() { |
|||
openModal(true, { update: false }); |
|||
} |
|||
|
|||
async function handleDownload(record: Recordable) { |
|||
await DocumentTaskResultDownload([record.id]); |
|||
await reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<div class="pdf-container"> |
|||
<vue-office-docx |
|||
:src="pdfUrl" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, nextTick } from 'vue'; |
|||
//引入VueOfficeDocx组件 |
|||
import VueOfficeDocx from '@vue-office/pdf' |
|||
//引入相关样式 |
|||
import { message } from 'ant-design-vue'; |
|||
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue'; |
|||
import { getPdfFile } from '@/api/contractReview/JyjcontractualTaskBatch'; |
|||
|
|||
// Props 定义 |
|||
interface Props { |
|||
id: string; |
|||
} |
|||
const props = defineProps<Props>(); |
|||
|
|||
const pdfUrl = ref<string>(''); |
|||
const currentPage = ref(1); |
|||
const pageCount = ref(0); |
|||
const documentLoaded = ref(false); |
|||
const scale = ref(1.5); // 初始缩放比例 |
|||
|
|||
|
|||
// 适应宽度 |
|||
const fitToWidth = () => { |
|||
const pdfContainer = document.querySelector('.pdf-wrapper'); |
|||
if (pdfContainer) { |
|||
const containerWidth = pdfContainer.clientWidth; |
|||
const pdfCanvas = document.querySelector('.vue3-pdf canvas') as HTMLCanvasElement; |
|||
if (pdfCanvas) { |
|||
const originalWidth = pdfCanvas.width / scale.value; |
|||
scale.value = +(containerWidth / originalWidth * 0.95).toFixed(1); // 95% 的容器宽度 |
|||
} |
|||
} |
|||
}; |
|||
|
|||
// 加载 PDF |
|||
const loadPdf = async () => { |
|||
try { |
|||
if(props.id==0){ |
|||
pdfUrl.value=''; |
|||
return; |
|||
} |
|||
console.log('PDF加载成功1:', pdfUrl.value); |
|||
|
|||
const response = await getPdfFile(props.id); |
|||
if (response?.data) { |
|||
console.log('PDF加载成功2:', pdfUrl.value); |
|||
|
|||
const blob = new Blob([response.data], { type: 'application/pdf' }); |
|||
pdfUrl.value = URL.createObjectURL(blob); |
|||
console.log('PDF加载成功3:', pdfUrl.value); |
|||
// PDF 加载完成后自动适应宽度 |
|||
nextTick(() => { |
|||
setTimeout(fitToWidth, 500); |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('PDF加载失败:', error); |
|||
} |
|||
}; |
|||
|
|||
const handleError = (error: Error) => { |
|||
message.error('PDF显示出错：' + error.message); |
|||
}; |
|||
|
|||
|
|||
onMounted(() => { |
|||
loadPdf(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pdf-container { |
|||
width: 100%; |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #f0f2f5; |
|||
} |
|||
|
|||
.pdf-wrapper { |
|||
flex: 1; |
|||
overflow: auto; |
|||
padding: 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
background: #f0f2f5; |
|||
} |
|||
|
|||
.loading { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100%; |
|||
font-size: 16px; |
|||
color: #666; |
|||
} |
|||
|
|||
.pdf-controls { |
|||
padding: 16px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #fff; |
|||
border-top: 1px solid #f0f0f0; |
|||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
:deep(.vue3-pdf) { |
|||
background: white; |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|||
padding: 20px; |
|||
} |
|||
|
|||
:deep(.vue3-pdf canvas) { |
|||
max-width: 100%; |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<!-- 添加 col-span-2 和高度样式 --> |
|||
<div class="tabs-container"> |
|||
<Tabs v-model:activeKey="activeKey" type="card"> |
|||
<TabPane key="1" tab="审查结果"> |
|||
<div class="scroll-container"> |
|||
<div class="card-container"> |
|||
<Card |
|||
v-for="(item, index) in props.cardList" |
|||
:key="index" |
|||
:class="['custom-card', { 'card-selected': selectedCard === item.title }]" |
|||
@click="handleCardClick(item.title)" |
|||
> |
|||
<template #title>{{ item.title }}</template> |
|||
{{ item.text }} |
|||
{{ item.content }} |
|||
</Card> |
|||
</div> |
|||
</div> |
|||
</TabPane> |
|||
<!-- <TabPane key="2" tab="Tab 2">Content of Tab Pane 2</TabPane> |
|||
<TabPane key="3" tab="Tab 3">Content of Tab Pane 3</TabPane> --> |
|||
</Tabs> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, reactive } from 'vue'; |
|||
|
|||
import { Tabs, TabPane, Card } from 'ant-design-vue'; |
|||
// Props 定义 |
|||
interface Props { |
|||
cardList:any[]; |
|||
} |
|||
const props = defineProps<Props>(); |
|||
const activeKey = ref('1'); |
|||
// 卡片数据 |
|||
const selectedCard = ref(''); // 用于存储当前选中的卡片标题 |
|||
const handleCardClick = (title) => { |
|||
selectedCard.value = title; |
|||
console.log('点击的卡片标题:', title); |
|||
}; |
|||
|
|||
// 初始化数据 |
|||
onMounted(() => { |
|||
|
|||
}); |
|||
</script> |
|||
<style scoped> |
|||
/* Tabs 相关样式 */ |
|||
/* 设置未选中标签的基本样式 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) { |
|||
color: rgba(0, 0, 0, 0.85) !important; /* 文字颜色为黑色，带透明度 */ |
|||
background: #fff; /* 背景色为白色 */ |
|||
border: 1px solid #f0f0f0; /* 浅灰色边框 */ |
|||
} |
|||
|
|||
/* 设置选中标签的样式 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) { |
|||
color: #ffffff !important; /* 文字颜色为白色 */ |
|||
background: #1890ff !important; /* 背景色为蓝色 */ |
|||
border-color: #1890ff !important; /* 边框颜色也改为蓝色 */ |
|||
} |
|||
|
|||
/* 确保选中标签的文字颜色为白色 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn) { |
|||
color: #ffffff !important; /* 文字颜色强制设为白色 */ |
|||
} |
|||
|
|||
/* 鼠标悬停时的文字颜色效果 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-btn) { |
|||
color: #1890ff !important; /* 悬停时文字变为蓝色 */ |
|||
} |
|||
|
|||
/* Card 相关样式 */ |
|||
/* 卡片容器布局设置 */ |
|||
.card-container { |
|||
display: flex; |
|||
gap: 16px; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 单个卡片的基本样式 */ |
|||
.custom-card { |
|||
width: 100%; |
|||
margin-bottom: 16px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
background-color: #fff; /* 添加默认背景色 */ |
|||
border: 1px solid #e8e8e8; /* 添加默认边框 */ |
|||
} |
|||
|
|||
/* 卡片选中状态 */ |
|||
.custom-card.card-selected { |
|||
background-color: #e6f4ff !important; /* 选中时的淡蓝色背景 */ |
|||
border: 1px solid #1890ff !important; /* 选中时的蓝色边框 */ |
|||
} |
|||
|
|||
/* 卡片悬停效果 */ |
|||
.custom-card:hover { |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|||
transform: translateY(-2px); |
|||
} |
|||
|
|||
/* 选中状态下的悬停效果 */ |
|||
.custom-card.card-selected:hover { |
|||
background-color: #e6f4ff !important; |
|||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1); |
|||
} |
|||
|
|||
/* 卡片点击效果 */ |
|||
.custom-card:active { |
|||
transform: translateY(0); |
|||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 修改卡片内容区域的内边距 */ |
|||
:deep(.ant-card-body) { |
|||
padding: 16px; |
|||
} |
|||
|
|||
/* 滚动容器样式 */ |
|||
.scroll-container { |
|||
height: calc(100vh - 25vh); /* 可以根据实际需要调整高度 */ |
|||
overflow-y: auto; /* 添加垂直滚动条 */ |
|||
padding: 16px; |
|||
} |
|||
|
|||
/* 美化滚动条样式（可选） */ |
|||
.scroll-container::-webkit-scrollbar { |
|||
width: 6px; /* 滚动条宽度 */ |
|||
} |
|||
|
|||
.scroll-container::-webkit-scrollbar-thumb { |
|||
background-color: #ccc; /* 滚动条颜色 */ |
|||
border-radius: 3px; /* 滚动条圆角 */ |
|||
} |
|||
|
|||
.scroll-container::-webkit-scrollbar-track { |
|||
background-color: #f1f1f1; /* 滚动条轨道颜色 */ |
|||
} |
|||
|
|||
/* 保持原有的卡片容器样式 */ |
|||
.card-container { |
|||
display: flex; |
|||
gap: 16px; |
|||
flex-wrap: wrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" |
|||
:title="title" |
|||
:canFullscreen="true" |
|||
:defaultFullscreen="true" |
|||
:showOkBtn="false" |
|||
@register="registerInnerModal" |
|||
> |
|||
<ContractualTasksTable |
|||
:showAdd="false" |
|||
:groupId="groupId" |
|||
:batchName="batchName" |
|||
:resultType="resultType" |
|||
:key="randomKey" |
|||
/> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { BasicModal, useModalInner } from '@/components/Modal'; |
|||
import { BasicForm, useForm } from '@/components/Form'; |
|||
import { computed, ref, unref } from 'vue'; |
|||
import { |
|||
JyjcontractualTaskBatchInfo, |
|||
JyjcontractualTaskBatchAdd, |
|||
JyjcontractualTaskBatchUpdate, |
|||
} from '@/api/contractReview/JyjcontractualTaskBatch'; |
|||
import { modalSchemas } from './JyjcontractualTaskBatch.data'; |
|||
import ContractualTasksTable from '@/views/contractReview/ContractualTasks/ContractualTasksTable.vue'; |
|||
defineOptions({ name: 'ContractualTasksTableModal' }); |
|||
// 定义随机 key 的生成函数 |
|||
const randomKey = ref('1'); |
|||
|
|||
const emit = defineEmits(['register', 'reload']); |
|||
const title = ref(''); |
|||
const resultType = ref(''); |
|||
const batchName = ref(''); |
|||
const groupId = ref(''); |
|||
const isUpdate = ref<boolean>(false); |
|||
|
|||
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner( |
|||
async (data: { record?: Recordable; type?: string }) => { |
|||
modalLoading(true); |
|||
const { record, type } = data; |
|||
if (type == 'passCount') { |
|||
title.value = '查看审核通过记录'; |
|||
resultType.value = '审查合格'; |
|||
} else if (type == 'rejectCount') { |
|||
title.value = '查看审核不通过记录'; |
|||
resultType.value = '审查不合格'; |
|||
} else if(type=="irrelevantCount"){ |
|||
title.value = '查看非审查范围记录'; |
|||
resultType.value = '非审查范围文件'; |
|||
}else{ |
|||
title.value = '查看审查失败的范围记录'; |
|||
resultType.value = '审查失败文件'; |
|||
} |
|||
batchName.value = record.batchName; |
|||
groupId.value = record.id; |
|||
console.log(batchName.value, groupId.value); |
|||
const generateRandomKey = () => Math.random().toString(36).substr(2, 9); |
|||
|
|||
// 定义响应式变量 |
|||
randomKey.value = generateRandomKey(); // 初始化随机 key |
|||
modalLoading(false); |
|||
}, |
|||
); |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,109 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
import { getDictOptions } from '@/utils/dict'; |
|||
import { useRender } from '@/hooks/component/useRender'; |
|||
import { uploadContractual } from '@/api/contractReview/JyjcontractualTaskBatch'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
label: '文档名称', |
|||
field: 'documentName', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '批次名称', |
|||
field: 'batchName', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '进度状态', |
|||
field: 'progressStatus', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: getDictOptions('document_task_status'), |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
const { renderDict } = useRender(); |
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '文件名称', |
|||
dataIndex: 'documentName', |
|||
}, |
|||
{ |
|||
title: '批次名称', |
|||
dataIndex: 'batchName', |
|||
}, |
|||
{ |
|||
title: '合同总数', |
|||
dataIndex: 'totalContracts', |
|||
}, |
|||
{ |
|||
title: '已审批总数', |
|||
dataIndex: 'approvedCount', |
|||
|
|||
}, |
|||
{ |
|||
title: '审核通过数量', |
|||
dataIndex: 'passCount', |
|||
width: 120, |
|||
|
|||
}, |
|||
{ |
|||
title: '审核不通过数量', |
|||
dataIndex: 'rejectCount', |
|||
width: 130, |
|||
|
|||
}, |
|||
{ |
|||
title: '非审查范围数量', |
|||
dataIndex: 'irrelevantCount', |
|||
width: 130, |
|||
}, |
|||
{ |
|||
title: '审核失败数量', |
|||
dataIndex: 'failCount', |
|||
width: 100, |
|||
}, |
|||
{ |
|||
title: '进度(百分比)', |
|||
dataIndex: 'progress', |
|||
}, |
|||
{ |
|||
title: '处理时间', |
|||
dataIndex: 'processingTime', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
dataIndex: 'progressStatus', |
|||
customRender: ({ value }) => renderDict(value, 'document_task_status'), |
|||
}, |
|||
]; |
|||
export const modalSchemas: FormSchema[] = [ |
|||
{ |
|||
label: '文件名称', |
|||
field: 'ossId', |
|||
required: true, |
|||
component: 'Upload', |
|||
componentProps: { |
|||
accept: ['.zip'], |
|||
maxSize: 500, |
|||
multiple: false, |
|||
resultField: 'ossId', |
|||
api: uploadContractual, |
|||
}, |
|||
}, |
|||
{ |
|||
label: '批次名称', |
|||
field: 'batchName', |
|||
required: false, |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
required: false, |
|||
component: 'InputTextArea', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" |
|||
:title="title" |
|||
@register="registerInnerModal" |
|||
@ok="handleSubmit" |
|||
@cancel="resetForm" |
|||
> |
|||
<BasicForm @register="registerForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { BasicModal, useModalInner } from '@/components/Modal'; |
|||
import { BasicForm, useForm } from '@/components/Form'; |
|||
import { computed, ref, unref } from 'vue'; |
|||
import { JyjcontractualTaskBatchInfo, JyjcontractualTaskBatchAdd, JyjcontractualTaskBatchUpdate } from '@/api/contractReview/JyjcontractualTaskBatch'; |
|||
import { modalSchemas } from './JyjcontractualTaskBatch.data'; |
|||
|
|||
defineOptions({ name: 'JyjcontractualTaskBatchModal' }); |
|||
|
|||
const emit = defineEmits(['register', 'reload']); |
|||
|
|||
const isUpdate = ref<boolean>(false); |
|||
const title = computed<string>(() => { |
|||
return isUpdate.value ? '编辑合同批处理记录' : '新增合同批处理记录'; |
|||
}); |
|||
|
|||
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner( |
|||
async (data: { record?: Recordable; update: boolean }) => { |
|||
modalLoading(true); |
|||
const { record, update } = data; |
|||
isUpdate.value = update; |
|||
if (update && record) { |
|||
const ret = await JyjcontractualTaskBatchInfo(record.id); |
|||
await setFieldsValue(ret); |
|||
} |
|||
modalLoading(false); |
|||
}, |
|||
); |
|||
|
|||
const [registerForm, { setFieldsValue, resetForm, validate }] = useForm({ |
|||
labelWidth: 100, |
|||
showActionButtonGroup: false, |
|||
baseColProps: { span: 24 }, |
|||
schemas: modalSchemas, |
|||
}); |
|||
|
|||
async function handleSubmit() { |
|||
try { |
|||
modalLoading(true); |
|||
const data = await validate(); |
|||
//修改 |
|||
if (unref(isUpdate)) { |
|||
data["ossId"]=data["ossId"][0] |
|||
await JyjcontractualTaskBatchUpdate(data); |
|||
} else { |
|||
//新增 |
|||
data["ossId"]=data["ossId"][0] |
|||
data["taskName"]="batchReview" |
|||
data["taskType"]="contract_review" |
|||
await JyjcontractualTaskBatchAdd(data); |
|||
} |
|||
emit('reload'); |
|||
closeModal(); |
|||
await resetForm(); |
|||
} catch (e) { |
|||
} finally { |
|||
modalLoading(false); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,200 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<!-- <a-button |
|||
@click=" |
|||
downloadExcel( |
|||
JyjcontractualTaskBatchExport, |
|||
'合同批处理记录数据', |
|||
getForm().getFieldsValue(), |
|||
) |
|||
" |
|||
v-auth="'productManagement:JyjcontractualTaskBatch:export'" |
|||
>导出</a-button |
|||
> |
|||
<a-button |
|||
type="primary" |
|||
danger |
|||
@click="multipleRemove(JyjcontractualTaskBatchRemove)" |
|||
:disabled="!selected" |
|||
v-auth="'productManagement:JyjcontractualTaskBatch:remove'" |
|||
>删除</a-button |
|||
> --> |
|||
<a-button |
|||
type="primary" |
|||
@click="handleAdd" |
|||
v-auth="'productManagement:JyjcontractualTaskBatch:add'" |
|||
>新增</a-button |
|||
> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'passCount'"> |
|||
<div class="grid grid-flow-row auto-rows-max"> |
|||
<div> {{ record.passCount }}</div> |
|||
<div><TableAction |
|||
stopButtonPropagation |
|||
:actions="[ |
|||
{ |
|||
label: '查看', |
|||
icon: IconEnum.PREVIEW, |
|||
type: 'primary', |
|||
color:'success', |
|||
ifShow:()=>{ |
|||
if(record.passCount&&record.passCount>0){ |
|||
return true |
|||
}else{ |
|||
return false |
|||
} |
|||
}, |
|||
ghost: true, |
|||
onClick: handlePreview.bind(null, record,'passCount'), |
|||
}, |
|||
]" |
|||
/></div> |
|||
</div> |
|||
</template> |
|||
<template v-if="column.key === 'rejectCount'"> |
|||
<div class="grid grid-flow-row auto-rows-max"> |
|||
<div> {{ record.rejectCount }}</div> |
|||
<div><TableAction |
|||
stopButtonPropagation |
|||
:actions="[ |
|||
{ |
|||
label: '查看', |
|||
icon: IconEnum.PREVIEW, |
|||
type: 'primary', |
|||
color:'error', |
|||
ifShow:()=>{ |
|||
if(record.rejectCount&&record.rejectCount>0){ |
|||
return true |
|||
}else{ |
|||
return false |
|||
} |
|||
}, |
|||
ghost: true, |
|||
onClick: handlePreview.bind(null, record,'rejectCount'), |
|||
}, |
|||
]" |
|||
/></div> |
|||
</div> |
|||
</template> |
|||
<template v-if="column.key === 'irrelevantCount'"> |
|||
<div class="grid grid-flow-row auto-rows-max"> |
|||
<div> {{ record.irrelevantCount }}</div> |
|||
<div><TableAction |
|||
stopButtonPropagation |
|||
:actions="[ |
|||
{ |
|||
label: '查看', |
|||
icon: IconEnum.PREVIEW, |
|||
type: 'primary', |
|||
color:'warning', |
|||
ifShow:()=>{ |
|||
if(record.irrelevantCount&&record.irrelevantCount>0){ |
|||
return true |
|||
}else{ |
|||
return false |
|||
} |
|||
}, |
|||
ghost: true, |
|||
onClick: handlePreview.bind(null, record,'irrelevantCount'), |
|||
}, |
|||
]" |
|||
/></div> |
|||
</div> |
|||
</template> |
|||
<template v-if="column.key === 'failCount'"> |
|||
<div class="grid grid-flow-row auto-rows-max"> |
|||
<div> {{ record.failCount }}</div> |
|||
<div><TableAction |
|||
:actions="[ |
|||
{ |
|||
label: '查看', |
|||
icon: IconEnum.PREVIEW, |
|||
type: 'primary', |
|||
ifShow:()=>{ |
|||
if(record.failCount&&record.failCount>0){ |
|||
return true |
|||
}else{ |
|||
return false |
|||
} |
|||
}, |
|||
ghost: true, |
|||
onClick: handlePreview.bind(null, record,'failCount'), |
|||
}, |
|||
]" |
|||
/></div> |
|||
</div> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<JyjcontractualTaskBatchModal @register="registerModal" @reload="reload" /> |
|||
<ContractualTasksTableModal @register="registerTableModal"/> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable, TableAction } from '@/components/Table'; |
|||
import { |
|||
JyjcontractualTaskBatchList, |
|||
JyjcontractualTaskBatchExport, |
|||
JyjcontractualTaskBatchRemove, |
|||
} from '@/api/contractReview/JyjcontractualTaskBatch'; |
|||
import { downloadExcel } from '@/utils/file/download'; |
|||
import { useModal } from '@/components/Modal'; |
|||
import JyjcontractualTaskBatchModal from './JyjcontractualTaskBatchModal.vue'; |
|||
import ContractualTasksTableModal from './ContractualTasksTableModal.vue' |
|||
import { formSchemas, columns } from './JyjcontractualTaskBatch.data'; |
|||
import { IconEnum } from '@/enums/appEnum'; |
|||
|
|||
defineOptions({ name: 'JyjcontractualTaskBatch' }); |
|||
|
|||
const [registerTable, { reload, multipleRemove, selected, getForm }] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '合同批处理记录列表', |
|||
api: JyjcontractualTaskBatchList, |
|||
showIndexColumn: false, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
ifShow:false, |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
const [registerModal, { openModal }] = useModal(); |
|||
const [registerTableModal,{openModal:openTableModal}]= useModal(); |
|||
function handleEdit(record: Recordable) { |
|||
openModal(true, { record, update: true }); |
|||
} |
|||
|
|||
function handleAdd() { |
|||
openModal(true, { update: false }); |
|||
} |
|||
function handlePreview(record: Recordable,type:string){ |
|||
openTableModal(true,{record,type:type}) |
|||
} |
|||
async function handleDelete(record: Recordable) { |
|||
await JyjcontractualTaskBatchRemove([record.id]); |
|||
await reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<div class="grid grid-cols-5 gap-4"> |
|||
<div class="col-span-3"> |
|||
<CanvasEditor |
|||
ref="canvasEditor" |
|||
:parentContent="parentContent" |
|||
:view="view" |
|||
@save-content="handleSaveCanvasEditorContent" |
|||
/> |
|||
</div> |
|||
<div class="col-span-2"> |
|||
<!-- 添加 col-span-2 和高度样式 --> |
|||
<div class="tabs-container"> |
|||
<Tabs v-model:activeKey="activeKey" type="card"> |
|||
<TabPane key="1" tab="Tab 1"> |
|||
<div class="scroll-container"> |
|||
<div class="card-container"> |
|||
<Card |
|||
v-for="(item, index) in cardList" |
|||
:key="index" |
|||
:class="['custom-card', { 'card-selected': selectedCard === item.title }]" |
|||
@click="handleCardClick(item.title)" |
|||
> |
|||
<template #title>{{ item.title }}</template> |
|||
{{ item.content }} |
|||
</Card> |
|||
</div> |
|||
</div> |
|||
</TabPane> |
|||
<TabPane key="2" tab="Tab 2">Content of Tab Pane 2</TabPane> |
|||
<TabPane key="3" tab="Tab 3">Content of Tab Pane 3</TabPane> |
|||
</Tabs> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</PageWrapper> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, reactive } from 'vue'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import WorkbenchHeader from './components/WorkbenchHeader.vue'; |
|||
import { Tabs, TabPane, Card, Dropdown, Menu, MenuItem } from 'ant-design-vue'; |
|||
import ProjectCard from './components/ProjectCard.vue'; |
|||
import QuickNav from './components/QuickNav.vue'; |
|||
import DocumentTasksTable from '@/views/documentReview/DocumentTasks/DocumentTasksTable.vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
import { DownOutlined, UserOutlined } from '@ant-design/icons-vue'; |
|||
import { groupItems } from './components/data'; |
|||
import CanvasEditor from '@/views/CanvasEditor/index.vue'; |
|||
const activeKey = ref('1'); |
|||
// 卡片数据 |
|||
const cardList = ref([ |
|||
{ title: '标题1', content: '内容1' }, |
|||
{ title: '标题2', content: '内容2' }, |
|||
{ title: '标题3', content: '内容3' }, |
|||
{ title: '标题1', content: '内容1' }, |
|||
{ title: '标题2', content: '内容2' }, |
|||
{ title: '标题3', content: '内容3' }, |
|||
{ title: '标题1', content: '内容1' }, |
|||
{ title: '标题2', content: '内容2' }, |
|||
{ title: '标题3', content: '内容3' }, |
|||
{ title: '标题1', content: '内容1' }, |
|||
{ title: '标题2', content: '内容2' }, |
|||
{ title: '标题3', content: '内容3' }, |
|||
{ title: '标题1', content: '内容1' }, |
|||
{ title: '标题2', content: '内容2' }, |
|||
{ title: '标题3', content: '内容3' }, |
|||
{ title: '标题1', content: '内容1' }, |
|||
{ title: '标题2', content: '内容2' }, |
|||
{ title: '标题3', content: '内容3' }, |
|||
]); |
|||
const selectedCard = ref(''); // 用于存储当前选中的卡片标题 |
|||
const handleCardClick = (title) => { |
|||
selectedCard.value = title; |
|||
console.log('点击的卡片标题:', title); |
|||
}; |
|||
// 存放父组件传递的数据 |
|||
let parentContent = reactive<any>(undefined); |
|||
// 存放子组件数据 |
|||
const content = ref<any>(undefined); |
|||
// 标识符 |
|||
const view = ref<string | undefined>(undefined); |
|||
|
|||
// 初始化数据 |
|||
onMounted(() => { |
|||
console.log('模拟父组件向后端请求数据, 传递给子组件'); |
|||
getEditorContent(); |
|||
view.value = 'parent'; |
|||
}); |
|||
|
|||
// 模拟后端获取数据的方法 |
|||
const getEditorContent = () => { |
|||
parentContent = { |
|||
header: [ |
|||
{ |
|||
value: '', |
|||
size: 12, |
|||
bold: false, |
|||
color: 'rgb(33, 53, 71)', |
|||
italic: false, |
|||
}, |
|||
], |
|||
main: [ |
|||
{ |
|||
value: |
|||
'父类传递的数据 通过后端获取!\n甲方：企查查科技股份有限公司\n法定代表人：陈德强\n住所：苏州工业园区科创东区东石泾港路2号润港产业园6号楼10层1001室11', |
|||
size: 10, |
|||
bold: false, |
|||
}, |
|||
], |
|||
}; |
|||
}; |
|||
|
|||
// 组件引用 |
|||
const canvasEditor = ref<InstanceType<typeof CanvasEditor> | null>(null); |
|||
|
|||
// 保存内容方法 |
|||
const handleSaveContent = () => { |
|||
// 访问子组件的方法 |
|||
(canvasEditor.value as any).saveContent(); |
|||
}; |
|||
|
|||
// 处理子组件传递的数据 |
|||
const handleSaveCanvasEditorContent = (data: any) => { |
|||
console.log('从子组件接收到的数据:', data); |
|||
// 将data数据转换为 json 格式的数据, 方便入库处理 |
|||
content.value = JSON.stringify(data); |
|||
console.log('转换后的数据 content 为: ', content.value); |
|||
}; |
|||
|
|||
const router = useRouter(); |
|||
// 状态定义 |
|||
const loading = ref(false); |
|||
const handleMenuClick = ({ key }) => { |
|||
console.log(key); |
|||
router.push({ path: key }); |
|||
}; |
|||
// 获取任务列表 |
|||
const fetchTaskList = async () => {}; |
|||
|
|||
// 页面加载时获取数据 |
|||
onMounted(() => { |
|||
fetchTaskList(); |
|||
}); |
|||
setTimeout(() => { |
|||
loading.value = false; |
|||
}, 1500); |
|||
</script> |
|||
<style scoped> |
|||
/* Tabs 相关样式 */ |
|||
/* 设置未选中标签的基本样式 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) { |
|||
color: rgba(0, 0, 0, 0.85) !important; /* 文字颜色为黑色，带透明度 */ |
|||
background: #fff; /* 背景色为白色 */ |
|||
border: 1px solid #f0f0f0; /* 浅灰色边框 */ |
|||
} |
|||
|
|||
/* 设置选中标签的样式 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) { |
|||
color: #ffffff !important; /* 文字颜色为白色 */ |
|||
background: #1890ff !important; /* 背景色为蓝色 */ |
|||
border-color: #1890ff !important; /* 边框颜色也改为蓝色 */ |
|||
} |
|||
|
|||
/* 确保选中标签的文字颜色为白色 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn) { |
|||
color: #ffffff !important; /* 文字颜色强制设为白色 */ |
|||
} |
|||
|
|||
/* 鼠标悬停时的文字颜色效果 */ |
|||
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-btn) { |
|||
color: #1890ff !important; /* 悬停时文字变为蓝色 */ |
|||
} |
|||
|
|||
/* Card 相关样式 */ |
|||
/* 卡片容器布局设置 */ |
|||
.card-container { |
|||
display: flex; |
|||
gap: 16px; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 单个卡片的基本样式 */ |
|||
.custom-card { |
|||
width: 100%; |
|||
margin-bottom: 16px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
background-color: #fff; /* 添加默认背景色 */ |
|||
border: 1px solid #e8e8e8; /* 添加默认边框 */ |
|||
} |
|||
|
|||
/* 卡片选中状态 */ |
|||
.custom-card.card-selected { |
|||
background-color: #e6f4ff !important; /* 选中时的淡蓝色背景 */ |
|||
border: 1px solid #1890ff !important; /* 选中时的蓝色边框 */ |
|||
} |
|||
|
|||
/* 卡片悬停效果 */ |
|||
.custom-card:hover { |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|||
transform: translateY(-2px); |
|||
} |
|||
|
|||
/* 选中状态下的悬停效果 */ |
|||
.custom-card.card-selected:hover { |
|||
background-color: #e6f4ff !important; |
|||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1); |
|||
} |
|||
|
|||
/* 卡片点击效果 */ |
|||
.custom-card:active { |
|||
transform: translateY(0); |
|||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 修改卡片内容区域的内边距 */ |
|||
:deep(.ant-card-body) { |
|||
padding: 16px; |
|||
} |
|||
|
|||
/* 滚动容器样式 */ |
|||
.scroll-container { |
|||
height: calc(100vh - 25vh); /* 可以根据实际需要调整高度 */ |
|||
overflow-y: auto; /* 添加垂直滚动条 */ |
|||
padding: 16px; |
|||
} |
|||
|
|||
/* 美化滚动条样式（可选） */ |
|||
.scroll-container::-webkit-scrollbar { |
|||
width: 6px; /* 滚动条宽度 */ |
|||
} |
|||
|
|||
.scroll-container::-webkit-scrollbar-thumb { |
|||
background-color: #ccc; /* 滚动条颜色 */ |
|||
border-radius: 3px; /* 滚动条圆角 */ |
|||
} |
|||
|
|||
.scroll-container::-webkit-scrollbar-track { |
|||
background-color: #f1f1f1; /* 滚动条轨道颜色 */ |
|||
} |
|||
|
|||
/* 保持原有的卡片容器样式 */ |
|||
.card-container { |
|||
display: flex; |
|||
gap: 16px; |
|||
flex-wrap: wrap; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue