<script lang="ts" setup>
|
import { reactive, ref, toRefs, unref } from 'vue';
|
|
import { formatToDate } from '@jnpf/utils';
|
|
import Preview from '#/views/teamwork/document/Preview.vue';
|
|
import ViewModal from './ViewModal.vue';
|
|
defineProps({
|
list: { type: Array as PropType<any[]>, default: () => [] },
|
formData: { type: Object },
|
});
|
|
interface State {
|
config: any;
|
}
|
|
const state = reactive<State>({
|
config: {},
|
});
|
const { config } = toRefs(state);
|
const viewModalRef = ref(null);
|
const filePreviewRef = ref<any>(null);
|
const columns = [
|
{ title: '文件名', dataIndex: 'fileName', key: 'fileName', width: 200 },
|
{ title: '归档日期', dataIndex: 'fileDate', key: 'fileDate', width: 100 },
|
];
|
|
function clickLink(urlAddress) {
|
window.open(urlAddress, '_blank');
|
}
|
function clickData(item) {
|
state.config = item;
|
openSelectDialog();
|
}
|
function clickExport(item) {
|
const query = {
|
name: item.fileName,
|
url: item.uploaderUrl,
|
fileId: item.fileName,
|
};
|
filePreviewRef.value?.init(query);
|
}
|
function openSelectDialog() {
|
(unref(viewModalRef) as any)?.openViewModal();
|
}
|
</script>
|
|
<template>
|
<div class="auxiliary">
|
<div v-for="item in list" :key="item.id">
|
<div class="card-main" :class="{ 'auxiliary-card': item.id == 3 }" v-if="item.config.on">
|
<a-card :title="item.fullName" size="small">
|
<p v-if="item.id == 1">{{ item.config.content }}</p>
|
<div v-if="item.id == 2">
|
<div class="card-box" v-for="(linkItem, index) in item.config.linkList" :key="index">
|
<span class="link-text" @click="clickLink(linkItem.urlAddress)">{{ linkItem.fullName }}</span>
|
<a-divider class="!mt-[10px]" v-if="index < item.config.linkList.length - 1" />
|
</div>
|
</div>
|
<a-table v-if="item.id == 3" :data-source="item.config.fileList" :columns="columns" size="small" :pagination="false" row-key="id">
|
<template #bodyCell="{ column, record, index }">
|
<template v-if="column.key === 'fileName'">
|
<div class="file-img">
|
<img src="@/assets/images/document/pdf.png" class="h-[30px] w-[30px]" />
|
<span class="link-text" @click="clickExport(record)">{{ record[column.key] }}</span>
|
</div>
|
</template>
|
<template v-if="column.key === 'fileDate'">
|
<span @click="clickLink(index)">{{ formatToDate(record[column.key]) }}</span>
|
</template>
|
</template>
|
</a-table>
|
<div v-if="item.id == 4">
|
<div class="card-box" v-for="(dataItem, dataIndex) in item.config.dataList" :key="dataIndex">
|
<span style="cursor: pointer" @click="clickData(dataItem)">{{ dataItem.interfaceName }}</span>
|
<a-divider class="!mt-[10px]" v-if="dataIndex < item.config.dataList.length - 1" />
|
</div>
|
</div>
|
</a-card>
|
</div>
|
</div>
|
</div>
|
<ViewModal :config="config" :form-data="formData" ref="viewModalRef" />
|
<Preview ref="filePreviewRef" />
|
</template>
|
<style lang="scss" scoped>
|
.auxiliary {
|
height: 100%;
|
overflow: auto;
|
|
.card-main {
|
padding: 10px;
|
|
.card-box {
|
height: 40px;
|
border-width: 0;
|
border-radius: 0;
|
|
.link-text {
|
margin-bottom: 10px;
|
color: var(--primary-color);
|
text-decoration: underline;
|
cursor: pointer;
|
}
|
|
.data-text:hover {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
|
.auxiliary-card {
|
:deep(.ant-card-body) {
|
padding: unset !important;
|
}
|
}
|
|
.file-img {
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
