cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

开源软件列表查询及批量校验相关问题修复

Browse Source
This commit is contained in:
付民康
2025-03-15 20:32:13 +08:00
parent c57c932e45
commit 236942a229
7 changed files with 1234 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/TableSetting/index.vue
View File

@@ -1,43 +1,102 @@
<template>
<d-dropdown>
<d-button class="output-btn" icon="icon-form-settings" variant="text">设置</d-button>
<template #menu>
<!-- <ul class="list-menu">-->
<!-- <d-dropdown :position="position" :offset="0">-->
<!--&lt;!&ndash; <li class="menu-item">&ndash;&gt;-->
<!--&lt;!&ndash; Item 1&ndash;&gt;-->
<!--&lt;!&ndash; <i class="icon icon-chevron-right"></i>&ndash;&gt;-->
<!--&lt;!&ndash; </li>&ndash;&gt;-->
<!--&lt;!&ndash; <template #menu>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <ul class="list-menu">&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <d-dropdown :position="position" :offset="0" >&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <li class="menu-item">&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; Item 1-1&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <i class="icon icon-chevron-right"></i>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; </li>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <template #menu>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <ul class="list-menu">&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <li class="menu-item">Item 1-1-1</li>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <li class="menu-item">Item 1-1-2</li>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <li class="menu-item">Item 1-1-3</li>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; </ul>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; </template>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; </d-dropdown>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <li class="menu-item">Item 1-2</li>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; </ul>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash; </template>&ndash;&gt;-->
<!-- </d-dropdown>-->
<!-- <li class="menu-item">Item 2</li>-->
<!-- </ul>-->
</template>
</d-dropdown>
<div class="TableSetting">
<d-button @click.stop="toggleColumnList" class="output-btn" icon="icon-form-settings" variant="text">设置</d-button>
<!-- 多选列表 -->
<div v-if="showColumnList" class="column-list">
<div class="column-list-header">
<span class="title1">展示列设置</span>
<a class="title2">恢复默认</a>
</div>
<div class="column-list-body">
<d-checkbox
v-for="column in columns"
:key="column.key"
v-model="column.visible"
>
{{ column.label }}
</d-checkbox>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref, defineProps, defineEmits } from 'vue';
const position = ref(['right-start', 'right-end']);
const props = defineProps({
columns: {
type: Array,
required: true,
},
showColumnList: {
type: Boolean,
required: true,
},
});
// 定义 emit，用于更新 showColumnList
const emits = defineEmits(['update:show-column-list']);
// 切换多选列表的显示
const toggleColumnList = () => {
const newValue = !props.showColumnList;
emits('update:show-column-list', newValue); // 触发事件，更新父组件的 showColumnList
};
</script>
<style lang="scss" scoped>
.TableSetting {
display: inline-block;
position: relative;
//padding: 20px;
}
.column-list {
position: absolute;
top: 40px;
left: -222px;
width: 280px;
z-index: 1000;
border-radius: 4px;
background: #FFFFFF;
box-shadow: 0px 2px 9px 0px #252B3A28;
padding: 20px;
}
.column-list-header {
display: flex;
justify-content: space-between;
.title1 {
color: #191919;
font-family: 鸿蒙黑体;
font-weight: SemiBold;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.title2 {
color: #5E7CE0;
font-family: 苹方-简;
font-weight: regular;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
.column-list-body {
margin-top: 20px;
//padding: 10px;
> div {
margin-bottom: 8px;
}
}
.d-checkbox {
display: block;
margin-bottom: 8px;
}
</style>