|
@@ -38,9 +38,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 左侧列表 -->
|
|
|
- <div class="table-box" ref="lTableBody">
|
|
|
+ <div class="table-box">
|
|
|
<div class="l-custom-table custom-table" v-loading="lTableLoading">
|
|
|
- <el-table ref="multipleTable1" :data="LtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="leftSelectionChange">
|
|
|
+ <el-table ref="lTableBody" :data="LtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="leftSelectionChange">
|
|
|
<el-table-column label="数据源" align="right" show-overflow-tooltip>
|
|
|
<template slot-scope="scope">{{ scope.row.Datasource }}</template>
|
|
|
</el-table-column>
|
|
@@ -89,7 +89,7 @@
|
|
|
<!-- 右侧列表 -->
|
|
|
<div class="table-box">
|
|
|
<div class="r-custom-table custom-table" v-loading="rTableLoading">
|
|
|
- <el-table ref="multipleTable2" :data="RtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="rightSelectionChange">
|
|
|
+ <el-table ref="rTableBody" :data="RtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="rightSelectionChange">
|
|
|
<el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
|
|
|
<el-table-column label="设备实例名称" width="200" class-name="bgf5" show-overflow-tooltip>
|
|
|
<template slot-scope="scope">{{ scope.row.EquipLocalName }}</template>
|
|
@@ -186,321 +186,48 @@ export default {
|
|
|
pageSize: 50,
|
|
|
total: 0
|
|
|
},
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: "zhinan",
|
|
|
- label: "指南",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "shejiyuanze",
|
|
|
- label: "设计原则",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "yizhi",
|
|
|
- label: "一致"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "fankui",
|
|
|
- label: "反馈"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "xiaolv",
|
|
|
- label: "效率"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "kekong",
|
|
|
- label: "可控"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "daohang",
|
|
|
- label: "导航",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "cexiangdaohang",
|
|
|
- label: "侧向导航"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "dingbudaohang",
|
|
|
- label: "顶部导航"
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "zujian",
|
|
|
- label: "组件",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "basic",
|
|
|
- label: "Basic",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "layout",
|
|
|
- label: "Layout 布局"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "color",
|
|
|
- label: "Color 色彩"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "typography",
|
|
|
- label: "Typography 字体"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "icon",
|
|
|
- label: "Icon 图标"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "button",
|
|
|
- label: "Button 按钮"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "form",
|
|
|
- label: "Form",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "radio",
|
|
|
- label: "Radio 单选框"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "checkbox",
|
|
|
- label: "Checkbox 多选框"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "input",
|
|
|
- label: "Input 输入框"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "input-number",
|
|
|
- label: "InputNumber 计数器"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "select",
|
|
|
- label: "Select 选择器"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "cascader",
|
|
|
- label: "Cascader 级联选择器"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "switch",
|
|
|
- label: "Switch 开关"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "slider",
|
|
|
- label: "Slider 滑块"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "time-picker",
|
|
|
- label: "TimePicker 时间选择器"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "date-picker",
|
|
|
- label: "DatePicker 日期选择器"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "datetime-picker",
|
|
|
- label: "DateTimePicker 日期时间选择器"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "upload",
|
|
|
- label: "Upload 上传"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "rate",
|
|
|
- label: "Rate 评分"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "form",
|
|
|
- label: "Form 表单"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "data",
|
|
|
- label: "Data",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "table",
|
|
|
- label: "Table 表格"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "tag",
|
|
|
- label: "Tag 标签"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "progress",
|
|
|
- label: "Progress 进度条"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "tree",
|
|
|
- label: "Tree 树形控件"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "pagination",
|
|
|
- label: "Pagination 分页"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "badge",
|
|
|
- label: "Badge 标记"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "notice",
|
|
|
- label: "Notice",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "alert",
|
|
|
- label: "Alert 警告"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "loading",
|
|
|
- label: "Loading 加载"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "message",
|
|
|
- label: "Message 消息提示"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "message-box",
|
|
|
- label: "MessageBox 弹框"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "notification",
|
|
|
- label: "Notification 通知"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "navigation",
|
|
|
- label: "Navigation",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "menu",
|
|
|
- label: "NavMenu 导航菜单"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "tabs",
|
|
|
- label: "Tabs 标签页"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "breadcrumb",
|
|
|
- label: "Breadcrumb 面包屑"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "dropdown",
|
|
|
- label: "Dropdown 下拉菜单"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "steps",
|
|
|
- label: "Steps 步骤条"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "others",
|
|
|
- label: "Others",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "dialog",
|
|
|
- label: "Dialog 对话框"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "tooltip",
|
|
|
- label: "Tooltip 文字提示"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "popover",
|
|
|
- label: "Popover 弹出框"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "card",
|
|
|
- label: "Card 卡片"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "carousel",
|
|
|
- label: "Carousel 走马灯"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "collapse",
|
|
|
- label: "Collapse 折叠面板"
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: "ziyuan",
|
|
|
- label: "资源",
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: "axure",
|
|
|
- label: "Axure Components"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "sketch",
|
|
|
- label: "Sketch Templates"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "jiaohu",
|
|
|
- label: "组件交互文档"
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.init();
|
|
|
},
|
|
|
mounted() {
|
|
|
- let that = this;
|
|
|
- let lTableBody = this.$refs.lTableBody;
|
|
|
- lTableBody.addEventListener("scroll", () => {
|
|
|
- let scrollTop = lTableBody.scrollTop;
|
|
|
- let scrollHeight = lTableBody.scrollHeight;
|
|
|
- let offsetHeight = lTableBody.offsetHeight;
|
|
|
- if (scrollTop + offsetHeight >= scrollHeight) {
|
|
|
- console.log("request");
|
|
|
- this.lTableLoading = true;
|
|
|
- setTimeout(() => {
|
|
|
- this.lTableLoading = false;
|
|
|
- this.LtableData.push({
|
|
|
- date: "2016-05-02",
|
|
|
- name: "王小虎",
|
|
|
- id: new Date().getTime(),
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
+ this.lTableBody = this.$refs.lTableBody.bodyWrapper;
|
|
|
+ this.rTableBody = this.$refs.rTableBody.bodyWrapper;
|
|
|
+
|
|
|
+ this.lTableBody.addEventListener("scroll", () => {
|
|
|
+ // 滚动距离
|
|
|
+ let scrollTop = this.lTableBody.scrollTop;
|
|
|
+ // 变量windowHeight是可视区的高度
|
|
|
+ let windowHeight =
|
|
|
+ this.lTableBody.clientHeight || this.lTableBody.clientHeight;
|
|
|
+ // 变量scrollHeight是滚动条的总高度
|
|
|
+ let scrollHeight =
|
|
|
+ this.lTableBody.scrollHeight || this.lTableBody.scrollHeight;
|
|
|
+ if (scrollTop + windowHeight === scrollHeight) {
|
|
|
+ if (this.lPage.pageNumber * this.lPage.pageSize < this.lPage.total) {
|
|
|
+ this.lPage.pageNumber++;
|
|
|
+ this.getLeftData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.rTableBody.addEventListener("scroll", () => {
|
|
|
+ // 滚动距离
|
|
|
+ let scrollTop = this.rTableBody.scrollTop;
|
|
|
+ // 变量windowHeight是可视区的高度
|
|
|
+ let windowHeight =
|
|
|
+ this.rTableBody.clientHeight || this.rTableBody.clientHeight;
|
|
|
+ // 变量scrollHeight是滚动条的总高度
|
|
|
+ let scrollHeight =
|
|
|
+ this.rTableBody.scrollHeight || this.rTableBody.scrollHeight;
|
|
|
+ if (scrollTop + windowHeight === scrollHeight) {
|
|
|
+ // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
|
|
|
+ if (this.rPage.pageNumber * this.rPage.pageSize < this.rPage.total) {
|
|
|
+ this.rPage.pageNumber++;
|
|
|
+ this.getRightData();
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
- let rTableBody = this.$refs.rTableBody;
|
|
|
- // rTableBody.addEventListener("scroll", () => {
|
|
|
- // let scrollTop = rTableBody.scrollTop;
|
|
|
- // let scrollHeight = rTableBody.scrollHeight;
|
|
|
- // let offsetHeight = rTableBody.offsetHeight;
|
|
|
- // if (scrollTop + offsetHeight >= scrollHeight) {
|
|
|
- // console.log("request");
|
|
|
- // this.rTableLoading = true;
|
|
|
- // setTimeout(() => {
|
|
|
- // this.rTableLoading = false;
|
|
|
- // this.RtableData.push({
|
|
|
- // date: "2016-05-02",
|
|
|
- // name: "王小虎",
|
|
|
- // id: new Date().getTime(),
|
|
|
- // checked: false,
|
|
|
- // address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- // });
|
|
|
- // }, 1000);
|
|
|
- // }
|
|
|
- // });
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters("layout", ["projectId"]),
|
|
@@ -596,6 +323,7 @@ export default {
|
|
|
}
|
|
|
this.lTableLoading = true;
|
|
|
dynamicPendingPoint(param, res => {
|
|
|
+ this.lPage.total = res.Total;
|
|
|
if (this.lPage.pageNumber == 1) {
|
|
|
this.LtableData = res.Content;
|
|
|
} else {
|
|
@@ -629,6 +357,7 @@ export default {
|
|
|
// }
|
|
|
this.rTableLoading = true;
|
|
|
dynamicPendingobjs(param, res => {
|
|
|
+ this.rPage.total = res.Total;
|
|
|
if (this.rPage.pageNumber == 1) {
|
|
|
this.RtableData = res.Content;
|
|
|
} else {
|