mirror of https://gitee.com/xiaonuobase/snowy
【新增】数据列表组件：XnDataList
这么诚实
parent
58eaf57633
commit
17db535cbf
|
|
@ -0,0 +1,67 @@
|
|||
# 小诺数据列表的组件
|
||||
|
||||
## 说明
|
||||
|
||||
### props定义
|
||||
|
||||
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||
|----|------------|---------|-------|------------------|
|
||||
| 1 | dataSource | Array | 数据源 | 见：dataSource字段定义 |
|
||||
| 2 | page | Object | 分页 | 见：page字段定义 |
|
||||
| 3 | actions | Array | 操作数组 | 见：action字段定义 |
|
||||
| 4 | loading | Boolean | 加载中提示 | - |
|
||||
|
||||
> dataSource字段定义
|
||||
|
||||
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||
|----|--------------|--------|-----------------|-------------------|
|
||||
| 1 | title | String | 标题 | 设备编码 |
|
||||
| 2 | descriptions | Array | 描述 | 见：description字段定义 |
|
||||
| 3 | contents | Array | 内容 | 见：content字段定义 |
|
||||
| 4 | record | Object | 数据记录，emit触发回调参数 | |
|
||||
|
||||
> description字段定义
|
||||
|
||||
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||
|----|---------|--------|----|------|
|
||||
| 1 | title | String | 标题 | 设备名称 |
|
||||
| 2 | content | Object | 内容 | 测试设备 |
|
||||
|
||||
> content字段定义
|
||||
|
||||
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||
|----|---------|--------|----|---------------------|
|
||||
| 1 | title | String | 标题 | 数据更新时间 |
|
||||
| 2 | content | Object | 内容 | 2023-11-14 09:00:00 |
|
||||
|
||||
> action字段定义
|
||||
|
||||
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||
|----|-------|--------|----|---------|
|
||||
| 1 | key | String | 键 | setting |
|
||||
| 2 | label | String | 标签 | 所属产品 |
|
||||
| 3 | icon | String | 图标 | setting |
|
||||
| 4 | color | String | 颜色 | red |
|
||||
|
||||
> page字段定义
|
||||
|
||||
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||
|----|---------|--------|------|----|
|
||||
| 1 | current | Number | 当前页 | 1 |
|
||||
| 2 | size | Number | 每页大小 | 6 |
|
||||
| 3 | total | Number | 总数 | 0 |
|
||||
|
||||
### emits定义
|
||||
|
||||
| 序号 | 方法名 | 参数类型 | 参数示例 |
|
||||
|----|-------------|--------|-----------------------------|
|
||||
| 1 | title | Object | {record: {...}} |
|
||||
| 1 | action | Object | {key: 'edit', record:{...}} |
|
||||
| 2 | page-change | Number | 1 |
|
||||
|
||||
### slots定义
|
||||
|
||||
| 序号 | 名称 | 说明 | 示例 |
|
||||
|----|--------------|--------|----|
|
||||
| 1 | title-prefix | 标题前缀插槽 | - |
|
||||
| 2 | title-suffix | 内容后缀插槽 | - |
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<a-list item-layout="vertical" :data-source="props.dataSource" :pagination="pagination" :loading="loading">
|
||||
<template #renderItem="{ item, index }">
|
||||
<a-list-item :key="index" class="xn-data-list-item">
|
||||
<a-list-item-meta class="xn-data-list-item-meta">
|
||||
<template #avatar>
|
||||
<a-avatar shape="square" :size="50">{{ index + 1 }}</a-avatar>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="xn-data-list-item-meta-title">
|
||||
<div class="xn-data-list-item-meta-title-prefix">
|
||||
<slot name="title-prefix" :record="item.record"></slot>
|
||||
</div>
|
||||
<a @click="clickTitle(item)">{{ item.title }}</a>
|
||||
<div class="xn-data-list-item-meta-title-suffix">
|
||||
<slot name="title-suffix" :record="item.record"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<a-tooltip placement="top" v-for="description in item.descriptions">
|
||||
<template #title>
|
||||
<span>{{ description.title }}</span>
|
||||
</template>
|
||||
<a-tag>{{ description.content }}</a-tag>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<div class="xn-content" v-if="item.contents">
|
||||
<div class="xn-statistics" v-for="content in item.contents">
|
||||
<div class="xn-statistic-title">
|
||||
{{ content.title }}
|
||||
</div>
|
||||
<div class="xn-statistic-content">
|
||||
<span>{{ content.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #extra v-if="item.extra">
|
||||
<div class="xn-extra">
|
||||
<div class="xn-statistics">
|
||||
<div class="xn-statistic-title">{{ item.extra.title }}</div>
|
||||
<div class="xn-statistic-content">
|
||||
<span>{{ item.extra.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<a-button type="link" @click="doAction(key, item)"
|
||||
v-for="{ key, label, icon, color} in props.actions">
|
||||
<template #icon>
|
||||
<component :is="icon" :style="{color:color}"/>
|
||||
</template>
|
||||
{{ label }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</template>
|
||||
|
||||
<script setup name="xnDataList">
|
||||
import {message} from "ant-design-vue";
|
||||
|
||||
const props = defineProps({
|
||||
// 数据源
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 分页
|
||||
page: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// 动作
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['title', 'action', 'page-change'])
|
||||
|
||||
// 分页参数
|
||||
const {current, size, total} = toRefs(props.page)
|
||||
const pagination = reactive({
|
||||
onChange: current => {
|
||||
emit('page-change', current)
|
||||
},
|
||||
current: current,
|
||||
pageSize: size,
|
||||
total: total
|
||||
})
|
||||
|
||||
// 出发 点击标题
|
||||
const clickTitle = (item) => {
|
||||
if (!item.record) {
|
||||
message.error('记录参数[record]错误')
|
||||
return
|
||||
}
|
||||
emit('title', {record: item.record})
|
||||
}
|
||||
// 触发 action
|
||||
const doAction = (key, item) => {
|
||||
if (!item.record) {
|
||||
message.error('记录参数[record]错误')
|
||||
return
|
||||
}
|
||||
emit('action', {key, record: item.record})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.xn-data-list-item {
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 12px 15px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.xn-data-list-item-meta {
|
||||
align-items: center;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.xn-data-list-item-meta-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.xn-data-list-item-meta-title-prefix {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
transition: all 0.3s;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.xn-data-list-item-meta-title-suffix {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xn-content {
|
||||
//box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.xn-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.xn-statistics {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 5px 20px;
|
||||
padding: 10px;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5715;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.xn-statistic-title {
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.xn-statistic-content {
|
||||
color: var(--heading-color);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue