!192 新增分页表格组件

Merge pull request !192 from 阿飞/dev2

src/packages/components/Tables/Tables/TablesBasic/config.ts

@@ -0,0 +1,35 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { TablesBasicConfig } from './index'
+import dataJson from './data.json'
+
+const {dimensions,source} = dataJson
+export const option = {
+  dataset:{dimensions,source},
+  pagination:{
+    page: 1,
+    pageSize:5
+  },
+  align:'center',
+  style:{
+    border:'on',
+    singleColumn:'off',
+    singleLine:'off',
+    bottomBordered:'on',
+    striped:'on',
+    fontSize:16,
+    borderWidth:0,
+    borderColor:'black',
+    borderStyle:'solid'
+  },
+  inputShow:"none"
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TablesBasicConfig.key
+  public attr = { ...chartInitConfig, w: 600, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(TablesBasicConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Tables/Tables/TablesBasic/config.vue

@@ -0,0 +1,156 @@
+<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>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="分页设置">
+      <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>
+    </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>
+        </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" />
+      </SettingItem>
+      <SettingItem name="底部边框" :alone="true">
+        <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" />
+      </SettingItem>
+      <SettingItem name="行分割线" :alone="true">
+        <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" />
+      </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>
+      <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>
+      <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" />
+      </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';
+
+const page = [
+  {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'}
+]
+const columnFlag = [
+  {label:'显示',value:'off'},
+  {label:'不显示',value:'on'}
+]
+const lineFlag = [
+  {label:'显示',value:'off'},
+  {label:'不显示',value:'on'}
+]
+const bottom_borderedFlag = [
+  {label:'显示',value:'on'},
+  {label:'不显示',value:'off'}
+]
+const stripedFlag = [
+  {label:'显示',value:'on'},
+  {label:'不显示',value:'off'}
+]
+const borderStyleFlag = [
+  {label:'实线边框',value:'solid'},
+  {label:'虚线边框',value:'dashed'},
+  {label:'点状边框',value:'dotted'},
+  {label:'双线边框',value:'double'}
+]
+const inputSelect = [
+  {label:'停用',value:'none'},
+  {label:'启用',value:'flex'}
+]
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const header = ref();
+const median = ref<string[]>([])
+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
+    }
+)
+
+//更新columns
+watch([header], ([headerNew], [headerOld]) => {
+  if (headerNew !== headerOld) {
+    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>

src/packages/components/Tables/Tables/TablesBasic/data.json

@@ -0,0 +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
+        }
+    ]
+}

src/packages/components/Tables/Tables/TablesBasic/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const TablesBasicConfig: ConfigType = {
+  key: 'TablesBasic',
+  chartKey: 'VTablesBasic',
+  conKey: 'VCTablesBasic',
+  title: '基础表格',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'tables_list.png'
+}

src/packages/components/Tables/Tables/TablesBasic/index.vue

@@ -0,0 +1,91 @@
+<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"
+                  />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed,PropType, toRefs, watch, reactive,ref } from 'vue';
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+//查询字段
+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 {
+  align,
+  pagination
+} = toRefs(
+  props.chartConfig.option
+) 
+pagination.value.onChange = (page: number) => {
+  pagination.value.page = page
+}
+
+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
+})
+
+watch(
+    () => 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;
+}
+
+</style>

src/packages/components/Tables/Tables/index.ts

@@ -1,4 +1,5 @@
 import { TableListConfig } from './TableList'
 import { TableScrollBoardConfig } from './TableScrollBoard'
+import { TablesBasicConfig } from "./TablesBasic/index";
 
-export default [TableListConfig, TableScrollBoardConfig]
+export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig]