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

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

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

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

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

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

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