通用评估系统（五）- 前端部分总体说明

通用评估系统（五）- 前端部分总体说明

相关链接

• Gitee地址
• 通用评估系统（一）- 介绍
• 通用评估系统（二）- 原型设计
• 通用评估系统（三）- 前端部分
• 通用评估系统（四）- 前端部分计算脚本编辑组件

文档说明

本节中说明前端总体显示相关信息。具体数据交互待后端开发时同步进行。

目录结构

实际显示效果

全局搜索

评估模型管理

数据模型管理

指标体系管理

评估任务管理

部分代码说明

评估模型管理组件

<!--* @Description: 模型管理* @Author: wang keju* @Email: git config user.email* @Date: 2025-02-14 05:48:16* @LastEditTime: 2025-02-17 07:02:36* @LastEditors: wang keju
-->
<script lang="ts" setup>
import { ref, h, computed, watch } from "vue";
import { useRoute } from "vue-router";import ContentLayout from '@/layout/ContentLayout.vue';
import Icon from "@/components/Icon/Icon.vue";
import Empty from "@/components/Empty/Empty.vue";import TreeDiagram from "@/components/TreeDiagram";const route = useRoute();
const id = computed(() => route.params['id']);const breadcrumbs = ref<{[key: string]: any;}[]>([{ href: "/model", breadcrumbName: "模型管理" },{ href: "/model/details", breadcrumbName: "模型详情" },
]);
const title = ref<string>("XXXXX评估模型");watch(id, () => {console.log(id.value)
});const indicatorSys = ref<string>("");</script><template><ContentLayout :title="title" name="评估模型" :breadcrumb="breadcrumbs"><template #sidebar><span class="add-btn"><Icon name="add" :size="18" />新建模型</span><div class="search-container"><AInput :prefix="h(Icon, { name: 'sousuo', size: 18 })" placeholder="请输入模型名称" /></div><div style="padding: 0 12px;"><ATabs style="text-align: center;"><ATabPane key="已发布" tab="已发布"></ATabPane><ATabPane key="未发布" tab="未发布"></ATabPane></ATabs><AList></AList></div></template><div class="main"><template v-if="!title"><Empty /></template><template v-else><TreeDiagram /></template></div></ContentLayout>
</template><style lang="less" scoped>
.add-btn {display: inline-block;height: 32px;margin-bottom: 12px;color: #666;line-height: 32px;font-weight: bold;cursor: pointer;&:hover {color: #004CFE;}
}
.search-container {box-sizing: border-box;
}
.main {height: 100%;// margin: -24px;// padding: 24px 24px 0;
}
</style>

全局搜索组件

<!--* @Description: 全局搜索* @Author: wang keju* @Email: git config user.email* @Date: 2025-02-15 11:58:46* @LastEditTime: 2025-02-17 06:47:52* @LastEditors: wang keju
-->
<script lang="ts" setup>
import { ref } from "vue";import Icon from "@/components/Icon/Icon.vue";
import { SearchOutlined } from "@ant-design/icons-vue";export type GlobalSearchExpose = {open: () => void;close: () => void;
}const visible = ref<boolean>(false);
const open = () => visible.value = true;
const close = () => visible.value = false;
const activeKey = ref<string>("全部");defineExpose<GlobalSearchExpose>({ open, close });
</script><template><AModal v-model:open="visible" title="快速搜索" :width="960" :footer="null"><AInput placeholder="请输入关键词"><template #prefix><SearchOutlined /></template></AInput><ATabs v-model:activeKey="activeKey"><ATabPane key="全部" tab="全部">123</ATabPane><ATabPane key="模型"><template #tab><Icon name="pinggumoxing" style="margin-right: 4px;" />评估模型</template></ATabPane><ATabPane key="数据"><template #tab><Icon name="shujuguanli" style="margin-right: 4px;" />数据管理</template></ATabPane><ATabPane key="指标体系"><template #tab><Icon name="zhibiaotixi" style="margin-right: 4px;" />指标体系</template></ATabPane><ATabPane key="评估任务"><template #tab><Icon name="pinggurenwu" style="margin-right: 4px;" />评估任务</template></ATabPane><ATabPane key="评估任务"><template #tab><Icon name="lishixiao" style="margin-right: 4px;" />操作历史</template></ATabPane></ATabs><div class="search-content"></div></AModal>
</template><style lang="less" scoped>
.search-content {height: 400px;
}
</style>

总结

后续具体的页面详细及数据交互，在进行后端开发时同步进行。

相关链接

• Gitee地址
• 通用评估系统（一）- 介绍
• 通用评估系统（二）- 原型设计
• 通用评估系统（三）- 前端部分
• 通用评估系统（四）- 前端部分计算脚本编辑组件