three-trees-ui 1.0.52 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-trees-ui",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "publicPath": "/ui",
   "author": "hotent",
   "private": false,
@@ -133,14 +133,5 @@
     "webpack-node-externals": "^1.7.2",
     "xlsx": "^0.16.6"
   },
-  "license": "MIT",
-  "description": "[![NPM version](https://img.shields.io/npm/v/dva.svg?style=flat)](https://npmjs.org/package/three-trees-ui) [![NPM downloads](http://img.shields.io/npm/dm/dva.svg?style=flat)](https://npmjs.org/package/three-trees-ui) [![Dependencies](https://david-dm.org/dvajs/dva/status.svg)](https://david-dm.org/dvajs/three-trees-ui)",
-  "directories": {
-    "example": "examples",
-    "test": "tests"
-  },
-  "repository": {
-    "type": "git",
-    "url": "http://10.10.78.172:2080/gitlab/xuyh/three-trees-ui.git"
-  }
+  "license": "MIT"
 }

package/packages/CustomDialog/src/customDialog.js

@@ -1,6 +1,5 @@
 import utils from '@/utils.js'
 import mobileMode from '@/mixins/mobileMode.js'
-import { Loading } from 'element-ui'
 
 export default {
   mixins: [mobileMode],
@@ -11,7 +10,7 @@ export default {
       total: 0,
       form: {},
       itemSavestate: {},
-      loadingInstance: null,
+      tableLoading: false,
     }
   },
   methods: {
@@ -26,19 +25,14 @@ export default {
         this.dialogData = data
       }
     },
-    closeLoadingInstance() {
-      if (this.loadingInstance) {
-        this.loadingInstance.close()
-      }
+    closeTableLoading() {
+      this.tableLoading = false
     },
     getDialoglistJson(pagination) {
       if (this.isMobile) {
         this.$showLoading()
       } else {
-        this.loadingInstance = Loading.service({
-          fullscreen: true,
-          text: '查询中...',
-        })
+        this.tableLoading = true
       }
       return this.$requestConfig
         .request({
@@ -50,7 +44,7 @@ export default {
           if (this.isMobile) {
             this.$cancelLoading()
           } else {
-            this.loadingInstance.close()
+            this.closeTableLoading()
           }
           const listKey = pagination.listKey
             ? pagination.listKey
@@ -91,7 +85,7 @@ export default {
           if (this.isMobile) {
             this.$cancelLoading()
           } else {
-            this.loadingInstance.close()
+            this.closeTableLoading()
           }
         })
     },

package/packages/CustomDialog/src/customDialog.vue

@@ -8,6 +8,7 @@
       append-to-body
       top="6vh"
       width="75%"
+      class="hontent-custom-dialog"
       @opened="afterOpen"
     >
       <el-container :style="style" style="overflow: auto">
@@ -267,6 +268,8 @@
           <el-main ref="customTableRef" class="custom-dialog_main">
             <el-table
               ref="orgTable"
+              v-loading="tableLoading"
+              element-loading-text="查询中..."
               :data="dialogData"
               stripe
               border
@@ -274,6 +277,7 @@
               size="medium"
               style="width: 100%"
               :height="tableHeight"
+              :row-key="isSetPk !== '' ? isSetPk : 'custom_dialog_rowId'"
               @row-click="orgRowClick"
               @selection-change="orgTableSelection"
               @select="onTableSelect"
@@ -283,6 +287,7 @@
                 v-if="customDialog.selectNum != 1"
                 type="selection"
                 align="center"
+                reserve-selection
                 width="55"
               ></el-table-column>
               <el-table-column
@@ -343,6 +348,84 @@
             </el-row>
           </el-footer>
         </el-container>
+        <div v-if="isSetPk !== ''" id="right" class="list-selector__selected">
+          <el-card shadow="hover">
+            <div slot="header" class="selector-selected__header clearfix">
+              <span>已选择({{ selectsCount }})</span>
+              <el-button
+                type="text"
+                style="float: right; padding: 3px 0"
+                @click="clearAllSelects"
+              >
+                {{ $t('ht.common.clear') }}
+              </el-button>
+            </div>
+            <el-scrollbar
+              v-if="selectsCount > 0"
+              class="selector-selected__scroll"
+            >
+              <draggable
+                v-model="selects"
+                class="selector-selected__wrap"
+                tag="ul"
+                v-bind="dragOptions"
+                handle=".list-selector__handle"
+                @start="isDragging = true"
+                @end="isDragging = false"
+              >
+                <li
+                  v-for="(select, selectIndex) in selects"
+                  :key="select[primaryFieldProp] + selectIndex"
+                  class="selector-selected__item"
+                >
+                  <div
+                    class="selector-selected__item-left"
+                    @dblclick="removeSelected(select)"
+                  >
+                    <ht-icon
+                      v-if="!single"
+                      name="drag"
+                      class="list-selector__handle follow-theme-color"
+                      width="16"
+                      height="16"
+                      fill=""
+                    />
+                    <div class="selector-text">
+                      {{ select[primaryFieldProp] }}
+                    </div>
+                  </div>
+                  <i
+                    v-if="!single"
+                    :class="
+                      selectIndex == 0 ? 'is-disabled' : 'selector-selected__up'
+                    "
+                    class="el-icon-top hover-follow-theme-color"
+                    @click="sort(select, 'up')"
+                  ></i>
+                  <i
+                    v-if="!single"
+                    class="el-icon-bottom hover-follow-theme-color"
+                    :class="
+                      selectIndex == selects.length - 1
+                        ? 'is-disabled'
+                        : 'selector-selected__down'
+                    "
+                    @click="sort(select, 'down')"
+                  ></i>
+                  <i
+                    class="el-icon-error selector-selected__remove hover-follow-theme-color"
+                    @click="removeSelected(select)"
+                  ></i>
+                </li>
+              </draggable>
+            </el-scrollbar>
+            <div v-else class="el-tree__empty-block">
+              <span class="el-tree__empty-text">
+                {{ t('el.table.emptyText') }}
+              </span>
+            </div>
+          </el-card>
+        </div>
       </el-container>
       <span slot="footer" class="dialog-footer" style="text-align: center">
         <el-button size="small" type="primary" @click="dialogConfirm">
@@ -442,8 +525,10 @@
   import form from '@/mixins/form.js'
   import dialog from './customDialog.js'
   import CustomQuery from '@/services/CustomQuery'
+  const draggable = require('vuedraggable')
   export default {
     name: 'CustomDialog',
+    components: { draggable },
     mixins: [dialog, locale, inputName, permission, form],
     props: {
       custdialog: {
@@ -528,9 +613,17 @@
         customDialogParams: {},
         treeDialogConfig: null,
         isPreview: false,
+        isDisabledConfirmBtn: true,
+        selects: [],
+        fromKey: '',
+        isSetPk: '',
+        primaryFieldProp: '',
       }
     },
     computed: {
+      selectsCount() {
+        return this.selects && this.selects.length > 0 ? this.selects.length : 0
+      },
       //默认展开的节点的 key 的数组
       defaultExpandedKeys: function() {
         if (
@@ -575,10 +668,10 @@
             let currentObj = returnStr.find((item) => {
               return item.comment.toLowerCase() === from
             })
-            const fromKey = currentObj ? currentObj.field : ''
-            if (fromKey) {
+            this.fromKey = currentObj ? currentObj.field : ''
+            if (this.fromKey) {
               this.selectOrgs = val.filter((item) => {
-                return this.value.split(',').includes(item[fromKey])
+                return this.value.split(',').includes(item[this.fromKey])
               })
             }
           }
@@ -586,6 +679,13 @@
         immediate: true,
         deep: true,
       },
+      selects(val) {
+        if (val && val.length) {
+          this.isDisabledConfirmBtn = false
+        } else {
+          this.isDisabledConfirmBtn = true
+        }
+      },
     },
     mounted() {
       this.$root.$on('resize', () => {
@@ -611,6 +711,7 @@
       },
       showDialog(isMounted = false, isPreview = false) {
         this.isPreview = isPreview
+        this.selects = []
         this.fixedParams = {}
         // 如果已存在配置信息就不去请求配置信息 直接初始化数据
         if (this.dialogConfig) {
@@ -711,6 +812,14 @@
         }
         if (customDialog.style == 0 || customDialog.style == 2) {
           //列表
+          let returnStrArray = JSON.parse(customDialog.resultfield)
+          if (returnStrArray && returnStrArray.length > 0) {
+            let result = returnStrArray.filter((item) => item.isPK)
+            if (result && result.length > 0) {
+              this.isSetPk = result[0].field
+              this.primaryFieldProp = this.isSetPk
+            }
+          }
           setTimeout(() => {
             this_.customDialogShow(
               {
@@ -749,6 +858,15 @@
             }
           }
         }
+        if (this.isSetPk !== '') {
+          let valueData = this.value ? this.value.split(',') : []
+          for (var i = 0; i < valueData.length; i++) {
+            let obj = {}
+            obj[this.isSetPk] = valueData[i]
+            this.selects.push({ ...obj })
+          }
+          this.selectOrgs = [...this.selects]
+        }
       },
       initTableHeight() {
         this.$nextTick(() => {
@@ -766,12 +884,14 @@
         if (this.customDialog.selectNum === 1) {
           this.propsData = []
           this.propsData.push(data)
+          this.selects = this.propsData
         }
       },
       getChecked() {
         // 多选
         if (this.customDialog.selectNum === -1) {
           this.propsData = this.$refs.tree.getCheckedNodes()
+          this.selects = this.propsData
         }
       },
       customDialogShow(pageParam, isMounted = false) {
@@ -1401,23 +1521,35 @@
         return value
       },
       checkList() {
-        const this_ = this
-        setTimeout(() => {
-          //列表
-          if (
-            this_.checkBoxDataAll != undefined &&
-            this_.checkBoxDataAll.length > 0
-          ) {
-            this_.checkBoxDataAll.forEach((row) => {
-              let res = this_.indexArray(this_.dialogData, row)
-              // this_.tableRadioVal = res
-              if (res != -1) {
-                this_.isCurrentChange = true
-                this_.toggleRowSelection(res, true)
+        if (this.isSetPk !== '') {
+          this.checkBoxDataAll = this.selects
+          if (this.customDialog.selectNum === 1) {
+            let resData = this.dialogData.findIndex(
+              (item) =>
+                item.hasOwnProperty(this.isSetPk) &&
+                item[this.isSetPk] == this.checkBoxDataAll[0][this.isSetPk]
+            )
+            this.tableRadioVal = resData
+          } else {
+            let selectedMarkList = []
+            this.checkBoxDataAll.map((item) => {
+              if (item.hasOwnProperty(this.isSetPk)) {
+                selectedMarkList.push(item[this.isSetPk])
+              }
+            })
+            this.dialogData.forEach((row) => {
+              if (selectedMarkList.includes(row[this.isSetPk])) {
+                this.$nextTick(() => {
+                  this.$refs.orgTable.toggleRowSelection(row, true)
+                })
+              } else {
+                this.$nextTick(() => {
+                  this.$refs.orgTable.toggleRowSelection(row, false)
+                })
               }
             })
           }
-        }, 300)
+        }
       },
       toggleRowSelection(res, val) {
         this.$refs.orgTable.toggleRowSelection(this.dialogData[res], val)
@@ -1430,19 +1562,31 @@
           )
           this.selectOrgs = []
           this.selectOrgs.push(row)
+          this.selects = this.selectOrgs
         } else if (this.customDialog.selectNum != 1) {
           this.isCurrentChange = false
           //判断点击列表数据时复选框是否勾选  selected：true不勾选，false勾选
+          let resData = this.selectOrgs.findIndex(
+            (item) =>
+              item.hasOwnProperty(this.isSetPk) &&
+              item[this.isSetPk] == row[this.isSetPk]
+          )
           let selected =
-            this.selectOrgs &&
-            this.selectOrgs.length > 0 &&
-            this.indexArray(this.selectOrgs, row) !== -1
+            this.selectOrgs && this.selectOrgs.length > 0 && resData !== -1
           if (selected) {
             this.isCurrentChange = true
-            let res = this.indexArray(this.selectOrgs, row)
-            this.selectOrgs.splice(res, 1)
+            this.selectOrgs.splice(resData, 1)
+            let selectsIndex = this.selects.findIndex(
+              (item) =>
+                item.hasOwnProperty(this.isSetPk) &&
+                item[this.isSetPk] == row[this.isSetPk]
+            )
+            if (selectsIndex !== -1) {
+              this.selects.splice(selectsIndex, 1)
+            }
           }
           this.$refs.orgTable.toggleRowSelection(row)
+          this.syncSelection2selects()
         }
       },
       //列表复选框有改变时触发
@@ -1489,20 +1633,32 @@
             }
           }
         }
+        this.syncSelection2selects()
       },
       //点击列表某一个复选框时触发
       onTableSelect(rows, row) {
         this.isCurrentChange = false
         //判断点击列表数据时复选框是否勾选  selected：true不勾选，false勾选
+        let resData = this.selectOrgs.findIndex(
+          (item) =>
+            item.hasOwnProperty(this.isSetPk) &&
+            item[this.isSetPk] == row[this.isSetPk]
+        )
         let selected =
-          this.selectOrgs &&
-          this.selectOrgs.length > 0 &&
-          this.indexArray(this.selectOrgs, row) !== -1
+          this.selectOrgs && this.selectOrgs.length > 0 && resData !== -1
         if (selected) {
           this.isCurrentChange = true
-          let res = this.indexArray(this.selectOrgs, row)
-          this.selectOrgs.splice(res, 1)
+          this.selectOrgs.splice(resData, 1)
+          let selectsIndex = this.selects.findIndex(
+            (item) =>
+              item.hasOwnProperty(this.isSetPk) &&
+              item[this.isSetPk] == row[this.isSetPk]
+          )
+          if (selectsIndex !== -1) {
+            this.selects.splice(selectsIndex, 1)
+          }
         }
+        this.syncSelection2selects()
       },
       selectAll(selection) {
         if (this.oldselectOrgs != null && selection.length > 0) {
@@ -1515,6 +1671,7 @@
         } else {
           this.selectOrgs = _.cloneDeep(selection)
         }
+        this.syncSelection2selects()
       },
       checkNode(data, this_, pnode) {
         if (!data.Pid) {
@@ -1571,13 +1728,15 @@
         const this_ = this
         this_.queryParam = ''
         this.setDialogData([])
-        this.closeLoadingInstance()
+        this.closeTableLoading()
         this_.customDialogShowList = false
         //判断是否是点击了确认再点击取消的  inputVal没有值则表示直接点击的取消
         if (!this_.inputVal) {
           this_.selectOrgs = []
+          this_.selects = []
         } else {
           this_.selectOrgs = this_.showData ? [...this_.showData] : ''
+          this_.selects = [...this_.selectOrgs]
           this.checkBoxDataAll = [...this_.selectOrgs]
         }
       },
@@ -1817,6 +1976,7 @@
       clearAll() {
         this.checkBoxDataAll = []
         this.selectOrgs = []
+        this.selects = []
         this.showData = []
         this.propsData = []
         this.syncInputValue()
@@ -2070,6 +2230,80 @@
       handleClose() {
         this.dialogVisible = false
       },
+      // 同步已选行到已选数据中去
+      syncSelection2selects() {
+        // 复制一份当前已选数据
+        let tmpSelects = [...this.selects]
+        // 先将当前页中的数据从已选数据中移除
+        this.dialogData.forEach((m) => {
+          let Index = tmpSelects.findIndex(
+            (item) =>
+              item.hasOwnProperty(this.isSetPk) &&
+              item[this.isSetPk] == m[this.isSetPk]
+          )
+          if (Index !== -1) {
+            tmpSelects.splice(Index, 1)
+          }
+        })
+        // 将剩余的已选数据与当前页选中的数据合并
+        tmpSelects = [...tmpSelects, ...this.$refs.orgTable.selection]
+        let copytmpSelects = _.cloneDeep(tmpSelects)
+        if (this.isSetPk !== '') {
+          this.selects = this.fn1(copytmpSelects, this.isSetPk)
+        }
+
+        // 数组去重
+        this.selects = _.uniqWith(this.selects, _.isEqual)
+      },
+      fn1(tempArr, isSetPk) {
+        for (let i = 0; i < tempArr.length; i++) {
+          for (let j = i + 1; j < tempArr.length; j++) {
+            //排除custom_dialog_rowId比较
+            let a = tempArr[i]
+            let b = tempArr[j]
+            delete a.custom_dialog_rowId
+            delete b.custom_dialog_rowId
+            if (
+              tempArr[i].hasOwnProperty(isSetPk) &&
+              tempArr[j].hasOwnProperty(isSetPk) &&
+              tempArr[i][this.isSetPk] == tempArr[j][this.isSetPk] &&
+              _.isEqual(a, b)
+            ) {
+              tempArr.splice(j, 1)
+              j--
+            }
+          }
+        }
+        return tempArr
+      },
+      removeSelected(select) {
+        this.selects.splice(select, 1)
+        this.selectOrgs.forEach((row) => {
+          if (row[this.isSetPk] == select[this.isSetPk]) {
+            // 对比成功之后，取消选中
+            this.$nextTick(() => {
+              this.$refs.orgTable.toggleRowSelection(
+                this.dialogData.find((item) => {
+                  return item[this.isSetPk] == select[this.isSetPk]
+                }),
+                false
+              )
+              // 取消选中后还要把数据删除
+              let res = this.indexArray(this.selectOrgs, row)
+              this.selectOrgs.splice(res, 1)
+            })
+          }
+        })
+      },
+      clearAllSelects() {
+        this.selects = []
+        this.selectOrgs = []
+        this.$refs.orgTable.clearSelection()
+      },
+      //显示字段排序
+      sort(select, type) {
+        this.selects = utils.arrayMove(this.selects, select, type)
+      },
     },
   }
 </script>
@@ -2266,4 +2500,124 @@
     min-height: 350px;
     padding: 0 20px !important;
   }
+  .list-selector__selected {
+    height: 100%;
+    .selector-selected__wrap {
+      list-style: none;
+      width: calc(100% - 24px);
+      padding: 10px;
+
+      li {
+        line-height: 20px;
+      }
+
+      li + li {
+        margin-top: 10px;
+      }
+
+      .selector-selected__item {
+        height: 36px;
+        padding: 0 6px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &:hover {
+          background-color: #f8f8f8;
+        }
+
+        .selector-selected__remove {
+          color: #bfbfbf;
+          &:hover {
+            color: #409eff;
+          }
+        }
+        .selector-selected__up {
+          &:hover {
+            color: #409eff;
+          }
+        }
+        .selector-selected__down {
+          &:hover {
+            color: #409eff;
+          }
+        }
+
+        .selector-selected__item-left {
+          display: flex;
+          align-items: center;
+          width: 155px;
+          .selector-text {
+            width: 120px;
+            text-align: left;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+
+          .list-selector__handle {
+            cursor: move;
+          }
+
+          div {
+            margin-left: 10px;
+          }
+        }
+        i {
+          font-size: 16px;
+        }
+      }
+    }
+    .el-tree__empty-block {
+      height: 80px;
+    }
+    .is-disabled {
+      color: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+</style>
+
+<style lang="scss">
+  .hontent-custom-dialog {
+    #container {
+      display: flex; /*中间弹性盒布局*/
+      flex-wrap: nowrap; /*排列不下时不换行*/
+      text-align: center;
+      padding-left: 24px;
+    }
+    #center {
+      order: 1;
+      flex: 1;
+      width: var(--middleWidth);
+      .el-header {
+        border-bottom: none !important;
+      }
+    }
+    #left {
+      order: 0;
+      width: calc(var(--leftWidth) - 24px);
+      padding-right: 24px;
+    }
+    #right {
+      order: 2;
+      width: 250px;
+      padding-left: 24px;
+    }
+    .el-card__body {
+      height: calc(var(--customHeight) - 130px - 48px - 25px - 24px);
+      overflow: auto;
+      @include base-scrollbar;
+    }
+    .el-card__header {
+      height: 48px;
+      background: #f9f9f9;
+      line-height: 24px;
+      text-align: left;
+      font-size: 16px;
+    }
+    .el-dialog__footer {
+      padding: 20px 24px 0px;
+    }
+  }
 </style>

package/packages/Icon/src/icons/drag.js

@@ -0,0 +1,14 @@
+import Icon from '../main.vue'
+
+Icon.register({
+  drag: {
+    width: 1024,
+    height: 1024,
+    paths: [
+      {
+        d:
+          'M128 0h256v227.584H128z m512 0h256v227.584H640zM128 398.208h256v227.584H128V398.208z m512 0h256v227.584H640V398.208z m-512 398.208h256V1024H128z m512 0h256V1024H640z',
+      },
+    ],
+  },
+})

package/packages/Icon/src/icons/index.js

@@ -21,6 +21,7 @@ import './component'
 import './compress'
 import './dialog'
 import './duration'
+import './drag'
 import './expand'
 import './eye'
 import './eye-slash'