From 98e5a64b4ae7a66832448f13fb5f63d93a3751f2 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 30 Nov 2021 11:43:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=AF=BC=E5=85=A5=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/data/Framework.vue | 120 +++++++++++++++++++++++------------
 1 file changed, 80 insertions(+), 40 deletions(-)

diff --git a/src/views/data/Framework.vue b/src/views/data/Framework.vue
index 4fffddd..b2ad4ee 100644
--- a/src/views/data/Framework.vue
+++ b/src/views/data/Framework.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="wrap">
         <el-container>
+            <!-- 左边的分类 -->
             <el-aside width="300px">
                 <div class="plus">
                     <i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i>
@@ -16,7 +17,7 @@
                     </span>
                 </el-tree>
             </el-aside>
-
+            <!-- 右边的表 -->
             <el-main style="padding-top: 0">
                 <el-card class="main-wrap" shadow="hover">
                     <el-form label-width="80px" class="flex-between mgb20">
@@ -64,7 +65,7 @@
                 </el-card>
             </el-main>
         </el-container>
-
+        <!-- 导入数据 -->
         <el-dialog title="导入" :visible.sync="importVisible" width="80%" center @close="closeImport" class="dialog" :close-on-click-modal="false">
             <el-container style="padding: 20px 0 20px 20px;background-color: #f0f0f0;">
                 <div style="overflow:auto;height: 558px;width:330px;padding:15px;background:#fff" ref="typeTreeWrap" @scroll="loadType">
@@ -104,7 +105,7 @@
                 <el-button type="primary" :loading="submited" @click="confirmImport">确 定</el-button>
             </span>
         </el-dialog>
-
+        <!-- 新增编辑分类 -->
         <el-dialog :title="id ? '编辑分类' : '新增分类'" :visible.sync="typeVisible" width="24%" center @close="closeType" :close-on-click-modal="false">
             <el-input placeholder="请输入分类名称" v-model="categoryName"></el-input>
             <span slot="footer" class="dialog-footer">
@@ -112,14 +113,14 @@
                 <el-button type="primary" @click="confirmType">确 定</el-button>
             </span>
         </el-dialog>
-
+        <!-- 预览 -->
         <el-dialog title="预览" :visible.sync="previewVisible" width="60%" center :close-on-click-modal="false">
             <el-table :data="previewData" class="table" stripe header-align="center" row-key="id">
                 <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                 <el-table-column v-for="(item,index) in previewHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column>
             </el-table>
         </el-dialog>
-
+        <!-- 编辑产品数据表名称 -->
         <el-dialog title="编辑产品数据表名称" :visible.sync="nameVisible" width="24%" center :close-on-click-modal="false">
             <el-input placeholder="请输入产品数据表名称" v-model="curRow.showName"></el-input>
             <span slot="footer" class="dialog-footer">
@@ -127,7 +128,7 @@
                 <el-button type="primary" @click="confirmName">确 定</el-button>
             </span>
         </el-dialog>
-
+        <!-- 自定义表头 -->
         <el-dialog title="自定义表头" :visible.sync="headVisible" width="60%" center :close-on-click-modal="false">
             <el-table :data="previewData" class="table" stripe header-align="center" row-key="id" :key="editIndex">
                 <el-table-column type="index" width="100" label="序号" align="center">
@@ -162,7 +163,7 @@ export default {
                 label: 'label'
             },
             defaultActive: [],
-            added: false,
+            addEd: false,
             typeVisible: false,
             categoryName: '',
             categoryId: '',
@@ -230,56 +231,62 @@ export default {
                     })
                 }
                 handleId(res)
-
                 this.typeList = res
