虚拟列表滚动

src/views/dataEntry_manage/dataEntry/addToBaseList.vue

@@ -11,8 +11,9 @@
             value: 'ClassifyId',
             children: 'Child',
             emitPath: false,
-            multiple:true
+            multiple:true,
           }"
+          collapse-tags
           style="width: 200px;"
           :placeholder="$t('ManualEntryPage.label_vaiety')"
           clearable
@@ -39,6 +40,7 @@
             emitPath: false,
             multiple: true
           }"
+          collapse-tags
           style="width: 250px;"
           placeholder="请选择创建人"
           clearable
@@ -132,8 +134,8 @@
       <template v-else>
         <el-table 
           :data="addToBaseList" 
-          border 
-          height="500px"
+          border
+          ref="addTableRef"
         >
           <el-table-column :label="$t('Edb.Detail.e_id')" align="center" prop="TradeCode">
             <template slot="header" slot-scope="scope">
@@ -212,7 +214,7 @@
         </el-table>
 
         <div style="text-align: center; margin: 30px 0">
-          <el-button @click="handlePrevStep">{{$t('Dialog.prev_step')}}</el-button>
+          <el-button @click="step--;checkedSomeSelection()">{{$t('Dialog.prev_step')}}</el-button>
           <el-button
             type="primary"
             @click="handleCheckName"
@@ -228,7 +230,6 @@
 </template>
 <script>
 import { dataInterence,dataBaseInterface,departInterence } from '@/api/api.js';
-import { selfDataInterface } from '@/api/modules/dataSource';
 import mPage from '@/components/mPage.vue';
 export default {
   components: { mPage },
@@ -364,7 +365,11 @@ export default {
 
           if(this.addToBaseList.length>30) return this.$message.warning('批量添加指标数量不得超过30个！')
 
-          this.step++
+          this.step++;
+          this.$refs.table.doLayout()
+          this.$nextTick(() => {
+            this.$refs.addTableRef.doLayout()
+          })
       })
     },
 

src/views/dataEntry_manage/dataEntry/components/edbDetail.vue

@@ -54,63 +54,70 @@
           type="primary"
           v-for="year in yearsList"
           :key="year"
-          @click="handlePostion"
+          @click="handleLinkPostion(year)"
         >{{year}}</el-button>
       </div>
 
-      <ul 
+      <div 
         class="value-ul" 
-        ref="valueUl" 
-        @contextmenu.prevent="handleRightClick"
-        @scroll="handleLoadData" 
-        v-show="dataList.length">
-        <li
-          class="value-item"
-          v-for="(item,rindex) in dataList"
-          :key="rindex"
+        ref="valueUl"
+        @scroll="handleLoadData"
+      >
+        <div class="total-cont" :style="{height: totalHeight}" v-if="dataList.length"></div>
+        <ul 
+          class="list-wrapper" 
+          @contextmenu.prevent="handleRightClick"
+          v-if="dataList.length"
         >
-          <div 
-            :class="['value-label',
-              { 'select': rindex===rightMouseMenu.rindex && rightMouseMenu.cindex === 0 }
-            ]"
+          <li
+            class="value-item"
+            v-for="(item,rindex) in renderDataList"
+            :key="rindex"
           >
-            <el-date-picker
-              v-model="item.Dt"
-              type="date"
-              :placeholder="$t('Edb.InputHolderAll.input_date')"
-              :data-rindex="rindex"
-              :data-cindex="0"
-              :clearable="false"
-              :editable="false"
-              value-format="yyyy-MM-dd"
-              :readonly="readonly"
-              @mousedown.native="e=> { readonly = e.button===2?true:false }"
-              prefix-icon="none"
-              @input="handleTimeChange(rindex, item)"
-              @focus="handleTimeFocus(rindex, item)"
-            ></el-date-picker>
-          </div>
-          <div 
-            :class="['value-label',
-              { 'select': rindex===rightMouseMenu.rindex && rightMouseMenu.cindex === 1 }
-            ]"
-            :data-rindex="rindex"
-            :data-cindex="1"
-          >
-            <input
-              @focus="handleInputFocus(item, rindex, 1)"
-              @blur="handleInputChange(item)"
-              @input="handleInput(item)"
-              class="input-val-box"
-              type="number"
-              v-model="item.Close"
+            <div 
+              :class="['value-label',
+                { 'select': rindex===rightMouseMenu.rindex && rightMouseMenu.cindex === 0 }
+              ]"
+            >
+              <el-date-picker
+                v-model="item.Dt"
+                type="date"
+                :placeholder="$t('Edb.InputHolderAll.input_date')"
+                :data-rindex="rindex"
+                :data-cindex="0"
+                :clearable="false"
+                :editable="false"
+                value-format="yyyy-MM-dd"
+                :readonly="readonly"
+                @mousedown.native="e=> { readonly = e.button===2?true:false }"
+                prefix-icon="none"
+                @input="handleTimeChange(rindex, item)"
+                @focus="handleTimeFocus(rindex, item)"
+              ></el-date-picker>
+            </div>
+            <div 
+              :class="['value-label',
+                { 'select': rindex===rightMouseMenu.rindex && rightMouseMenu.cindex === 1 }
+              ]"
               :data-rindex="rindex"
               :data-cindex="1"
-            />
-          </div>
-        </li>
-        <li class="nodata value-item" v-if="!dataList.length">{{$t('Table.prompt_slogan')}}</li>
-      </ul>
+            >
+              <input
+                @focus="handleInputFocus(item, rindex, 1)"
+                @blur="handleInputChange(item)"
+                @input="handleInput(item)"
+                class="input-val-box"
+                type="number"
+                v-model="item.Close"
+                :data-rindex="rindex"
+                :data-cindex="1"
+              />
+            </div>
+          </li>
+        </ul>
+
+        <tableNoData :text="$t('Table.prompt_slogan')" v-else/>
+      </div>
     </div>
 
 
@@ -201,11 +208,26 @@ export default {
         }
       })
       return years;
+    },
+
+    totalHeight() {
+      return `${this.dataList.length*45}px`
+    },
+
+    renderDataList() {
+      console.log(this.startIndex,this.endIndex)
+      console.log(this.dataList.slice(this.startIndex,this.endIndex))
+      return this.dataList.slice(this.startIndex,this.endIndex)
     }
