From ab5ade9be12201cb784877b5ae1f1ee0dd38077e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Fri, 11 Aug 2023 22:35:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Tables/Tables/TablesBasic/config.ts       |  32 ++--
 .../Tables/Tables/TablesBasic/config.vue      | 161 +++++++++---------
 .../Tables/Tables/TablesBasic/data.json       | 118 ++++++-------
 .../Tables/Tables/TablesBasic/index.vue       | 112 ++++++------
 4 files changed, 216 insertions(+), 207 deletions(-)

diff --git a/src/packages/components/Tables/Tables/TablesBasic/config.ts b/src/packages/components/Tables/Tables/TablesBasic/config.ts
index eeca61bd..f1151226 100644
--- a/src/packages/components/Tables/Tables/TablesBasic/config.ts
+++ b/src/packages/components/Tables/Tables/TablesBasic/config.ts
@@ -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 {
diff --git a/src/packages/components/Tables/Tables/TablesBasic/config.vue b/src/packages/components/Tables/Tables/TablesBasic/config.vue
index 10b06699..9701196c 100644
--- a/src/packages/components/Tables/Tables/TablesBasic/config.vue
+++ b/src/packages/components/Tables/Tables/TablesBasic/config.vue
@@ -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>
diff --git a/src/packages/components/Tables/Tables/TablesBasic/data.json b/src/packages/components/Tables/Tables/TablesBasic/data.json
index 6d671fb6..29ba4085 100644
--- a/src/packages/components/Tables/Tables/TablesBasic/data.json
+++ b/src/packages/components/Tables/Tables/TablesBasic/data.json
@@ -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
-        }
-    ]
-}
\ No newline at end of file
+  "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
+    }
+  ]
+}
diff --git a/src/packages/components/Tables/Tables/TablesBasic/index.vue b/src/packages/components/Tables/Tables/TablesBasic/index.vue
index 5dcd2901..f3580744 100644
--- a/src/packages/components/Tables/Tables/TablesBasic/index.vue
+++ b/src/packages/components/Tables/Tables/TablesBasic/index.vue
@@ -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>