-                if (!this.added) {
-                    if(res[0].children.length){
+                // 如果是删除或者新增编辑分类后调的重新查询分类，则不用默认选中第一个子级，只有页面一加载完成才需要默认选中第一个子级，addEd就是操作完分类后的标识
+                if (!this.addEd) {
+                    if(res[0].children.length){ // 如果有孙级节点，则选中孙级节点，否则选中子级
                         this.categoryId = res[0].children[0].id
                         this.defaultActive = [res[0].children[0].id]
                     }else{
                         this.categoryId = res[0].id
                         this.defaultActive = [res[0].id]
                     }
-                    // 取第一个分类的id
+                    // 选中默认分类
                     this.$nextTick(() => {
-                        this.$refs.type.setCurrentKey(res[0].children[0].id)
+                        this.$refs.type.setCurrentKey(this.categoryId)
                     })
                 }
-                this.added = false
+                this.addEd = false
                 this.getData()
             }).catch(res => {})
         },
+        // 查询表
         getData(){
             this.$post(`${this.api.getIdQueryTable}?categoryId=${this.categoryId}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=${this.updateTime ? this.updateTime : ''}`).then(res => {
                 const list = res.pageList.records
                 list.map(e => {
-                const startTime = e.startTime ? e.startTime.slice(0, 10) : ''
-                const endTime = e.endTime ? e.endTime.slice(0, 10) : ''
-                if (startTime && endTime) {
-                    e.timeRange = startTime + ' ~ ' + endTime
-                } else if (startTime) {
-                    e.timeRange = startTime
-                } else if (endTime) {
-                    e.timeRange = e.endTime
-                }
+                    // 开始结束日期不用显示时间，所以只需要截取日期
+                    const startTime = e.startTime ? e.startTime.slice(0, 10) : ''
+                    const endTime = e.endTime ? e.endTime.slice(0, 10) : ''
+                    if (startTime && endTime) {
+                        e.timeRange = startTime + ' ~ ' + endTime
+                    } else if (startTime) {
+                        e.timeRange = startTime
+                    } else if (endTime) {
+                        e.timeRange = e.endTime
+                    }
                 })
                 this.listData = list
                 this.total = res.pageList.total
             }).catch(res => {})
         },
+        // 筛选的时候把分页重置为1
         initData(){
             this.page = 1
             this.getData()
         },
+        // 点击分类后查询表
         typeClick(data,node){
             this.categoryId = data.id
             this.getData()
         },
+        // 新增分类
         addType(row){
-            if (row) this.defaultActive = [row.data.id]
+            if (row) this.defaultActive = [row.data.id] // 添加一级分类是没有id的，传到这个方法里row是0
             this.typeVisible = true
-            this.levelId = row ? row.data.id : 0
+            this.levelId = row ? row.data.id : 0 // levelId是添加分类的时候要传到后端的父级id，一级分类没有父级id，所以传0
         },
+        // 编辑分类
         editType(row){
             this.typeVisible = true
             this.id = row.data.id
@@ -290,7 +297,7 @@ export default {
             this.$confirm('确定要删除吗？', '提示', {
                 type: 'warning'
             }).then(() => {
-                this.added = true
+                this.addEd = true
                 this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => {
                     this.$message.success('删除成功')
                     this.getType()
@@ -298,9 +305,9 @@ export default {
             }).catch(() => {})
         },
         confirmType(){
-            if(this.submited) return false
+            if(this.submited) return false // 提交防抖标识
             this.submited = true
-            this.added = true
+            this.addEd = true
             if(this.id){
                 this.$post(this.api.updateCategory,{
                     id: this.id,
@@ -331,22 +338,30 @@ export default {
                 })
             }
         },
+        // 关闭添加编辑分类弹框回调
         closeType(){
             this.id = 0
             this.levelId = 0
             this.categoryName = ''
         },
+        /**
+         * 表预览
+         * @param row 行数据
+         * @param isEdit 是否是从自定义表头进来的
+         */
         preview(row, isEdit){
             this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
                 let comment = res.comment
                 let previewHead = []
-                this.curComment = comment
+                this.curComment = comment // 用来修改表头的，先保存完整的表头，修改表头的时候需要传给后端
                 comment.map(n => {
+                    // 表格上不用展示id和操作时间
                     n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
                 })
                 this.previewHead = previewHead
 
                 let data = res.data
+                // 如果是自定义表头，则在数据最前面加个custom的行，用来修改表头
                 isEdit && data.unshift({
                     custom: true
                 })
@@ -357,9 +372,10 @@ export default {
                     }
                 })
                 this.previewData = data
-                if (!isEdit) this.previewVisible = true
+                if (!isEdit) this.previewVisible = true // 非自定义表头进来的，才需要显示预览弹框
             }).catch(res => {})
         },
