From 49bda883e88bec1efb8c0fba6c14e96ce993245c Mon Sep 17 00:00:00 2001
From: dusicong <dusicong@syxysoft.com>
Date: Mon, 22 Mar 2021 10:50:46 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91JTable?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/table/jTable.vue | 103 +++++++++--------------
 jero-web/src/config/router.config.js     |   4 +
 jero-web/src/views/jero/jtable1.vue      |  40 ++++-----
 3 files changed, 62 insertions(+), 85 deletions(-)

diff --git a/jero-web/src/components/table/jTable.vue b/jero-web/src/components/table/jTable.vue
index b78e5d7e..320f883e 100644
--- a/jero-web/src/components/table/jTable.vue
+++ b/jero-web/src/components/table/jTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-     <!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
+    <!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
     <a-table :columns="aColumns" :dataSource="dataSource" :pagination="ispagination" :rowSelection="rowSelect" bordered
       :scroll="{ x: 1920 }">
       <!-- <a slot="name" slot-scope="text,scope">{{ scope.age }}</a> -->
@@ -13,7 +13,7 @@
           <a-menu slot="overlay">
             <a-sub-menu key="dj" title="冻结列头">
               <a-menu-item>
-                <a-radio-group v-model="value" @change="((e)=>{fixedC(e,a.dataIndex)})">
+                <a-radio-group v-model="a.slots.fixedValue" @change="((e)=>{fixedChange(e,a.dataIndex)})">
                   <a-radio :style="radioStyle" :value="1">
                     左侧冻结
                   </a-radio>
@@ -45,7 +45,7 @@
 
   export default {
     // TODO 命名和全局保持统一，应为JTable
-    name: 'Jtable',
+    name: 'JTable',
     props: Object.assign({
       isShowPage: {
         type: Boolean,
@@ -88,16 +88,8 @@
     data() {
       return {
         aColumns: this.columns,
-        midColumns: this.columns,
         checkedList: [],
         plainOptions: [],
-
-        // TODO 未用到的变量请删掉
-        fixedList: [],
-        // TODO 初始化了，但未使用的变量请删掉
-        fixedOptions: [],
-        // TODO 代码中不要出现魔数，使用变量标明3的含义。实在无法处理的地方，最起码给个注释
-        value: 3,
         radioStyle: {
           display: 'block',
           height: '30px',
@@ -122,78 +114,59 @@
       },
     },
     mounted() {
-      console.log(this.aColumns)
-      // pList含义不清晰，无法理解
-      let pList = []
+      // console.log(this.aColumns)
+      // 遍历出筛选列头的所有选项
       this.columns.forEach((item) => {
-        pList.push(item.dataIndex)
+        this.plainOptions.push(item.dataIndex)
       })
-      this.plainOptions = pList
-      this.checkedList = pList
 
-      this.fixedOptions = pList
+      // 读取localStorage中的数据
+      var storageCloumns = JSON.parse(localStorage.getItem("pro__Cloumns"))
+      // console.log(storageCloumns)
+      if (storageCloumns) {
+        this.aColumns = storageCloumns
+      }
+      // 遍历出筛选列头中的已选项
+      this.aColumns.forEach((item) => {
+        this.checkedList.push(item.dataIndex)
+      })
     },
     methods: {
       // 用户可自行筛选列头显示的字段
       // TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
       onChange(e) {
-        let newList = [] //最初始list
-        let resList = [] //两个数组不同
+        let initList = [] //最初始list
+        let diffList = [] //两个数组不同
+        // 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
         this.columns.forEach((item) => {
-          newList.push(item.dataIndex)
+          initList.push(item.dataIndex)
         })
-
-        // TODO 不要在method里套function，可以考虑另开一个method函数，再进行调用
-        function getArrDifference(arr1, arr2) {
-          return arr1.concat(arr2).filter(function(v, i, arr) {
-            return arr.indexOf(v) === arr.lastIndexOf(v);
-          });
-        }
-        resList = getArrDifference(e, newList)
-        if (resList.length === 0) {
+        // 拿到两个数组的不同的项
+        diffList = this.getArrDifference(e, initList)
+        if (diffList.length === 0) {
           // 如果数组为空，则把父组件传过来的表头赋值给
           this.aColumns = this.columns
+          localStorage.setItem("pro__Cloumns", JSON.stringify(this.aColumns))
           return
         }
         // TODO midColumns这个变量应该声明为局部变量，作为全局变量但没有全局使用是不合理的
-        for (let i = 0; i < resList.length; i++) {
-          this.midColumns = this.midColumns.filter(item =>
-            item.dataIndex !== resList[i]
+        let midColumns = this.columns
+        for (let i = 0; i < diffList.length; i++) {
+          midColumns = midColumns.filter(item =>
+            item.dataIndex !== diffList[i]
           )
         }
-        this.aColumns = this.midColumns
-        //重置
-        this.midColumns = this.columns
+        this.aColumns = midColumns
+
+        localStorage.setItem("pro__Cloumns", JSON.stringify(this.aColumns))
+        // console.log(JSON.parse(localStorage.getItem("pro__Cloumns")))
       },
-      // 用户可自行冻结列头
-      // fixedChange(e) {
-      //   //先判断有没有修改，
-      //   if (e.length === 0) {
-      //     this.aColumns.forEach((item) => {
-      //       if (item.fixed) {
-      //         item.fixed = false
-      //       }
-      //     })
-      //     return
-      //   }
-      //   //清空所有fixed属性
-      //   for (let i = 0; i < e.length; i++) {
-      //     this.aColumns.forEach((item) => {
-      //       if (item.fixed) {
-      //         item.fixed = false
-      //       }
-      //     })
-      //   }
-      //   //把对应点击的fixed属性变为true
-      //   for (let i = 0; i < e.length; i++) {
-      //     this.aColumns.find(item => {
-      //       if (item.dataIndex === e[i]) {
-      //         item.fixed = true
-      //       }
-      //     })
-      //   }
-      // },
-      fixedC(e, dataIndex) {
+      getArrDifference(arr1, arr2) {
+        return arr1.concat(arr2).filter(function(v, i, arr) {
+          return arr.indexOf(v) === arr.lastIndexOf(v);
+        });
+      },
+      fixedChange(e, dataIndex) {
         // console.log(e.target.value, dataIndex)
         if (e.target.value === 1) { //左侧冻结
           this.aColumns.find(item => {
diff --git a/jero-web/src/config/router.config.js b/jero-web/src/config/router.config.js
index 21b0b752..774214da 100644
--- a/jero-web/src/config/router.config.js
+++ b/jero-web/src/config/router.config.js
@@ -359,6 +359,10 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    path: '/jtable',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/jero/jtable1')
+  },
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
diff --git a/jero-web/src/views/jero/jtable1.vue b/jero-web/src/views/jero/jtable1.vue
index fbe3e448..659e5ad0 100644
--- a/jero-web/src/views/jero/jtable1.vue
+++ b/jero-web/src/views/jero/jtable1.vue
@@ -83,7 +83,12 @@
             key: 'name',
             width: 200,
             slots: {
-              title: '姓名'
+              title: '姓名',
+              // 冻结列头的参数
+              // 1为左侧冻结
+              // 2为右侧冻结
+              // 3为不冻结或解冻
+              fixedValue: 3
             }
           },
           {
@@ -92,7 +97,8 @@
             key: 'age',
             width: 200,
             slots: {
-              title: '年龄'
+              title: '年龄',
+              fixedValue: 3
             }
           },
           {
@@ -101,7 +107,8 @@
             key: 'address',
             width: 200,
             slots: {
-              title: '住址'
+              title: '住址',
+              fixedValue: 3
             }
           },
           {
@@ -110,7 +117,8 @@
             key: 'address1',
             width: 200,
             slots: {
-              title: '住址1'
+              title: '住址1',
+              fixedValue: 3
             }
           },
           {
@@ -119,7 +127,8 @@
             key: 'address2',
             width: 200,
             slots: {
-              title: '住址2'
+              title: '住址2',
+              fixedValue: 3
             }
           },
           {
@@ -128,7 +137,8 @@
             key: 'address3',
             width: 200,
             slots: {
-              title: '住址3'
+              title: '住址3',
+              fixedValue: 3
             }
           },
           {
@@ -137,7 +147,8 @@
             key: 'address4',
             width: 200,
             slots: {
-              title: '住址4'
+              title: '住址4',
+              fixedValue: 3
             }
           },
           {
@@ -145,22 +156,11 @@
             dataIndex: 'address5',
             key: 'address5',
             slots: {
-              title: '住址5'
+              title: '住址5',
+              fixedValue: 3
             }
           },
         ],
-        // TODO 此处放分页组件的意义？分页组件不是通过参数去操控table组件来进行显隐吗
-        pagination: {
-          current: 1,
-          pageSize: 5,
-          pageSizeOptions: ['5', '10', '20'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
-        }
       }
     },
     mounted() {