|
|
@@ -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 {
|