+        // 删除表
         delTable(row){
             this.$confirm('确定要删除吗？', '提示', {
                 type: 'warning'
@@ -370,10 +386,12 @@ export default {
                 }).catch(res => {})
             }).catch(() => {})
         },
+        // 编辑产品表名
         editName(row){
             this.curRow = JSON.parse(JSON.stringify(row))
             this.nameVisible = true
         },
+        // 保存产品表名
         confirmName(){
             this.$post(this.api.editTableName, {
                 id: this.curRow.id,
@@ -384,12 +402,14 @@ export default {
                 this.getData()
             }).catch(res => {})
         },
+        // 编辑产品表头
         editHead(row){
             this.curRow = JSON.parse(JSON.stringify(row))
             this.preview(row, 1)
-            this.editIndex++
+            this.editIndex++ // 强刷新表
             this.headVisible = true
         },
+        // 保存自定义表头
         confirmHead(){
             let data = JSON.parse(JSON.stringify(this.curComment))
             this.$post(`${this.api.updateTableCommit}?tableName=${this.curRow.name}`, data).then(res => {
@@ -487,9 +507,12 @@ export default {
                 n.typeTreePage++
             }).catch(res => {})
         },
+        // 导入数据
         batchImport(){
+            // 这里查的是原始分类，跟其他任何地方查分类的接口都不一样，不要混淆，如果要改这个地方，要跟后端沟通
             this.$post(this.api.originalList).then(res => {
                 const that = this
+                // 处理id和label。因为这个树形要同时展示分类和表，所以name的key统一用label（分类和表的name的key不一样）
                 function handleId(data){
                     data.map(n => {
                         that.importTypeIndex++
@@ -503,10 +526,12 @@ export default {
                     })
                 }
                 handleId(res)
+                // 查询表。pageSize传3000是防止选中的表在下面，查的太少的话无法选中分类，后续可根据需求修改
                 this.$post(`${this.api.getIdQueryTable}?categoryId=${this.categoryId}&showName=${this.keyword}&pageNum=1&pageSize=3000&updateTime=${this.updateTime ? this.updateTime : ''}`).then(res1 => {
                     let list = res1.pageList.records
-                    this.defaultTypeChecked = list.map(n => n.copyId)
+                    this.defaultTypeChecked = list.map(n => n.copyId) // copyId为原始表id，通过这个id才能选中表
                     const that = this
+                    // 递归处理分页
                     function handleId(data){
                         data.map(n => {
                             if(n.children.length){
@@ -519,6 +544,7 @@ export default {
                         })
                     }
                     handleId(res)
+                    // 如果是已经勾选了的表，则禁止勾选
                     function handleDisabled (list) {
                         list.map(e => {
                             if (e.children && e.children.length) {
@@ -536,6 +562,7 @@ export default {
                 this.importVisible = true
             }).catch(res => {})
         },
+        // 查询表的字段
         getFields(){
             this.$get(`${this.api.staticPreview}?tableName=${this.tableName}`).then(res => {
                 let comment = res.comment
@@ -557,6 +584,7 @@ export default {
             }).catch(res => {})
             this.importVisible = true
         },
+        // 分类点击回调
         importTypeClick(data){
             // 如果点击的是表,则加载这个表下面的字段,分类则不用
             if(data.name){
@@ -570,19 +598,19 @@ export default {
             this.curExpand = obj.id
             this.renderChecked()
         },
+        // 关闭导入弹框回调
         closeImport(){
             this.$refs.typeTree.setCheckedKeys([])
             this.categorys = []
         },
-        // 获取names和showNames,提交的时候需要
+        // 查询分类下的表id
         getNames(list){
             const categoryId = Number(this.categoryId)
             return new Promise((resolve,reject) => {
-                // 根据选择的分类id查询下面的表id
                 this.$get(`${this.api.getAllTableInfoByCategoryId}?categoryId=${list.join()}`).then(res => {
                     const list = res.tableInfo
                     list.map(e => {
-                        delete e.id
+                        delete e.id // id不用传给后端
                         e.categoryId = categoryId
                     })
                     this.categorys = list
@@ -590,6 +618,7 @@ export default {
                 }).catch(res => {})
             })
         },
+        // 保存成功后的操作
         saveSuccess() {
             this.$message.success('导入成功')
             this.getData()
@@ -598,32 +627,43 @@ export default {
                 this.submited = false
             },1000)
         },
+        // 导入表
         confirmImport(){
-            if(this.submited) return false
+            if(this.submited) return false // 导入防抖标识
             const checked = this.$refs.typeTree.getCheckedNodes().filter(e => !e.disabled) // 勾选的数据
             // 如果没有选择任何数据
             if(!checked.length) return this.$message.warning('请选择数据')
             this.submited = true
-            const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id，再获取分类真正的id
-            const tableIds = checked.filter(e => e.name)
-            const categoryId = Number(this.categoryId)
+            // 分类要调另一个接口去查询该分类下的表，所以，要先把分类id和表id分开，再一次性传分类id去查询表，再把查询出来的表跟另外勾选的表拼接，再保存。要做去重
+            const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id（分类没有name，表才有name），再获取分类真正的id（id作了自增处理，获取的id不是真正的id，realId才是这个分类真正的id）
+            const tableIds = checked.filter(e => e.name) // 筛选出表
+            const categoryId = Number(this.categoryId) // 外面勾选的分类，即要导入数据的分类
+            // 给表加categoryId
             tableIds.map(e => {
                 delete e.id
                 e.categoryId = categoryId
             })
+            /**
+             * 根据某个值给数组对象去重
+             * @param arr 要处理的数组
+             * @param val 去重依据的值
+             */
             function uniq (arr, val) {
                 const res = new Map()
                 return arr.filter(e => !res.has(e[val]) && res.set(e[val], 1))
             }
+            // 分类id，如果有分类id，则调接口去查询分类下的表，再新增，否则，直接拿表id去新增
             if (typeIds.length) {
                 this.getNames(typeIds).then(() => {
-                    const allIds = [...this.categorys, ...tableIds]
+                    const allIds = [...this.categorys, ...tableIds] // 合并通过分类查询到的表id和另外勾选的表id
                     const data = uniq(allIds, 'name')
                     const dataList = []
+                    // 每个接口只新增2000个表，一次新增太多无法请求成功，这里做个分割
                     for (let i = 0, len = data.length; i < len; i += 2000) {
                         dataList.push(data.slice(i, i + 2000))
                     }
                     const promiseList = []
+                    // 如果切割成2000条一个item，超过6个item的话，就一次调太多次接口了，也有可能会请求失败，所以如果超过6个item，则再分两次去新增，后续如果数据又增加了，可以考虑做个二次分割，即先切割成2000个一个item，如果超过6个item，则再以6个item为单位切割。新增的时候就是每个接口新增2000个表，每次调6次新增，这6次调完后，再调另外的6次，以此循环
                     if (dataList.length > 6) {
                         dataList.slice(0, 6).map(e => {
                             promiseList.push(new Promise((resolve,reject) => {
@@ -669,7 +709,7 @@ export default {
                         })
                     }
                 })
-            } else {
+            } else { // 保存表
                 this.$post(this.api.saveTable, tableIds).then(res => {
                     this.$message.success('导入成功')
                     this.getData()