+
   },
   watch: {
     id(newval) {
-      newval && this.getEdbDetail()
+      if(!newval) return 
+      this.$refs.valueUl.scrollTop = 0;
+      this.rightMouseMenu.rindex=-1;
+      this.rightMouseMenu.cindex=-1;
+      this.getEdbDetail()
     }
   },
   data() {
@@ -214,6 +236,8 @@ export default {
       edbInfo: {},
       // yearsList: [],
       dataList: [],
+      startIndex: 0,
+      endIndex: 100,
 
       readonly:  false,//日期只读
       temInputVal:{},
@@ -252,37 +276,58 @@ export default {
       this.tableData = [res.Data.Detail]
       
       this.dataList = res.Data.Detail.DataList||[];
+      this.dataList.length && this.handleLoadData()
     },
 
-    handleLoadData() {
-      
+    /* 滚动加载位置数据 */
+    handleLoadData: _.throttle(function() {
+      const scrollTop = this.$refs.valueUl.scrollTop;
+      const visibleCount = Math.ceil(
+        this.$refs.valueUl.clientHeight / 45
+      )+5;
+
+      console.log(visibleCount)
+
+      this.startIndex = Math.floor(scrollTop / 45);
+      this.endIndex = this.startIndex + visibleCount;
+
+      this.$nextTick(() => {
+        $('.list-wrapper')[0].style=`transform: translateY(${this.startIndex*45}px)`
+      })
+    },300),
+
+    handleLinkPostion(year) {
+      let index = this.dataList.findIndex(_ => _.Dt.substring(0,4)===year)
+      console.log(index)
+      this.$refs.valueUl.scrollTop = index*45
+      this.handleLoadData()
     },
 
     /* 更改日期 */
     async handleTimeChange(index, e) {
         // 判断选择的日期是否重复
-      // let flag = this.dataList.some((item) => item.Dt == e.Dt);
-      // if (flag) {
-      //   if (!this.tempTime) {
-      //     // 如果是新增行的
-      //     e.Dt = "";
-      //   } else {
-      //     e.Dt = this.tempTime;
-      //   }
-      //   this.$message.warning(/* "该日期已存在"  */this.$t('Edb.MsgPrompt.date_haved_msg'));
-      // } else {
+      let flag = this.dataList.some((item) => item.Dt === e.Dt);
+      if (flag) {
+        if (!this.tempTime) {
+          // 如果是新增行的
+          e.Dt = "";
+        } else {
+          e.Dt = this.tempTime;
+        }
+        this.$message.warning(/* "该日期已存在"  */this.$t('Edb.MsgPrompt.date_haved_msg'));
+      } else {
        
-      //     // 修改日期
-      //     let params = {
-      //       CreateDate: e.Dt, //新录入日期
-      //       OldCreateDate: this.tempTime, //之前日期
-      //       List: this.dataList,
-      //     };
-      //     const res = await dataInterence.modifyTargetDate(params);
-      //     if (res.Ret === 200) {
-      //       this.$message.success("修改成功");
-      //     }
-      // }
+          // // 修改日期
+          // let params = {
+          //   CreateDate: e.Dt, //新录入日期
+          //   OldCreateDate: this.tempTime, //之前日期
+          //   List: this.dataList,
+          // };
+          // const res = await dataInterence.modifyTargetDate(params);
+          // if (res.Ret === 200) {
+          //   this.$message.success("修改成功");
+          // }
+      }
     },
 
      // 日期获取焦点存放日期
@@ -481,57 +526,72 @@ export default {
       overflow-y: auto;
       border: 1px solid #EBEFF6;
       box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);
-      .value-item {
-        border-bottom: 1px solid #dcdfe6;
-        display: flex;
-
-        .value-label {
-          width: 50%;
-          padding: 2px;
-          position: relative;
-          text-align: center;
-          color: #666;
-          &:first-child {
-            border-right: 1px solid #dcdfe6;
-          }
-          &.select::after {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            content: " ";
-            display: block;
-            outline: 0;
-            border: 2px solid #0033ff;
-            box-shadow: 0 0 5px rgba(73, 177, 249, 0.5);
-          }
-          .value-style{
-            padding:5px;
-            border-radius: 4px;
-            &.predict-act {
-              color: orange;
+      position: relative;
+      .total-cont {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: -2;
+      }
+      .list-wrapper {
+        left: 0;
+        right: 0;
+        top: 0;
+        position: absolute;
+        .value-item {
+          border-bottom: 1px solid #dcdfe6;
+          display: flex;
+
+          .value-label {
+            width: 50%;
+            padding: 2px;
+            position: relative;
+            text-align: center;
+            color: #666;
+            &:first-child {
+              border-right: 1px solid #dcdfe6;
+            }
+            &.select::after {
+              position: absolute;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              content: " ";
+              display: block;
+              outline: 0;
+              border: 2px solid #0033ff;
+              box-shadow: 0 0 5px rgba(73, 177, 249, 0.5);
+            }
+            .value-style{
+              padding:5px;
+              border-radius: 4px;
+              &.predict-act {
+                color: orange;
+              }
             }
           }
-        }
 
-        .input-val-box {
-          width: 100%;
-          height: 100%;
-          border: none;
-          text-align: center;
-          color: #666;
-        }
-        .input-val-box:disabled {
-          background: transparent;
-        }
-        input::-webkit-outer-spin-button,
-        input::-webkit-inner-spin-button {
-          -webkit-appearance: none !important;
-          margin: 0;
-        }
-        input[type="number"] {
-          -moz-appearance: textfield;
+          .input-val-box {
+            width: 100%;
+            height: 100%;
+            border: none;
+            text-align: center;
+            color: #666;
+          }
+          .input-val-box:disabled {
+            background: transparent;
+          }
+          input::-webkit-outer-spin-button,
+          input::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+            margin: 0;
+          }
+          input[type="number"] {
+            -moz-appearance: textfield;
+          }
         }
       }
       .nodata {

src/views/dataEntry_manage/dataEntry/index.vue

@@ -114,9 +114,9 @@
                 <template slot-scope="{row}">
                   <div>
                     <span class="editsty" @click="handleEdb({item:row,type:'edit'})">{{$t('Table.edit_btn')}}</span>
-                    <span class="editsty" @click="handleEdb({item:row,type:'addToBase'})"><!-- 加入指标库 -->{{$t('ManualEntryPage.add_tobase')}}</span>
+                    <span v-if="row.IsJoinEdb===0" class="editsty" @click="handleEdb({item:row,type:'addToBase'})"><!-- 加入指标库 -->{{$t('ManualEntryPage.add_tobase')}}</span>
                     <span class="editsty" @click="handleEdb({item:row,type:'logs'})"><!-- 操作日志 -->{{$t('ManualEntryPage.opera_logs')}}</span>
-                    <span class="deletesty" @click="handleEdb({item:row,type:'del'})">{{$t('Table.delete_btn')}}</span>
+                    <span v-if="row.IsJoinEdb===0" class="deletesty" @click="handleEdb({item:row,type:'del'})">{{$t('Table.delete_btn')}}</span>
                   </div>
 
                   
@@ -162,6 +162,14 @@
     :isShow.sync="isShowOperaLogs"
     :edbCode="operteId"
   />
+
+  <!-- 加入指标库弹窗 -->
+  <completeTargetDia
+    :isOpenDialog="isAddBaseDia"
+    @cancel="isAddBaseDia=false"
+    :params="addBaseInfo"
+    @add="handleAddBaseApi"
+  />
   </div>
 </template>
 <script>
@@ -170,12 +178,14 @@ import mPage from '@/components/mPage.vue';
 import edbDetail from './components/edbDetail.vue'
 import operateLogsDia from './components/operateLogsDia.vue';
 import insertData from '../components/insertData.vue';
+import completeTargetDia from '../databaseComponents/completeTargetDia.vue';
 export default {
   components: { 
     mPage,
     edbDetail,
     operateLogsDia,
-    insertData
+    insertData,
+    completeTargetDia
   },
   computed: {
     tableColums() {
@@ -208,7 +218,7 @@ export default {
 			this.selectedEdb = nval;
 
 			this.selectNode = this.searchOptions.find(_ => _.TradeCode===nval).UniqueCode;
-
+    
       this.$refs.treeRef.setCurrentNode(this.selectNode)
     }
   },
@@ -219,6 +229,7 @@ export default {
         children: 'Child',
 				isLeaf: 'isLeaf'
       },
+      defaultShowNodes: [],
       classifyList: [],
 
       tableData: [],
@@ -243,7 +254,11 @@ export default {
       operteId: '',
 
       /* 导入弹窗 */
-      isShowinsert:false
+      isShowinsert:false,
+
+      /* 加入弹窗 */
+      isAddBaseDia: false,
+      addBaseInfo: {}
     }
   },
   mounted(){
@@ -375,8 +390,36 @@ export default {
     },
 
     /* 加入指标库 */
-    handleAddToBase() {
+    handleAddToBase(item) {
+      this.addBaseInfo = {
+        edb_name: item.SecName,
+        menu: [],
+        frequency: item.Frequency,
+        unit: item.Unit,
+        ...item
+      }
+      this.isAddBaseDia = true
+    },
+
+    handleAddBaseApi(params) {
+      dataInterence.addToBaseBatchV2(
+          [{
+            EdbCode: params.TradeCode,
+            EdbName: params.EdbName,
+            Frequency: params.Frequency,
+            Unit: params.Unit,
+            ClassifyId: params.ClassifyId
+          }]
+      ).then(res=>{
+          this.saveLoading = false
+
+          if(res.Ret!==200) return 
 
+          this.getTableData()
+          this.$message.success(this.$t('MsgPrompt.add_msg2'))
+
+          this.isAddBaseDia = false;
+      })
     },
 
     // 查看操作日志

src/views/dataEntry_manage/databaseComponents/completeTargetDia.vue

@@ -153,6 +153,9 @@ export default {
 						Frequency: this.formData.frequency,
 						Unit: this.formData.unit
 					}
+
+					if(this.$route.path!=='/database') return this.$emit('add',params)
+
 					dataBaseInterface.targetAdd(params).then(res => {
 						if(res.Ret === 200) {
 							this.$message.success(/* '新增指标成功！' */this.$t('EtaBasePage.add_success_msg'))
@@ -168,8 +171,6 @@ export default {
 			this.$emit('cancel')
 		}
 	},
-	created() {},
-	mounted() {},
 }
 </script>
 <style lang='scss'>