feat(qgtable): 已选未选功能开发

app/web/index.d.ts

@@ -8,4 +8,8 @@ interface Window {
   __POWERED_BY_QIANKUN__: string;
   __INJECTED_PUBLIC_PATH_BY_QIANKUN__: string;
 }
-declare var apollo: any;
+declare var apollo: any;
\ No newline at end of file
+
+interface HTMLDivElement {
+  scrollTop?: number
+}
\ No newline at end of file

app/web/page/editor/component/DynamicComponentSort/index.ts

+import { Component, Vue } from 'vue-property-decorator';
+import { Getter, Mutation, State } from 'vuex-class';
+
+interface Point {
+  h: number;
+  i: string;
+  moved: boolean;
+  w: number;
+  x: number;
+  y: number;
+
+}
+
+@Component({ name: 'DynamicComponentSort' })
+export default class DynamicComponentSort extends Vue {
+  @Mutation('SET_CUR_ELE_INDEX') setCurEleIndex;
+  @State(state => state.editor.curEleIndex) curEleIndex!: number | null;
+  @Getter('pageData') pageData;
+
+  get layout() {
+    return this.pageData.elements.map((v, i) => {
+      const { point, title, id } = v;
+      return {
+        point,
+        id,
+        index: i,
+        title: `${title}-${id}`
+      };
+    }).sort((cur, next) => {
+      return cur.point.y > next.point.y ? 1 : -1;
+    });
+  }
+  handleComponentClick(point: Point, index: number) {
+    this.$nextTick(() => {
+      this.setCurEleIndex(index);
+      (document.getElementById('DcmContainerPanel') as HTMLDivElement).scrollTop = point?.y;
+    });
+  }
+}
\ No newline at end of file

app/web/page/editor/component/DynamicComponentSort/index.vue

+<template>
+  <div class="dynamic-sort">
+  	<div :class="['dynamic-sort__item', { 'active': curEleIndex === item.index }]" v-for="(item, index) in layout" :key="index" @click="handleComponentClick(item.point, item.index)">
+			{{ item.title }}
+		</div>
+  </div>
+</template>
+<script lang="ts" src="./index.ts"></script>
+<style lang="less" scoped>
+	.dynamic-sort {
+		padding: 12px;
+		&__item {
+			background-color: #fff;
+			border-radius: 4px;
+			border: 1px solid #f7f7f7;
+			color: #333;
+			font-size: 13px;
+			padding: 8px 12px;
+			margin-bottom: 8px;
+			&:hover {
+				cursor: pointer;
+				border-color: #2d8cf0;
+			}
+			&.active {
+				border-color: #2d8cf0;
+			}
+		}
+	}
+</style>

app/web/page/editor/component/DynamicForm/component/TableModal/index.vue

@@ -30,11 +30,13 @@
             <template v-for="(item, index) in table">
               <div v-show="activeName === index">
                 <QGTable
+                  :show-selected="true"
                   :ref="`qgTable${index}`"
                   :columns="item.columns"
                   :request="item.query"
                   :hideAdd="true"
                   :height="500"
+                  :title="title"
                   @on-selection-change="selectionChange"
                   @on-page-change="changePageNo"
                 >

app/web/page/editor/component/DynamicFormTabs/index.ts

@@ -2,9 +2,10 @@ import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
 import { Getter } from 'vuex-class';
 import DynamicForm from '@editor/component/DynamicForm/index.vue';
 import DynamicPageForm from '@editor/component/DynamicPageForm/index.vue';
+import DynamicComponentSort from '@editor/component/DynamicComponentSort/index.vue';
 // import EventBus from '@service/eventBus.service';
 
