Commit dce514bf authored by 罗林杰's avatar 罗林杰

修改公共文件

parent 940b3715
<template>
<div style="min-width: 250px; min-height: 850px">
<BasicTree
style="padding-left: 15px"
title=" "
search
ref="treeRef"
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { Nullable } from 'packages/types/src/index';
import { TreeData } from './mock.ts';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
const emit = defineEmits(['select']);
const { createMessage } = useMessage();
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
const [registerModal, { openModal }] = useModal();
async function fetch() {
treeData.value = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
await nextTick(() => {
getTree().expandAll(true);
});
}
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
function handleSelect() {
const keys = getTree().getSelectedKeys();
const node = getTree().getSelectedNode(keys[0]);
// console.log('node', node);
emit('select', node);
}
// /**选中的数据*/
// function handleSelect(keys) {
// console.log(keys);
// emit('select', keys[0]);
// }
onMounted(() => {
fetch();
});
</script>
import { BasicColumn } from '@/components/Table';
export const Columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'title',
},
{
title: '部门',
dataIndex: 'dept',
},
{
title: '标签',
dataIndex: 'label',
},
{
title: '描述',
dataIndex: 'description',
},
{
title: '创建人',
dataIndex: 'createdBy',
},
{
title: '创建时间',
dataIndex: 'createdTime',
},
{
title: '浏览次数',
dataIndex: 'view',
},
{
title: '推送次数',
dataIndex: 'edit',
},
{
title: '共享类型',
dataIndex: 'isShare',
slots: { customRender: 'isShare' },
},
];
<template> <template>
<div>11111</div> <div class="full-page-container">
<GroupTree @select="handleSelect" class="group-tree" />
<PageWrapper class="page-wrapper">
<template #headerContent>
<div class="headerContent">
<div>
<Icon icon="fluent:document-folder-16-regular" :size="40" :color="'#61aaff'" />
</div>
<div>
<div class="title">{{ workSpaceName }}</div>
<!-- <div class="path">资源编目</div>-->
</div>
<div class="buttonGroup">
<Segmented v-model:value="value" :options="data">
<template #label="{ payload, value: segmentValue }">
<div class="icon-container">
<Icon
:icon="payload.icon"
:size="24"
:color="segmentValue === value ? '#007bff' : '#8c8c8c'"
/>
</div>
</template>
</Segmented>
<a-button type="primary" @click="handleBulkDownload">批量下载</a-button>
<a-button type="primary" @click="handleBatchPush">批量推送</a-button>
</div>
</div>
</template>
<div class="listHead">
<div class="search">
<div>
<a-input-search
allow-clear
v-model:value="params"
placeholder="请输入关键字"
style="width: 200px"
@search="onSearch"
/>
<Select
:options="[
{ label: '全部', value: '' },
{ label: '有条件共享', value: 'true' },
{ label: '无条件共享', value: 'false' },
]"
v-model:value="selectValue"
style="width: 150px; margin-left: 10px"
@change="onSearch"
/>
</div>
<div>
<Checkbox v-if="value === 'cardList'" @click="toggleAllSelection">全选</Checkbox>
<Select
:options="[
{ label: '最新', value: 'latest' },
{ label: '最早', value: 'earliest' },
]"
v-model:value="sortOrder"
style="width: 150px; margin-left: 10px"
@change="onSearch"
/>
</div>
</div>
</div>
<List v-if="value === 'cardList'">
<Row :gutter="16">
<template v-for="item in cardListData" :key="item.title">
<Col :span="6">
<ListItem>
<Card
:hoverable="true"
@click="handleNewModal(item.scene)"
style="height: 250px; width: 300px; position: relative"
>
<div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center; gap: 5px">
<Checkbox
@click.stop="handleSelectCard(item)"
:checked="isCardSelected(item)"
/>
<div style="display: flex">
<Icon size="23" v-if="item.icon" :icon="item.icon" :color="item.color" />
</div>
<div>
<span class="card-title">{{ item.title }}</span>
</div>
</div>
<div style="display: flex; align-items: center; gap: 5px">
<span class="card-dept">{{ item.dept }}</span>
</div>
</div>
<div class="card-description">
{{ item.description }}
</div>
<div class="cardFooter" style="position: absolute; bottom: 0; left: 0; right: 0">
<div style="padding-left: 5px; padding-bottom: 5px">
<Tag style="padding: 2px 10px">
{{ item.label }}
</Tag>
</div>
<div style="display: flex; justify-content: space-between; color: gray">
<span>{{ item.createdBy }}</span>
<span>{{ item.createdTime }}</span>
</div>
<Divider style="margin: 9px 0" />
<div style="display: flex; justify-content: space-between; color: gray">
<span v-if="item.isShare">有条件共享</span>
<span v-else>无条件共享</span>
<div>
<a-button style="padding: 0; border: none; box-shadow: none">
<Icon icon="icon-park-outline:eyes" />{{ item.view }}</a-button
>
<Divider type="vertical" />
<a-button style="padding: 0; border: none; box-shadow: none">
<Icon icon="icon-park-outline:hand-up" />{{ item.edit }}</a-button
>
</div>
</div>
</div>
</Card>
</ListItem>
</Col>
</template>
</Row>
</List>
<BasicTable v-else @register="registerTable">
<template #isShare="{ text }">
<span v-if="text === 'true'">有条件共享</span>
<span v-else>无条件共享</span>
</template>
</BasicTable>
<Pagination
style="display: flex; justify-content: end"
size="small"
:total="6"
show-size-changer
show-quick-jumper
/>
</PageWrapper>
</div>
</template> </template>
<script> <script lang="ts" setup>
export default { import { BasicTable, useTable } from '@/components/Table';
name: "index" import {
} Pagination,
Segmented,
Card,
Row,
Col,
List,
ListItem,
Checkbox,
Tag,
Divider,
Select,
} from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { onMounted, ref, reactive } from 'vue';
import { cardList } from './mock';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useRouter } from 'vue-router';
import GroupTree from './GroupTree.vue';
import { Columns } from './commonDataSet.data';
const { createMessage, createConfirm } = useMessage();
const route = useRouter();
const value = ref('cardList');
const params = ref('');
const selectValue = ref('');
const sortOrder = ref('latest');
const selectedCard = reactive([] as any[]);
const cardListData = ref([]);
const workSpaceName = ref('党建建设');
const data = ref([
{
value: 'cardList',
payload: {
icon: 'mingcute:grid-fill',
},
},
{
value: 'table',
payload: {
icon: 'typcn:th-list',
},
},
]);
const [registerTable, { reload, getRowSelection }] = useTable({
api: async (params) => {
onSearch();
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: cardListData.value.length,
code: '',
message: '',
data: [],
};
return { ...response, data: cardListData.value };
},
columns: Columns,
rowSelection: true,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
canResize: false, //取消自适应 取消滚动条
});
function handleSelect(node) {
console.log(node);
workSpaceName.value = node.workSpaceName;
if ([101, 102].includes(node.parentId)) {
//跳转详情页
} else {
onSearch();
}
}
function handleNewModal(scene: string) {}
function handleSelectCard(item: any) {
if (selectedCard.includes(item)) {
selectedCard.splice(selectedCard.indexOf(item), 1);
} else {
selectedCard.push(item);
}
}
function toggleAllSelection() {
if (selectedCard.length === cardListData.value.length) {
selectedCard.length = 0;
} else {
selectedCard.length = 0;
selectedCard.push(...cardListData.value);
}
}
function isCardSelected(item: any) {
return selectedCard.includes(item);
}
function handleBulkDownload() {}
function handleBatchPush() {}
function onSearch() {
let filteredList = cardList.filter((item) => {
const titleMatch = item.title.toLowerCase().includes(params.value.toLowerCase());
const shareMatch =
selectValue.value === '' ? true : item.isShare.toString() === selectValue.value;
const workspaceMatch =
workSpaceName.value === '' ||
workSpaceName.value === '公共数据集' ||
item.parentWorkSpaceName === workSpaceName.value;
console.log('workSpaceName.value', workSpaceName.value);
console.log('item.parentWorkSpaceName', item.parentWorkSpaceName);
console.log('item.parentWorkSpaceName', item.title);
return titleMatch && shareMatch && workspaceMatch;
});
if (sortOrder.value === 'latest') {
filteredList.sort(
(a, b) => new Date(b.createdTime).getTime() - new Date(a.createdTime).getTime(),
);
} else if (sortOrder.value === 'earliest') {
filteredList.sort(
(a, b) => new Date(a.createdTime).getTime() - new Date(b.createdTime).getTime(),
);
}
cardListData.value = filteredList;
reload();
}
onMounted(() => {
onSearch();
});
</script> </script>
<style scoped> <style lang="scss" scoped>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.full-page-container {
display: flex;
height: 100%;
}
.group-tree {
width: 250px;
background-color: #f0f0f0;
}
.page-wrapper {
flex: 1;
min-height: 860px;
padding: 20px;
background-color: #ffffff;
}
.headerContent {
display: flex;
align-items: center;
.title {
font-size: 16px;
font-weight: bold;
}
.path {
font-size: 14px;
color: gray;
}
.buttonGroup {
margin-left: auto;
display: flex;
gap: 5px;
align-items: center;
}
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
}
.sceneSelectionIcon {
transition: color 0.3s ease;
}
.card-title {
font-size: 18px;
font-weight: bold;
}
.card-dept {
font-size: 12px;
color: gray;
}
.card-description {
margin-top: 10px;
color: gray;
}
.cardFooter {
padding: 10px;
}
.listHead {
margin-bottom: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: space-between;
}
</style> </style>
export const tableList: any[] = [
{
businessId: 1,
name: '图标加载',
scene: '离线加载',
releaseStatus: '未发布',
createTime: '2023/05/23 14:36:04',
updateTime: '2023/05/23 14:36:04',
owner: 'admin',
workgroup: '个人工作组',
},
{
businessId: 2,
name: '图标专利文件加载',
scene: '离线加载',
releaseStatus: '未发布',
createTime: '2023/05/23 14:36:04',
updateTime: '2023/05/23 14:36:05',
owner: 'admin',
workgroup: '个人工作组',
},
{
businessId: 3,
name: '版权证书加载',
scene: '离线加载',
releaseStatus: '已下线',
createTime: '2023/05/23 14:36:04',
updateTime: '2023/05/23 14:36:04',
owner: 'admin',
workgroup: '个人工作组',
},
{
businessId: 4,
name: '学生成绩表格',
scene: '文件加载',
releaseStatus: '已发布',
createTime: '2023/05/23 14:36:04',
updateTime: '2023/05/23 14:36:05',
owner: 'admin',
workgroup: '共享工作组',
},
{
businessId: 5,
name: '各科试卷加载',
scene: '文件加载',
releaseStatus: '已发布',
createTime: '2023/05/23 14:36:04',
updateTime: '2023/05/23 14:36:05',
owner: 'admin',
workgroup: '共享工作组',
},
{
businessId: 6,
name: '学生个人信息加载',
scene: '准实时加载',
releaseStatus: '已发布',
createTime: '2023/05/23 14:36:04',
updateTime: '2023/05/23 14:36:04',
owner: 'admin',
workgroup: '共享工作组',
},
];
export const TreeData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 100,
parentWorkSpaceName: '公共文件',
workSpaceName: '公共文件',
parentId: 0,
'code:': '001',
ancestors: '0',
orderNum: 0,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 101,
parentWorkSpaceName: '公共文件',
workSpaceName: '党建建设',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 201,
parentWorkSpaceName: '党建建设',
workSpaceName: '基本信息',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 202,
parentWorkSpaceName: '党建建设',
workSpaceName: '党员发展计划',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 203,
parentWorkSpaceName: '党建建设',
workSpaceName: '主题教育活动',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 204,
parentWorkSpaceName: '党建建设',
workSpaceName: '党建工作总结',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 205,
parentWorkSpaceName: '党建建设',
workSpaceName: '党史知识竞赛',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 206,
parentWorkSpaceName: '党建建设',
workSpaceName: '红色文化展览',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 207,
parentWorkSpaceName: '党建建设',
workSpaceName: '志愿服务活动',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 208,
parentWorkSpaceName: '党建建设',
workSpaceName: '党员风采展示',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 102,
parentWorkSpaceName: '公共文件',
workSpaceName: '交通信息',
parentId: 100,
'code:': '004',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 209,
parentWorkSpaceName: '交通信息',
workSpaceName: '城市公交优化方案',
parentId: 102,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 210,
parentWorkSpaceName: '交通信息',
workSpaceName: '智能交通系统部署',
parentId: 102,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 211,
parentWorkSpaceName: '交通信息',
workSpaceName: '绿色出行倡议',
parentId: 102,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
];
export const cardList = [
{
title: '基本信息',
scene: 'databaseOfflineLoading',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '数据资源管理部',
description: '集团党委会、党委理论学习中心的学习会的组织实操、集团党委、纪委换届选举',
label: '其他',
createdBy: 'admin',
createdTime: '2023/01/05 15:43:15',
view: '85',
edit: '2',
isShare: 'true',
},
{
title: '党员发展计划',
scene: 'partyDevelopmentPlan',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '组织人事部',
description: '制定年度党员发展计划,开展入党积极分子培训',
label: '计划',
createdBy: 'admin',
createdTime: '2023/02/10 09:20:30',
view: '120',
edit: '5',
isShare: 'true',
},
{
title: '主题教育活动',
scene: 'themeEducationActivity',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '宣传部',
description: '举办各类主题教育活动,增强党员意识',
label: '活动',
createdBy: 'admin',
createdTime: '2023/03/15 14:45:45',
view: '95',
edit: '3',
isShare: 'false',
},
{
title: '党建工作总结',
scene: 'partyWorkSummary',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '办公室',
description: '撰写季度党建工作总结报告',
label: '总结',
createdBy: 'admin',
createdTime: '2023/08/10 09:00:00',
view: '80',
edit: '1',
isShare: 'true',
},
{
title: '党史知识竞赛',
scene: 'partyHistoryQuiz',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '宣传教育中心',
description: '组织党史知识竞赛,提升党员历史素养',
label: '竞赛',
createdBy: 'admin',
createdTime: '2023/05/25 16:30:15',
view: '110',
edit: '4',
isShare: 'false',
},
{
title: '公交优化方案',
scene: 'urbanBusOptimization',
parentWorkSpaceName: '交通信息',
icon: 'majesticons:bus',
color: '#71c8d5',
dept: '交通规划部',
description: '分析现有公交线路运行情况,提出优化建议以提高效率和乘客满意度。',
label: '方案',
createdBy: 'admin',
createdTime: '2023/04/01 10:00:00',
view: '90',
edit: '3',
isShare: 'true',
},
{
title: '交通系统部署',
scene: 'intelligentTransportSystemDeployment',
icon: 'majesticons:bus',
parentWorkSpaceName: '交通信息',
color: '#71c8d5',
dept: '信息技术部',
description:
'实施先进的智能交通管理系统,包括信号灯控制、交通流量监测等,旨在缓解城市交通拥堵。',
label: '技术',
createdBy: 'admin',
createdTime: '2023/05/15 11:30:00',
view: '115',
edit: '5',
isShare: 'false',
},
{
title: '绿色出行倡议',
scene: 'greenCommuteInitiative',
icon: 'majesticons:bus',
parentWorkSpaceName: '交通信息',
color: '#71c8d5',
dept: '环保与发展部',
description: '推广低碳环保的出行方式,如骑行和步行,并为市民提供相关设施支持。',
label: '倡议',
createdBy: 'admin',
createdTime: '2023/09/28 14:00:00',
view: '75',
edit: '2',
isShare: 'true',
},
];
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment