github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-23 15:52:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 格式化表格组件代码

Browse Source
This commit is contained in:
奔跑的面条 2023-08-11 22:35:44 +08:00
parent 5122ecf862
commit efbeeff0c7
4 changed files with 216 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/packages/components/Tables/Tables/TablesBasic/config.ts
View File

@ -5,26 +5,26 @@ import { chartInitConfig } from '@/settings/designSetting'
import { TablesBasicConfig } from './index'
import dataJson from './data.json'
const {dimensions,source} = dataJson
const { dimensions, source } = dataJson
export const option = {
dataset:{dimensions,source},
pagination:{
dataset: { dimensions, source },
pagination: {
page: 1,
pageSize:5
pageSize: 5
},
align:'center',
style:{
border:'on',
singleColumn:'off',
singleLine:'off',
bottomBordered:'on',
striped:'on',
fontSize:16,
borderWidth:0,
borderColor:'black',
borderStyle:'solid'
align: 'center',
style: {
border: 'on',
singleColumn: 'off',
singleLine: 'off',
bottomBordered: 'on',
striped: 'on',
fontSize: 16,
borderWidth: 0,
borderColor: 'black',
borderStyle: 'solid'
},
inputShow:"none"
inputShow: 'none'
}
export default class Config extends PublicConfigClass implements CreateComponentType {

161
src/packages/components/Tables/Tables/TablesBasic/config.vue
View File

@ -1,117 +1,123 @@
<template>
<collapse-item name="表格设置" :expanded="true">
<setting-item-box :alone="true" name="对齐方式">
<setting-item :alone="true">
<n-select v-model:value="optionData.align" size="small"
:options="[
{label:'靠左',value:'left'},{label:'居中',value:'center'},{label:'靠右',value:'right'}
]" />
<setting-item :alone="true">
<n-select
v-model:value="optionData.align"
size="small"
:options="[
{ label: '靠左', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '靠右', value: 'right' }
]"
/>
</setting-item>
</setting-item-box>
<setting-item-box :alone="false" name="分页设置">
<setting-item name="默认页码" :alone="true">
<setting-item name="默认页码" :alone="true">
<n-input-number v-model:value="optionData.pagination.page" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
<setting-item name="分页" :alone="true">
<n-select v-model:value="optionData.pagination.pageSize" size="small"
:options="page" />
<setting-item name="分页" :alone="true">
<n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
</setting-item>
</setting-item-box>
<setting-item-box :alone="false" name="表格数据">
<SettingItem name="表头名称" class="form_name">
<div style="width: 260px">
<n-input v-model:value="header" size="small" placeholder="表头数据(英文','分割)"></n-input>
<n-input v-model:value="header" size="small" placeholder="表头数据(英文','分割)"></n-input>
</div>
</SettingItem>
</setting-item-box>
<setting-item-box :alone="false" name="表格样式">
<SettingItem name="显示边框" :alone="true">
<n-select v-model:value="(optionData as any).style.border" size="small"
:options="borderFlag" />
<n-select v-model:value="(optionData as any).style.border" size="small" :options="borderFlag" />
</SettingItem>
<SettingItem name="底部边框" :alone="true">
<n-select v-model:value="(optionData as any).style.bottomBordered" size="small"
:options="bottom_borderedFlag" />
<n-select
v-model:value="(optionData as any).style.bottomBordered"
size="small"
:options="bottom_borderedFlag"
/>
</SettingItem>
<SettingItem name="列分割线" :alone="true">
<n-select v-model:value="(optionData as any).style.singleLine" size="small"
:options="columnFlag" />
<n-select v-model:value="(optionData as any).style.singleLine" size="small" :options="columnFlag" />
</SettingItem>
<SettingItem name="行分割线" :alone="true">
<n-select v-model:value="(optionData as any).style.singleColumn" size="small"
:options="lineFlag" />
<n-select v-model:value="(optionData as any).style.singleColumn" size="small" :options="lineFlag" />
</SettingItem>
<SettingItem name="斑马条纹" :alone="true">
<n-select v-model:value="(optionData as any).style.striped" size="small"
:options="stripedFlag" />
<n-select v-model:value="(optionData as any).style.striped" size="small" :options="stripedFlag" />
</SettingItem>
<setting-item name="字体大小" :alone="true">
<n-input-number v-model:value="optionData.style.fontSize" :min="12" size="small" placeholder="字体大小"></n-input-number>
<setting-item name="字体大小" :alone="true">
<n-input-number
v-model:value="optionData.style.fontSize"
:min="12"
size="small"
placeholder="字体大小"
></n-input-number>
</setting-item>
<setting-item name="边框宽度" :alone="true">
<n-input-number v-model:value="optionData.style.borderWidth" :min="0" size="small" placeholder="字体大小"></n-input-number>
<setting-item name="边框宽度" :alone="true">
<n-input-number
v-model:value="optionData.style.borderWidth"
:min="0"
size="small"
placeholder="字体大小"
></n-input-number>
</setting-item>
<setting-item name="边框颜色" :alone="true">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.style.borderColor"
></n-color-picker>
<setting-item name="边框颜色" :alone="true">
<n-color-picker size="small" :modes="['rgb']" v-model:value="optionData.style.borderColor"></n-color-picker>
</setting-item>
<setting-item name="边框样式" :alone="true">
<n-select v-model:value="optionData.style.borderStyle" size="small"
:options="borderStyleFlag" />
<setting-item name="边框样式" :alone="true">
<n-select v-model:value="optionData.style.borderStyle" size="small" :options="borderStyleFlag" />
</setting-item>
<SettingItem name="表格搜索" :alone="true">
<n-select v-model:value="optionData.inputShow" size="small"
:options="inputSelect" />
<n-select v-model:value="optionData.inputShow" size="small" :options="inputSelect" />
</SettingItem>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType,watch,ref } from 'vue';
import { option } from './config';
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
import { PropType, watch, ref } from 'vue'
import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const page = [
{label:'2',value:2},
{label:'5',value:5},
{label:'10',value:10},
{label:'15',value:15},
{label:'30',value:30}
{ label: '2', value: 2 },
{ label: '5', value: 5 },
{ label: '10', value: 10 },
{ label: '15', value: 15 },
{ label: '30', value: 30 }
]
const borderFlag = [
{label:'显示',value:'on'},
{label:'不显示',value:'off'}
{ label: '显示', value: 'on' },
{ label: '不显示', value: 'off' }
]
const columnFlag = [
{label:'显示',value:'off'},
{label:'不显示',value:'on'}
{ label: '显示', value: 'off' },
{ label: '不显示', value: 'on' }
]
const lineFlag = [
{label:'显示',value:'off'},
{label:'不显示',value:'on'}
{ label: '显示', value: 'off' },
{ label: '不显示', value: 'on' }
]
const bottom_borderedFlag = [
{label:'显示',value:'on'},
{label:'不显示',value:'off'}
{ label: '显示', value: 'on' },
{ label: '不显示', value: 'off' }
]
const stripedFlag = [
{label:'显示',value:'on'},
{label:'不显示',value:'off'}
{ label: '显示', value: 'on' },
{ label: '不显示', value: 'off' }
]
const borderStyleFlag = [
{label:'实线边框',value:'solid'},
{label:'虚线边框',value:'dashed'},
{label:'点状边框',value:'dotted'},
{label:'双线边框',value:'double'}
{ label: '实线边框', value: 'solid' },
{ label: '虚线边框', value: 'dashed' },
{ label: '点状边框', value: 'dotted' },
{ label: '双线边框', value: 'double' }
]
const inputSelect = [
{label:'停用',value:'none'},
{label:'启用',value:'flex'}
{ label: '停用', value: 'none' },
{ label: '启用', value: 'flex' }
]
const props = defineProps({
optionData: {
@ -120,37 +126,36 @@ const props = defineProps({
}
})
const header = ref();
const header = ref()
const median = ref<string[]>([])
props.optionData.dataset.dimensions.forEach(item=>{
median.value.push(item.title);
props.optionData.dataset.dimensions.forEach(item => {
median.value.push(item.title)
})
//转string
watch(
() => props.optionData,
() => {
median.value = [];
props.optionData.dataset.dimensions.forEach(item=>{
median.value.push(item.title);
})
header.value = median.value.toString()
},
{
deep: false,
immediate: true
}
() => props.optionData,
() => {
median.value = []
props.optionData.dataset.dimensions.forEach(item => {
median.value.push(item.title)
})
header.value = median.value.toString()
},
{
deep: false,
immediate: true
}
)
//更新columns
watch([header], ([headerNew], [headerOld]) => {
if (headerNew !== headerOld) {
headerNew.split(',').forEach((item:string,index:number)=>{
if(index+1 <= props.optionData.dataset.dimensions.length){
headerNew.split(',').forEach((item: string, index: number) => {
if (index + 1 <= props.optionData.dataset.dimensions.length) {
props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
}
})
}
})
</script>

118
src/packages/components/Tables/Tables/TablesBasic/data.json
View File

@ -1,60 +1,60 @@
{
"dimensions":[
{
"title": "产品名称",
"key": "productName"
},
{
"title": "产品销量（万）",
"key": "totalSum"
},
{
"title": "销售额（万）",
"key": "totalAmount"
}
],
"source":[
{
"key": 0,
"productName": "产品A1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 1,
"productName": "产品B1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 2,
"productName": "产品C1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 3,
"productName": "产品D1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 4,
"productName": "产品A2",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 5,
"productName": "产品D2",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 6,
"productName": "产品A3",
"totalSum": 10,
"totalAmount": 10
}
]
}
"dimensions": [
{
"title": "产品名称",
"key": "productName"
},
{
"title": "产品销量（万）",
"key": "totalSum"
},
{
"title": "销售额（万）",
"key": "totalAmount"
}
],
"source": [
{
"key": 0,
"productName": "产品A1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 1,
"productName": "产品B1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 2,
"productName": "产品C1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 3,
"productName": "产品D1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 4,
"productName": "产品A2",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 5,
"productName": "产品D2",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 6,
"productName": "产品A3",
"totalSum": 10,
"totalAmount": 10
}
]
}

112
src/packages/components/Tables/Tables/TablesBasic/index.vue
View File

@ -1,33 +1,41 @@
<template>
<div class="go-tables-basic">
<n-input v-model:value="inputData"
placeholder="请输入信息"
:style="`display:${option.inputShow}`"
style="margin-bottom: 5px;float:right;width: 240px" />
<n-data-table :style="`
width:${w}px;
height:${h}px;
font-size:${option.style.fontSize}px;
border-width:${option.style.border === 'on'?option.style.borderWidth:0}px;
border-color:${option.style.borderColor};
border-style:${option.style.borderStyle}`"
:bordered="option.style.border === 'on'"
:single-column="option.style.singleColumn === 'on'"
:single-line="option.style.singleLine === 'on'"
:bottom-bordered="option.style.bottomBordered === 'on'"
:striped="option.style.striped === 'on'"
:max-height="h"
size="small"
:columns="option.dataset.dimensions"
:data="filterData"
:pagination="pagination"
/>
<n-input
v-model:value="inputData"
placeholder="请输入信息"
:style="`display: ${inputShow}`"
style="margin-bottom: 5px; float: right; width: 240px"
>
<template #prefix>
<n-icon :component="SearchIcon" />
</template>
</n-input>
<n-data-table
:style="`
width: ${w}px;
height: ${h}px;
font-size: ${option.style.fontSize}px;
border-width: ${option.style.border === 'on' ? option.style.borderWidth : 0}px;
border-color: ${option.style.borderColor};
border-style: ${option.style.borderStyle}`"
:bordered="option.style.border === 'on'"
:single-column="option.style.singleColumn === 'on'"
:single-line="option.style.singleLine === 'on'"
:bottom-bordered="option.style.bottomBordered === 'on'"
:striped="option.style.striped === 'on'"
:max-height="h"
size="small"
:columns="option.dataset.dimensions"
:data="filterData"
:pagination="pagination"
/>
</div>
</template>
<script setup lang="ts">
import { computed,PropType, toRefs, watch, reactive,ref } from 'vue';
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { icon } from '@/plugins'
const props = defineProps({
chartConfig: {
@ -36,23 +44,21 @@ const props = defineProps({
}
})
const { SearchIcon } = icon.ionicons5
//查询字段
const inputData = ref('');
const inputData = ref('')
//前台过滤
const filterData = computed(()=>{
return option?.dataset?.source?.filter((item:any)=>{
return Object.values(item).some(val=>{
return String(val).toLowerCase().includes(inputData.value.toLowerCase())
})
const filterData = computed(() => {
return option?.dataset?.source?.filter((item: any) => {
return Object.values(item).some(val => {
return String(val).toLowerCase().includes(inputData.value.toLowerCase())
})
})
})
const {
align,
pagination
} = toRefs(
props.chartConfig.option
)
const { align, pagination, inputShow } = toRefs(props.chartConfig.option)
pagination.value.onChange = (page: number) => {
pagination.value.page = page
}
@ -60,32 +66,30 @@ pagination.value.onChange = (page: number) => {
const { w, h } = toRefs(props.chartConfig.attr)
const option = reactive({
dataset : props.chartConfig.option.dataset,
style : props.chartConfig.option.style,
inputShow : props.chartConfig.option.inputShow
dataset: props.chartConfig.option.dataset,
style: props.chartConfig.option.style
})
watch(
() => props.chartConfig.option.dataset,
(newData:any)=>{
option.dataset = newData;
option?.dataset?.dimensions?.forEach((header: any) => {
//对齐方式更新
header.align = align.value;
});
},
{
immediate:true,
deep:true
}
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData
option?.dataset?.dimensions?.forEach((header: any) => {
header.align = align.value
})
},
{
immediate: true,
deep: true
}
)
</script>
<style lang="scss" scoped>
@include go('tables-basic') {
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-end;
}
</style>