-@Component({ components: { DynamicPageForm, DynamicForm }, name: 'RecordModal' })
+@Component({ components: { DynamicPageForm, DynamicForm, DynamicComponentSort }, name: 'RecordModal' })
 export default class DynamicFormTabs extends Vue {
 
   @Getter('curRightTabName') curRightTabName!: string | null;

app/web/page/editor/component/DynamicFormTabs/index.vue

@@ -7,6 +7,9 @@
     <TabPane name="页面设置" label="页面设置">
        <dynamic-page-form @modProps="modProps" @resizedChildEvent="resizedChildEvent"></dynamic-page-form> 
     </TabPane>
+    <TabPane name="组件管理" label="组件管理">
+       <dynamic-component-sort /> 
+    </TabPane>
   </Tabs>
 </template>
 <script lang="ts" src="./index.ts"></script>

app/web/page/editor/component/OperationPanel/index.vue

@@ -2,7 +2,7 @@
   <div class="Dcm-container-panel_container">
     <title-preview @click.native.stop="handlePageSetClick" />
     <div :class="[{'Dcm-container-panel_in': isDragIn, 'Dcm-container-panel_draging': isDraging}, 'Dcm-container-panel']" @dragover.prevent @dragenter="dragenter" @dragover="dragover"
-      @dragleave="dragleave" @drop="drops">
+      @dragleave="dragleave" @drop="drops" id="DcmContainerPanel">
       <grid-layout
           :layout.sync="layout"
           :col-num="gridLayout.colNum"

app/web/page/editor/component/QgTable/index.vue

@@ -26,18 +26,60 @@
           <slot></slot>
         </div>
       </div>
-      <Table :height="height" @on-select-cancel="selectionCancel" @on-selection-change="selectionChange" :columns="renderColumns" :data="tableData" class="tableStyle"></Table>
-      <Page
-        :total="total"
-        v-if="total > 0"
-        show-elevator
-        show-sizer
-        class="pageStyle"
-        :current="searchForm.pageNo"
-        :pageSize="searchForm.pageSize"
-        @on-change="changePageNo"
-        @on-page-size-change="changePageSize"
-      />
+      <Tabs class="table-tabs" v-if="showSelected" :value="selectedTab">
+        <TabPane name="1" :label="`全部${title}`">
+          <Table
+            :height="height"
+            @on-select-cancel="selectionCancel"
+            @on-selection-change="selectionChange"
+            :columns="renderColumns"
+            :data="tableData"
+            class="tableStyle"
+          />
+          <Page
+            :total="total"
+            v-if="total > 0"
+            show-elevator
+            show-sizer
+            class="pageStyle"
+            :current="searchForm.pageNo"
+            :pageSize="searchForm.pageSize"
+            @on-change="changePageNo"
+            @on-page-size-change="changePageSize"
+          />
+        </TabPane>
+        <TabPane name="2" :label="`已选${title}`">
+          <Table
+            :height="height"
+            @on-select-cancel="selectionCancel"
+            @on-selection-change="selectionChange"
+            :columns="renderColumns"
+            :data="tableData"
+            class="tableStyle"
+          />
+        </TabPane>
+      </Tabs>
+      <template v-else>
+          <Table
+            :height="height"
+            @on-select-cancel="selectionCancel"
+            @on-selection-change="selectionChange"
+            :columns="renderColumns"
+            :data="tableData"
+            class="tableStyle"
+          />
+          <Page
+            :total="total"
+            v-if="total > 0"
+            show-elevator
+            show-sizer
+            class="pageStyle"
+            :current="searchForm.pageNo"
+            :pageSize="searchForm.pageSize"
+            @on-change="changePageNo"
+            @on-page-size-change="changePageSize"
+          />
+      </template>
     </div>
   </div>
 </template>
@@ -53,7 +95,9 @@ export default {
       type: Array,
       default: () => ([])
     },
+    title: String,
     hideAdd: Boolean,
+    showSelected: Boolean,
     request: Function,
     toolBar: Function,
     height: Number,
@@ -68,6 +112,7 @@ export default {
         pageNo: 1,
       },
       searchCondition: [],
+      selectedTab: '1'
     };
   },
   watch: {
@@ -98,6 +143,7 @@ export default {
       this.$refs.searchForm.validate(async val => {
         if (val) {
           this.searchForm.pageNo = page;
+          this.selectedTab = '1';
           const getQueryData = (await this.request(this.searchForm)) || {};
           this.tableData = getQueryData.data || [];
           this.total = getQueryData.total || 0;
@@ -261,4 +307,7 @@ export default {
     display: inline-block;
   }
 }
+.table-tabs {
+  width: 1030px;
+}
 </style>

package-lock.json

@@ -1501,9 +1501,9 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.3.1",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.3.1.tgz",
-      "integrity": "sha512-kNJvDx0WMW7zhn7+tjg9rFbsMsezcMro1nAjqNU1YuSWLNMjrrRJiaSWhEf6Al0hN8IvLW8zotsxHbuwvx+RYg==",
+      "version": "0.3.2",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.3.2.tgz",
+      "integrity": "sha512-Oo5NIvedZwkYk4SKVzDoK1psMC0aTWBrbYz7mkAz4z+8RboU40Kq5eWgmGhVC/t0XT+Au30teslFtN44F/BLRA==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
         "@qg/cherry-ui": "^2.23.4",

package.json

@@ -27,7 +27,7 @@
     "@hubcarl/json-typescript-mapper": "^2.0.0",
     "@qg/apollo-nodejs": "^2.1.2",
     "@qg/cherry-ui": "2.23.4",
-    "@qg/citrus-ui": "0.3.1",
+    "@qg/citrus-ui": "0.3.2",
     "@riophae/vue-treeselect": "^0.4.0",
     "@types/lodash": "^4.14.117",
     "@types/node": "^10.12.0",