<template>
|
<div class="task-tree-container">
|
<!-- 任务树操作按钮 -->
|
<div class="tree-actions mb10">
|
<el-button type="primary"
|
size="small"
|
icon="Plus"
|
@click="handleAddTask">添加任务</el-button>
|
<el-button type="success"
|
size="small"
|
icon="RefreshRight"
|
@click="refreshTree">刷新</el-button>
|
<el-button type="info"
|
size="small"
|
icon="Filter"
|
@click="toggleFilter">
|
{{ showFilter ? '隐藏筛选' : '显示筛选' }}
|
</el-button>
|
</div>
|
<!-- 筛选条件 -->
|
<div v-if="showFilter"
|
class="filter-section mb10">
|
<el-form :inline="true"
|
:model="filterParams">
|
<el-form-item label="任务状态">
|
<el-select v-model="filterParams.status"
|
placeholder="全部"
|
clearable
|
style="width: 120px">
|
<el-option label="未开始"
|
value="notStarted" />
|
<el-option label="进行中"
|
value="inProgress" />
|
<el-option label="已完成"
|
value="completed" />
|
<el-option label="已逾期"
|
value="overdue" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="负责人">
|
<el-input v-model="filterParams.assignee"
|
placeholder="输入负责人"
|
clearable
|
style="width: 150px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
size="small"
|
@click="filterTree">筛选</el-button>
|
<el-button size="small"
|
@click="resetFilter">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 任务树 -->
|
<div class="tree-content">
|
<el-tree v-loading="loading"
|
:data="taskTreeData"
|
:props="defaultProps"
|
:expand-on-click-node="false"
|
node-key="nodeId"
|
ref="treeRef"
|
@node-contextmenu="handleContextMenu"
|
@node-click="handleNodeClick">
|
<template #default="{ node, data }">
|
<!-- 节点内容 -->
|
<div class="tree-node-content"
|
:class="{ 'phase-node': data.type === 'phase', 'task-node': data.type === 'task' }">
|
<!-- 节点图标 -->
|
<div class="node-icon">
|
<i v-if="data.type === 'phase'"
|
class="el-icon-folder text-primary" />
|
<i v-else-if="data.status === 'completed'"
|
class="el-icon-circle-check text-success" />
|
<i v-else-if="data.status === 'inProgress'"
|
class="el-icon-circle-check text-primary" />
|
<i v-else-if="data.status === 'overdue'"
|
class="el-icon-alarm-clock text-danger" />
|
<i v-else
|
class="el-icon-circle-close text-gray-400" />
|
</div>
|
<!-- 节点标题和描述 -->
|
<div class="node-info">
|
<div class="node-title"
|
:class="{ 'overdue-title': data.type === 'task' && data.status === 'overdue' }">
|
{{ node.label }}
|
<span v-if="data.type === 'task' && data.priority === 'high'"
|
class="priority-tag">高优</span>
|
<span v-else-if="data.type === 'task' && data.priority === 'medium'"
|
class="priority-tag medium">中优</span>
|
</div>
|
<div v-if="data.description"
|
class="node-description">{{ data.description }}</div>
|
<!-- 任务元信息 -->
|
<div v-if="data.type === 'task'"
|
class="task-meta">
|
<span class="meta-item">
|
<i class="el-icon-user"></i>
|
{{ data.assigneeName || '未分配' }}
|
</span>
|
<span class="meta-item">
|
<i class="el-icon-calendar"></i>
|
{{ formatDateRange(data.startDate, data.endDate) }}
|
</span>
|
</div>
|
</div>
|
<!-- 任务进度条 -->
|
<div v-if="data.type === 'task'"
|
class="task-progress">
|
<el-progress :percentage="data.progress || 0"
|
:stroke-width="4"
|
:show-text="false" />
|
</div>
|
<!-- 操作按钮 -->
|
<div class="node-actions">
|
<el-button v-if="data.type === 'task'"
|
type="text"
|
size="small"
|
icon="Edit"
|
@click.stop="handleEditTask(data)"
|
v-hasPermi="['oaSystem:task:edit']" />
|
<el-button v-if="data.type === 'phase'"
|
type="text"
|
size="small"
|
icon="Plus"
|
@click.stop="handleAddTaskUnderPhase(data)"
|
v-hasPermi="['oaSystem:task:add']" />
|
<el-button type="text"
|
size="small"
|
icon="Delete"
|
@click.stop="handleDeleteNode(data)"
|
v-hasPermi="['oaSystem:task:remove']" />
|
</div>
|
</div>
|
</template>
|
</el-tree>
|
</div>
|
<!-- 右键菜单 -->
|
<div v-if="showContextMenu"
|
:style="contextMenuStyle"
|
class="context-menu">
|
<el-menu @select="handleContextMenuSelect">
|
<el-menu-item v-if="selectedNode.type === 'task'"
|
index="edit">编辑任务</el-menu-item>
|
<el-menu-item v-if="selectedNode.type === 'phase'"
|
index="addTask">添加子任务</el-menu-item>
|
<el-menu-item index="delete">删除</el-menu-item>
|
<el-menu-item index="expandAll">展开全部</el-menu-item>
|
<el-menu-item index="collapseAll">收起全部</el-menu-item>
|
</el-menu>
|
</div>
|
<!-- 任务表单对话框 -->
|
<el-dialog :title="dialogTitle"
|
v-model="dialogOpen"
|
width="600px"
|
append-to-body>
|
<el-form ref="taskFormRef"
|
:model="taskForm"
|
:rules="taskRules"
|
label-width="80px">
|
<el-form-item label="任务名称"
|
prop="taskName">
|
<el-input v-model="taskForm.taskName"
|
placeholder="请输入任务名称" />
|
</el-form-item>
|
<el-form-item label="负责人"
|
prop="assigneeId">
|
<el-input v-model="taskForm.assigneeId"
|
placeholder="请输入负责人ID" />
|
</el-form-item>
|
<el-form-item label="开始日期"
|
prop="startDate">
|
<el-date-picker v-model="taskForm.startDate"
|
type="date"
|
placeholder="选择开始日期"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="结束日期"
|
prop="endDate">
|
<el-date-picker v-model="taskForm.endDate"
|
type="date"
|
placeholder="选择结束日期"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="优先级"
|
prop="priority">
|
<el-select v-model="taskForm.priority"
|
placeholder="选择优先级">
|
<el-option label="低"
|
value="low" />
|
<el-option label="中"
|
value="medium" />
|
<el-option label="高"
|
value="high" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="进度"
|
prop="progress">
|
<el-input-number v-model="taskForm.progress"
|
:min="0"
|
:max="100"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="描述"
|
prop="description">
|
<el-input v-model="taskForm.description"
|
type="textarea"
|
placeholder="请输入任务描述" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary"
|
@click="submitTaskForm">确定</el-button>
|
<el-button @click="dialogOpen = false">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, watch, onMounted } from "vue";
|
import { ElMessage, ElMessageBox, ElMenu, ElMenuItem } from "element-plus";
|
// import { getProject, addTask, updateTask, deleteTask, deletePhase } from '@/api/oaSystem/projectManagement';
|
|
const props = defineProps({
|
projectId: {
|
type: String,
|
required: true,
|
},
|
});
|
|
const emit = defineEmits(["refresh"]);
|
|
// 组件状态
|
const loading = ref(false);
|
const treeRef = ref();
|
const showContextMenu = ref(false);
|
const contextMenuStyle = ref({});
|
const selectedNode = ref({});
|
const showFilter = ref(false);
|
const dialogOpen = ref(false);
|
const dialogTitle = ref("");
|
const taskFormRef = ref();
|
|
// 筛选参数
|
const filterParams = reactive({
|
status: "",
|
assignee: "",
|
});
|
|
// 任务表单数据
|
const taskForm = reactive({
|
taskId: undefined,
|
taskName: "",
|
description: "",
|
startDate: "",
|
endDate: "",
|
assigneeId: "",
|
assigneeName: "",
|
status: "notStarted",
|
progress: 0,
|
priority: "medium",
|
phaseId: "",
|
projectId: props.projectId,
|
});
|
|
// 表单验证规则
|
const taskRules = {
|
taskName: [
|
{ required: true, message: "任务名称不能为空", trigger: "blur" },
|
{
|
min: 2,
|
max: 50,
|
message: "任务名称长度在 2 到 50 个字符",
|
trigger: "blur",
|
},
|
],
|
startDate: [
|
{ required: true, message: "开始日期不能为空", trigger: "change" },
|
],
|
endDate: [{ required: true, message: "结束日期不能为空", trigger: "change" }],
|
assigneeId: [{ required: true, message: "负责人不能为空", trigger: "blur" }],
|
progress: [
|
{ required: true, message: "进度不能为空", trigger: "blur" },
|
{
|
type: "number",
|
min: 0,
|
max: 100,
|
message: "进度必须在 0 到 100 之间",
|
trigger: "blur",
|
},
|
],
|
};
|
|
// 任务树数据
|
const rawTaskTreeData = ref([]);
|
|
// 模拟任务数据
|
const mockTaskData = {
|
PRJ2023001: [
|
{
|
phaseId: "PHASE001",
|
phaseName: "需求分析",
|
startDate: "2023-11-01",
|
endDate: "2023-11-15",
|
status: "completed",
|
tasks: [
|
{
|
taskId: "TASK001",
|
taskName: "需求调研",
|
description: "调研用户需求和业务流程",
|
startDate: "2023-11-01",
|
endDate: "2023-11-05",
|
assigneeId: "USER001",
|
assigneeName: "张三",
|
status: "completed",
|
progress: 100,
|
priority: "medium",
|
},
|
{
|
taskId: "TASK002",
|
taskName: "需求文档编写",
|
description: "编写详细的需求规格说明书",
|
startDate: "2023-11-06",
|
endDate: "2023-11-15",
|
assigneeId: "USER002",
|
assigneeName: "李四",
|
status: "completed",
|
progress: 100,
|
priority: "high",
|
},
|
],
|
},
|
{
|
phaseId: "PHASE002",
|
phaseName: "系统设计",
|
startDate: "2023-11-16",
|
endDate: "2023-12-10",
|
status: "completed",
|
tasks: [
|
{
|
taskId: "TASK003",
|
taskName: "系统架构设计",
|
description: "设计系统整体架构",
|
startDate: "2023-11-16",
|
endDate: "2023-11-25",
|
assigneeId: "USER003",
|
assigneeName: "王五",
|
status: "completed",
|
progress: 100,
|
priority: "high",
|
},
|
{
|
taskId: "TASK004",
|
taskName: "数据库设计",
|
description: "设计数据库表结构和关系",
|
startDate: "2023-11-26",
|
endDate: "2023-12-10",
|
assigneeId: "USER004",
|
assigneeName: "赵六",
|
status: "completed",
|
progress: 100,
|
priority: "medium",
|
},
|
],
|
},
|
{
|
phaseId: "PHASE003",
|
phaseName: "开发实现",
|
startDate: "2023-12-11",
|
endDate: "2024-01-31",
|
status: "inProgress",
|
tasks: [
|
{
|
taskId: "TASK005",
|
taskName: "前端开发",
|
description: "开发用户界面和交互逻辑",
|
startDate: "2023-12-11",
|
endDate: "2024-01-15",
|
assigneeId: "USER005",
|
assigneeName: "钱七",
|
status: "inProgress",
|
progress: 70,
|
priority: "high",
|
},
|
{
|
taskId: "TASK006",
|
taskName: "后端开发",
|
description: "开发业务逻辑和API接口",
|
startDate: "2023-12-11",
|
endDate: "2024-01-20",
|
assigneeId: "USER006",
|
assigneeName: "孙八",
|
status: "inProgress",
|
progress: 60,
|
priority: "high",
|
},
|
],
|
},
|
],
|
// 默认数据
|
default: [
|
{
|
phaseId: "PHASE_DEFAULT1",
|
phaseName: "准备阶段",
|
startDate: "2023-01-01",
|
endDate: "2023-03-31",
|
status: "completed",
|
tasks: [
|
{
|
taskId: "TASK_DEFAULT1",
|
taskName: "项目启动",
|
description: "召开项目启动会议",
|
startDate: "2023-01-01",
|
endDate: "2023-01-05",
|
assigneeId: "USER_DEFAULT1",
|
assigneeName: "负责人A",
|
status: "completed",
|
progress: 100,
|
priority: "high",
|
},
|
],
|
},
|
{
|
phaseId: "PHASE_DEFAULT2",
|
phaseName: "执行阶段",
|
startDate: "2023-04-01",
|
endDate: "2023-09-30",
|
status: "inProgress",
|
tasks: [
|
{
|
taskId: "TASK_DEFAULT2",
|
taskName: "核心功能开发",
|
description: "开发系统核心功能模块",
|
startDate: "2023-04-01",
|
endDate: "2023-06-30",
|
assigneeId: "USER_DEFAULT2",
|
assigneeName: "负责人B",
|
status: "inProgress",
|
progress: 50,
|
priority: "high",
|
},
|
],
|
},
|
],
|
};
|
|
const taskTreeData = computed(() => {
|
// 应用筛选条件
|
if (!showFilter.value || (!filterParams.status && !filterParams.assignee)) {
|
return rawTaskTreeData.value;
|
}
|
|
// 深拷贝原始数据以避免修改
|
const filteredData = JSON.parse(JSON.stringify(rawTaskTreeData.value));
|
|
// 递归筛选节点
|
const filterNodes = nodes => {
|
const result = [];
|
|
nodes.forEach(node => {
|
// 对于阶段节点，检查其子任务是否符合筛选条件
|
if (node.type === "phase" && node.children) {
|
const filteredChildren = filterNodes(node.children);
|
if (filteredChildren.length > 0) {
|
// 保留至少有一个子任务符合条件的阶段
|
node.children = filteredChildren;
|
result.push(node);
|
}
|
}
|
// 对于任务节点，直接应用筛选条件
|
else if (node.type === "task") {
|
const statusMatch =
|
!filterParams.status || node.status === filterParams.status;
|
const assigneeMatch =
|
!filterParams.assignee ||
|
(node.assigneeName &&
|
node.assigneeName.includes(filterParams.assignee));
|
|
if (statusMatch && assigneeMatch) {
|
result.push(node);
|
}
|
}
|
});
|
|
return result;
|
};
|
|
return filterNodes(filteredData);
|
});
|
|
// 树节点配置
|
const defaultProps = {
|
children: "children",
|
label: data => {
|
if (data.type === "phase") {
|
return `${data.phaseName}`;
|
} else {
|
return `${data.taskName}`;
|
}
|
},
|
};
|
|
// 加载任务树数据
|
const loadTaskTree = async () => {
|
loading.value = true;
|
// try {
|
// const { data } = await getProject(props.projectId);
|
// rawTaskTreeData.value = buildTaskTree(data.phases || []);
|
// } catch (error) {
|
// ElMessage.error('加载任务树失败');
|
// console.error('加载任务树失败:', error);
|
// } finally {
|
// loading.value = false;
|
// }
|
try {
|
// 模拟网络延迟
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
// 使用模拟数据替代API请求
|
const phases = mockTaskData[props.projectId] || mockTaskData.default;
|
rawTaskTreeData.value = buildTaskTree(phases);
|
} catch (error) {
|
ElMessage.error("加载任务树失败");
|
console.error("加载任务树失败:", error);
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 构建任务树
|
const buildTaskTree = phases => {
|
return phases.map(phase => ({
|
nodeId: phase.phaseId,
|
phaseId: phase.phaseId,
|
phaseName: phase.phaseName,
|
type: "phase",
|
children: (phase.tasks || []).map(task => ({
|
nodeId: task.taskId,
|
taskId: task.taskId,
|
taskName: task.taskName,
|
description: task.description,
|
startDate: task.startDate,
|
endDate: task.endDate,
|
assigneeId: task.assigneeId,
|
assigneeName: task.assigneeName,
|
status: task.status,
|
progress: task.progress,
|
priority: task.priority,
|
phaseId: task.phaseId,
|
projectId: props.projectId,
|
type: "task",
|
})),
|
}));
|
};
|
|
// 格式化日期范围
|
const formatDateRange = (startDate, endDate) => {
|
if (!startDate || !endDate) return "";
|
return `${startDate} - ${endDate}`;
|
};
|
|
// 刷新树
|
const refreshTree = () => {
|
loadTaskTree();
|
// 通知父组件刷新数据
|
emit("refresh");
|
};
|
|
// 切换筛选面板
|
const toggleFilter = () => {
|
showFilter.value = !showFilter.value;
|
};
|
|
// 应用筛选
|
const filterTree = () => {
|
// 筛选逻辑已经在computed中实现
|
};
|
|
// 重置筛选
|
const resetFilter = () => {
|
filterParams.status = "";
|
filterParams.assignee = "";
|
};
|
|
// 处理节点点击
|
const handleNodeClick = (data, node) => {
|
// 切换展开/收起状态
|
if (data.type === "phase") {
|
node.expanded = !node.expanded;
|
}
|
};
|
|
// 处理右键菜单
|
const handleContextMenu = (event, data) => {
|
event.preventDefault();
|
selectedNode.value = data;
|
contextMenuStyle.value = {
|
position: "fixed",
|
left: `${event.clientX}px`,
|
top: `${event.clientY}px`,
|
zIndex: 1000,
|
};
|
showContextMenu.value = true;
|
};
|
|
// 处理右键菜单选择
|
const handleContextMenuSelect = index => {
|
showContextMenu.value = false;
|
switch (index) {
|
case "edit":
|
if (selectedNode.value.type === "task") {
|
handleEditTask(selectedNode.value);
|
}
|
break;
|
case "addTask":
|
if (selectedNode.value.type === "phase") {
|
handleAddTaskUnderPhase(selectedNode.value);
|
}
|
break;
|
case "delete":
|
handleDeleteNode(selectedNode.value);
|
break;
|
case "expandAll":
|
treeRef.value?.expandAll();
|
break;
|
case "collapseAll":
|
treeRef.value?.collapseAll();
|
break;
|
}
|
};
|
|
// 添加任务
|
const handleAddTask = () => {
|
resetTaskForm();
|
dialogTitle.value = "添加任务";
|
dialogOpen.value = true;
|
};
|
|
// 在指定阶段下添加任务
|
const handleAddTaskUnderPhase = phase => {
|
resetTaskForm();
|
taskForm.phaseId = phase.phaseId;
|
dialogTitle.value = "添加子任务";
|
dialogOpen.value = true;
|
};
|
|
// 编辑任务
|
const handleEditTask = task => {
|
resetTaskForm();
|
Object.assign(taskForm, { ...task });
|
dialogTitle.value = "编辑任务";
|
dialogOpen.value = true;
|
};
|
|
// 删除节点
|
const handleDeleteNode = async node => {
|
const confirmMessage =
|
node.type === "phase"
|
? `确定要删除阶段 "${node.phaseName}" 及其所有子任务吗？`
|
: `确定要删除任务 "${node.taskName}" 吗？`;
|
|
await ElMessageBox.confirm(confirmMessage, "确认操作", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).catch(() => {
|
throw new Error("取消删除");
|
});
|
|
try {
|
if (node.type === "phase") {
|
await deletePhase(node.phaseId);
|
} else {
|
await deleteTask(node.taskId);
|
}
|
ElMessage.success("删除成功");
|
refreshTree();
|
} catch (error) {
|
if (error.message !== "取消删除") {
|
ElMessage.error("删除失败");
|
console.error("删除失败:", error);
|
}
|
}
|
};
|
|
// 重置任务表单
|
const resetTaskForm = () => {
|
taskForm.taskId = undefined;
|
taskForm.taskName = "";
|
taskForm.description = "";
|
taskForm.startDate = "";
|
taskForm.endDate = "";
|
taskForm.assigneeId = "";
|
taskForm.assigneeName = "";
|
taskForm.status = "notStarted";
|
taskForm.progress = 0;
|
taskForm.priority = "medium";
|
taskForm.phaseId = "";
|
taskForm.projectId = props.projectId;
|
|
if (taskFormRef.value) {
|
taskFormRef.value.resetFields();
|
}
|
};
|
|
// 提交任务表单
|
const submitTaskForm = async () => {
|
try {
|
await taskFormRef.value.validate();
|
|
if (taskForm.taskId) {
|
await updateTask(taskForm);
|
ElMessage.success("修改任务成功");
|
} else {
|
await addTask(taskForm);
|
ElMessage.success("添加任务成功");
|
}
|
|
dialogOpen.value = false;
|
refreshTree();
|
} catch (error) {
|
console.error("提交表单失败:", error);
|
}
|
};
|
|
// 点击其他区域关闭右键菜单
|
document.addEventListener("click", () => {
|
if (showContextMenu.value) {
|
showContextMenu.value = false;
|
}
|
});
|
|
// 监听项目ID变化
|
watch(
|
() => props.projectId,
|
newProjectId => {
|
if (newProjectId) {
|
loadTaskTree();
|
}
|
}
|
);
|
|
// 初始化
|
onMounted(() => {
|
loadTaskTree();
|
});
|
</script>
|
|
<style scoped>
|
.task-tree-container {
|
padding: 10px;
|
}
|
|
.tree-actions {
|
display: flex;
|
gap: 10px;
|
align-items: center;
|
}
|
|
.filter-section {
|
background: #f5f7fa;
|
padding: 10px;
|
border-radius: 4px;
|
}
|
|
.tree-content {
|
background: #fff;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
padding: 10px;
|
max-height: 600px;
|
overflow-y: auto;
|
}
|
|
.tree-node-content {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 5px 0;
|
min-height: 40px;
|
}
|
|
.phase-node {
|
font-weight: bold;
|
color: #409eff;
|
}
|
|
.task-node {
|
color: #606266;
|
}
|
|
.node-icon {
|
display: flex;
|
align-items: center;
|
width: 20px;
|
}
|
|
.node-info {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.node-title {
|
font-weight: 500;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
margin-bottom: 2px;
|
}
|
|
.overdue-title {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
|
.priority-tag {
|
background: #f56c6c;
|
color: white;
|
font-size: 10px;
|
padding: 1px 4px;
|
border-radius: 2px;
|
margin-left: 5px;
|
}
|
|
.priority-tag.medium {
|
background: #e6a23c;
|
}
|
|
.node-description {
|
font-size: 12px;
|
color: #909399;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.task-meta {
|
display: flex;
|
gap: 15px;
|
font-size: 12px;
|
color: #909399;
|
margin-top: 2px;
|
}
|
|
.meta-item {
|
display: flex;
|
align-items: center;
|
gap: 3px;
|
}
|
|
.task-progress {
|
width: 120px;
|
margin: 0 10px;
|
}
|
|
.node-actions {
|
display: flex;
|
gap: 5px;
|
opacity: 0;
|
transition: opacity 0.3s;
|
}
|
|
.tree-node-content:hover .node-actions {
|
opacity: 1;
|
}
|
|
.context-menu {
|
background: white;
|
border: 1px solid #ebeef5;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
border-radius: 4px;
|
}
|
|
.context-menu .el-menu {
|
min-width: 120px;
|
border: none;
|
}
|
|
.context-menu .el-menu-item {
|
padding: 0 15px;
|
height: 36px;
|
line-height: 36px;
|
}
|
|
.context-menu .el-menu-item:hover {
|
background-color: #f5f7fa;
|
}
|
|
.text-gray-400 {
|
color: #c0c4cc;
|
}
|
</style>
|
