imatrix-ui 2.9.20-dw → 2.9.22-dw

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imatrix-ui",
-  "version": "2.9.20-dw",
+  "version": "2.9.22-dw",
   "description": "前端组件库：表格、表单、组织结构树等",
   "main": "lib/super-ui.umd.min.js",
   "private": false,

package/packages/department-user-tree-inline/src/department-user-multiple-tree-inline.vue

@@ -33,7 +33,7 @@
               <!-- @node-click="handleNodeClick" 移除节点点击，不然会造成节点不可选择时，点击也会选择节点 -->
             </div>
 
-            <div v-if="searchValue && searchValue.length > 0 || selectResult.length > 0" style="height:100%;overflow: hidden;">
+            <div v-if="searchValue && searchValue.length > 0" style="height:100%;overflow: hidden;">
               <user-result :grid-data="searchResult" :select-result="selectResult" :height="height" :contain-branch="containBranch" :multiple="true" :is-search-result="true" @addUser="selectUser" />
             </div>
           </el-main>

package/packages/super-grid/src/apis.js

@@ -18,6 +18,11 @@ import {
 import eventBus from './eventBus'
 import { isPromise } from '../../../src/utils/common-util'
 const apis = {
+  // 列表工具栏控件刷新列表数据。添加该方法解决工具栏值清空后，列表内容没有还原问题
+  toolbarRefresh(parentRowIds, isLineEdit, toolbarFieldParam, isDeleteSubTableData) {
+    this.toolbarFieldParam = toolbarFieldParam
+    return this.refresh(parentRowIds, isLineEdit, toolbarFieldParam, isDeleteSubTableData)
+  },
   // 刷新列表数据
   refresh(parentRowIds, isLineEdit, toolbarFieldParam, isDeleteSubTableData) {
     return new Promise((resolve, reject) => {
@@ -26,8 +31,8 @@ const apis = {
         const gridParams = store.get(this.code)
         this.$set(gridParams.options, 'subTableData', null)
       }
-      if (toolbarFieldParam && toolbarFieldParam.length > 0) {
-        this.toolbarFieldParam = toolbarFieldParam
+      if (!toolbarFieldParam && this.toolbarFieldParam) {
+        toolbarFieldParam = this.toolbarFieldParam
       }
       if (this.$refs) {
         if (typeof (parentRowIds) !== 'undefined' && parentRowIds !== null && parentRowIds instanceof Array && parentRowIds.length > 0) {

package/packages/super-grid/src/super-grid.vue

@@ -1835,24 +1835,22 @@ export default {
       // 修改当前页为第1页
       this.currentPage = 1
       // 将toolbar 参数和查询表单参数合并
-      if (searchForm) {
-        if (searchForm.length > 0) {
-          if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
-            if (searchForm.length === 1) {
-              searchForm[0].leftBracket = '('
-              searchForm[0].rightBracket = ')'
-            }
-            if (searchForm[searchForm.length - 1].joinSign === 'or') {
-              searchForm[searchForm.length - 1].joinSign = 'and'
-            }
-            // 拼接
-            // param.concat(toolbarFieldParam)
-            Array.prototype.push.apply(searchForm, this.toolbarFieldParam)
+      if (searchForm && searchForm.length > 0) {
+        if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
+          if (searchForm.length === 1) {
+            searchForm[0].leftBracket = '('
+            searchForm[0].rightBracket = ')'
           }
-        } else {
-          if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
-            searchForm = this.toolbarFieldParam
+          if (searchForm[searchForm.length - 1].joinSign === 'or') {
+            searchForm[searchForm.length - 1].joinSign = 'and'
           }
+          // 拼接
+          // param.concat(toolbarFieldParam)
+          Array.prototype.push.apply(searchForm, this.toolbarFieldParam)
+        }
+      } else {
+        if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
+          searchForm = this.toolbarFieldParam
         }
       }
       this.search(searchForm, true)
@@ -2420,9 +2418,13 @@ export default {
       }
     },
     resetSearch() {
+      let searchForm = null
+      if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
+        searchForm = this.toolbarFieldParam
+      }
       // 修改当前页为第1页
       this.currentPage = 1
-      this.search(null, false)
+      this.search(searchForm, false)
     },
     // 获取列信息
     getColumnInformation() {

package/packages/workgroup-tree/src/workgroup-tree.vue

@@ -6,7 +6,7 @@
       :title="myTitle"
       :close-on-click-modal="false"
       append-to-body
-      :width="width"
+      :width="multiple?'60%':'40%'"
       @open="$emit('open')"
       @opend="$emit('opend')"
       @close="$emit('close')"
@@ -50,7 +50,7 @@ export default {
     // 弹框的宽度
     width: {
       type: String,
-      default: '30%'
+      default: '60%'
     }
 
   },
@@ -64,6 +64,7 @@ export default {
     }
   },
   methods: {
+    // 工作组单选回调
     result(selectNodeInfo) {
       this.$emit('close', selectNodeInfo)
     },

package/packages/workgroup-tree-inline/src/search-result.vue

@@ -0,0 +1,168 @@
+<template>
+  <div style="height: 100%">
+    <el-table
+      ref="superGrid"
+      :data="gridData"
+      row-key="id"
+      :row-class-name="tableRowClassName"
+      :max-height="myHeight"
+      border
+      fit
+      @row-click="rowClick"
+      @row-dblclick="rowDblclick"
+    >
+      <el-table-column v-if="multiple === false" width="60" fixed>
+        <template slot-scope="scope">
+          <el-radio v-model="singleWorkgroupIndex" :label="scope.$index" @change="selectWorkgroup">
+            {{ scope.$index+1 }}
+          </el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="multiple && isSearchResult" fixed :label="$t('imatrixUIPublicModel.edit')" align="center" width="60px">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="isDisable(scope.row)" circle @click="addWorkgroup(scope.$index, scope.row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="multiple && !isSearchResult" fixed :label="$t('imatrixUIPublicModel.edit')" align="center" width="60px">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeWorkgroup(scope.$index, scope.row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="multiple" :label="$t('superGrid.index')" align="center" width="60px">
+        <template slot-scope="scope">
+          {{ scope.$index+1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('workgroupTree.workingGroupName')"
+        :width="110"
+        prop="name"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.name">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('workgroupTree.workingGroupNumber')"
+        :width="110"
+        prop="code"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.code">{{ scope.row.code }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('workgroupTree.workgroupDescription')"
+        :width="300"
+        prop="description"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.description">{{ scope.row.description }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<style>
+.searchResult {
+  color:red
+}
+.inline-select-custom {
+  width : 100px
+}
+.inline-input-custom {
+  width : 98%
+}
+</style>
+<script>
+export default {
+  name: 'WorkgroupResult',
+  props: {
+    gridData: {
+      type: Array,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 多选树时是否是查询结果列表，用于控制“操作”列按钮的显示
+    isSearchResult: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    selectResult: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }
+
+  },
+  data() {
+    let tableHeight = this.height
+    tableHeight = tableHeight.substring(0, tableHeight.indexOf('px'))
+    const myHeight = (parseInt(tableHeight) + 30) + 'px'
+    return {
+      singleWorkgroupIndex: null, // 选中的用户序号
+      selectedWorkgroup: null,
+      myHeight,
+      language: !window.$locale ? 'cn' : window.$locale
+    }
+  },
+  created() {
+  },
+  methods: {
+    // 移除工作组
+    removeWorkgroup(index, row) {
+      this.$emit('removeWorkgroup', index, row)
+    },
+    // 添加工作组
+    addWorkgroup(index, row) {
+      this.$emit('addWorkgroup', index, row)
+    },
+    // 选中工作组
+    selectWorkgroup(selectVal) {
+      this.$emit('selectResult', this.gridData[selectVal])
+    },
+    rowClick(row, column, event) {
+      this.singleWorkgroupIndex = row.row_index
+      this.$emit('selectResult', row)
+    },
+    tableRowClassName({ row, rowIndex }) {
+      row.row_index = rowIndex
+    },
+    // 双击添加工作组
+    rowDblclick(row, column, event) {
+      if (this.multiple) {
+        this.$emit('addWorkgroup', null, row)
+      } else {
+        this.$emit('resultRowDblclick', row)
+      }
+    },
+    isDisable(row) {
+      if (this.selectResult) {
+        const containWorkgroups = this.selectResult.filter(this.filterWorkgroup(row))
+        if (containWorkgroups && containWorkgroups.length > 0) {
+          return true
+        }
+      }
+      return false
+    },
+    // 判断工作组是否存在的过滤器
+    filterWorkgroup(queryWorkgroup) {
+      return (workgroup) => {
+        return (workgroup.id === queryWorkgroup.id)
+      }
+    }
+  }
+}
+</script>

package/packages/workgroup-tree-inline/src/workgroup-tree-inline.vue

@@ -1,34 +1,74 @@
 <template>
   <div>
     <el-container style="height: 395px">
-      <el-header style="text-align: right; font-size: 12px">
-        <el-autocomplete
-          v-model="filterText"
-          select-when-unmatched
-          class="inline-input inline-input-custom"
-          :fetch-suggestions="querySearch"
-          :placeholder="$t('imatrixUIMessage.pleaseEnterTeamName')"
-          :trigger-on-focus="false"
-          @select="handleSelect"
-          @keyup.enter.native="clickSearch"
-        >
-          <el-button slot="append" icon="el-icon-search" @click="clickSearch" />
-        </el-autocomplete>
-      </el-header>
-      <el-main>
-        <el-tree
-          ref="workgroupTree"
-          :props="defaultProps"
-          :load="loadNode"
-          lazy
-          :show-checkbox="multiple"
-          node-key="id"
-          :render-content="renderContent"
-          :filter-node-method="filterNode"
-          @check="handleCheckNode"
-          @node-click="handleNodeClick"
-        />
-      </el-main>
+      <el-aside width="430px">
+        <el-container style="height: 390px">
+          <el-header style="text-align: right; font-size: 12px">
+            <el-autocomplete
+              v-model="filterText"
+              select-when-unmatched
+              class="inline-input inline-input-custom"
+              :fetch-suggestions="querySearch"
+              :placeholder="$t('imatrixUIMessage.pleaseEnterTeamName')"
+              :trigger-on-focus="false"
+              @select="handleSelect"
+              @keyup.enter.native="clickSearch"
+            >
+              <el-button slot="append" icon="el-icon-search" @click="clickSearch" />
+            </el-autocomplete>
+          </el-header>
+          <el-main>
+            <div v-if="!searchValue" style="padding-top:5px;overflow:auto;width: auto;display: inline-block !important;">
+              <el-tree
+                ref="workgroupTree"
+                :props="defaultProps"
+                :load="loadNode"
+                lazy
+                :show-checkbox="multiple"
+                node-key="id"
+                :render-content="renderContent"
+                :filter-node-method="filterNode"
+                @check="handleCheckNode"
+                @node-click="handleNodeClick"
+              />
+            </div>
+            <div v-if="searchValue && searchValue.length > 0" style="height:100%;overflow: hidden;">
+              <workgroup-result
+                ref="workgroupResult"
+                :grid-data="searchResult"
+                :select-result="selectResult"
+                :height="height"
+                :multiple="multiple"
+                :is-search-result="true"
+                @selectResult="getSelectWorkgroup"
+                @resultRowDblclick="resultRowDblclick"
+                @addWorkgroup="addWorkgroup"
+              />
+            </div>
+          </el-main>
+        </el-container>
+      </el-aside>
+      <el-container v-if="multiple">
+        <el-aside width="2px">
+          <table border="1px" cellpadding="0" cellspacing="0" style="height:100%;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none;border-left-color: #cccccc" />
+        </el-aside>
+        <el-main style="padding: 10px">
+          <div style="text-align:left;font-size:16px">
+            {{ $t('imatrixUIMessage.selectedWorkingGroup') }}:
+          </div>
+          <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
+            <workgroup-result
+              :grid-data="selectResult"
+              :height="height"
+              :multiple="multiple"
+              :is-search-result="false"
+              @selectResult="getSelectWorkgroup"
+              @resultRowDblclick="resultRowDblclick"
+              @removeWorkgroup="removeWorkgroup"
+            />
+          </div>
+        </el-main>
+      </el-container>
     </el-container>
   </div>
 </template>
@@ -45,8 +85,12 @@
 import localStorage from '../../../src/utils/local-storage'
 import utils from '../../utils/utils'
 import workgroupTreeService from './workgroup-tree-service'
+import WorkgroupResult from './search-result.vue'
 export default {
   name: 'InlineWorkgroupTree',
+  components: {
+    WorkgroupResult
+  },
   props: {
     // 是否是多选树，默认是true
     multiple: {
@@ -69,12 +113,15 @@ export default {
         children: 'children',
         isLeaf: 'leaf'
       },
-      containBranch: false, // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
+      containBranch: false, // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给工作组，例如：部门1(分支1)
       tenantNodeId: -1, // 公司节点的id
       restaurants: [], // 查询的备选值
       searchValue: null, // 查询条件
+      searchResult: [], // 工作组的查询结果
+      selectResult: [], // 工作组的选中结果
       searchStoreKey: 'searchWorkgroup',
       selectNodeInfo: null, // 单选时，选择的工作组信息
+      selectWorkgroupData: null,
       tenantInfo: {} // 公司根节点信息
     }
   },
@@ -100,6 +147,63 @@ export default {
   methods: {
     ...utils,
     ...workgroupTreeService,
+    // 将查询结果中指定工作组添加到已选择工作组集合中
+    addWorkgroup(index, workgroup) {
+      const containWorkgroups = this.selectResult.filter(this.filterWorkgroup(workgroup))
+      if (containWorkgroups && containWorkgroups.length === 0) {
+        this.selectResult.push(workgroup)
+      }
+    },
+    filterWorkgroup(queryWorkgroup) {
+      return (workgroup) => {
+        return (workgroup.id === queryWorkgroup.id)
+      }
+    },
+    removeWorkgroup(index, workgroup) {
+      if (this.$refs.workgroupTree) {
+        // 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
+        const checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
+        const currentCheckedWorkgroupNodeIds = checkedKeys.filter(this.filterWorkgroupNode(workgroup))
+        if (currentCheckedWorkgroupNodeIds.length > 0) {
+          // 表示当前工作组是选中的状态，需要去掉
+          currentCheckedWorkgroupNodeIds.forEach(workgroupNodeId => {
+            this.$refs.workgroupTree.setChecked(workgroupNodeId, false)
+          })
+        }
+      }
+      this.selectResult = this.removeRow(this.selectResult, workgroup)
+      if (!this.selectResult || this.selectResult.length === 0) {
+        // 已选结果面板没有内容，则左侧树节点也不要有选中节点了
+        if (this.$refs.workgroupTree) {
+          this.$refs.workgroupTree.setCheckedKeys([])
+        }
+      }
+    },
+    filterWorkgroupNode(queryWorkgroup) {
+      return (workgroupNodeId) => {
+        return (workgroupNodeId === queryWorkgroup.id)
+      }
+    },
+    getSelectWorkgroup(workgroup) {
+      this.packageSelectResult(workgroup)
+    },
+    resultRowDblclick(workgroup) {
+      this.packageSelectResult(workgroup)
+      this.$emit('result', this.selectNodeInfo)
+    },
+    packageSelectResult(workgroup) {
+      workgroup.tenantCode = this.tenantInfo.code
+      workgroup.tenantName = this.tenantInfo.tenantName
+      const selectNodeInfo = {
+        id: workgroup.id,
+        name: workgroup.name,
+        code: workgroup.code,
+        subCompanyName: workgroup.subCompanyName,
+        workgroup: workgroup
+      }
+      // 表示是勾选单选按钮或 选中树节点
+      this.selectNodeInfo = selectNodeInfo
+    },
     handleSelect(item) {
       this.handleSelectUtil(item, localStorage)
     },
@@ -134,12 +238,16 @@ export default {
         if (data.id === this.tenantNodeId) {
           // 表示选中了公司节点
           this.checkedAllWorkgroups(data)
+        } else {
+          this.selectResult.push(JSON.parse(data.data))
         }
       } else {
         // 表示正取消选中data节点，同时要取消其子节点的选中状态
         if (data.id === this.tenantNodeId) {
           // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
           this.$refs.workgroupTree.setCheckedKeys([])
+        } else {
+          this.selectResult = this.removeRow(this.selectResult, JSON.parse(data.data))
         }
       }
     },
@@ -194,6 +302,8 @@ export default {
         if (data.id === this.tenantNodeId) {
           // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
           this.$refs.workgroupTree.setCheckedKeys([])
+        } else {
+          this.selectResult = this.removeRow(this.selectResult, JSON.parse(data.data))
         }
       } else {
         // 表示当前节点不是选中的状态，需要勾选该节点
@@ -201,6 +311,8 @@ export default {
         if (data.id === this.tenantNodeId) {
           // 表示当前正选中根节点公司节点，则需要勾选所有节点的选中状态
           this.checkedAllWorkgroups(data)
+        } else {
+          this.selectResult.push(JSON.parse(data.data))
         }
       }
     },
@@ -208,17 +320,43 @@ export default {
       // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
       return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'WORKGROUP'
     },
-    selectWorkgroup() {
-      // 是否需要显示提示框，默认不显示
-      var showTip = false
-      if (this.multiple) {
-        var selectNodeInfo = {
-          ids: [],
-          names: [],
-          codes: [],
-          workgroups: []
+    singleSetValue() {
+      let showTip = false
+      if (this.searchValue) {
+        if (this.selectNodeInfo) {
+          this.$emit('result', this.selectNodeInfo)
+        } else {
+          showTip = true
         }
-
+      } else {
+        const data = this.$refs.workgroupTree.getCurrentNode()
+        if ((data && data !== null) && this.isWorkgroupNode(data)) {
+          this.selectSingleNode(data, true)
+        } else {
+          showTip = true
+        }
+      }
+      this.showTip(showTip)
+    },
+    multipleSetValue() {
+      let showTip = false
+      var selectNodeInfo = {
+        ids: [],
+        names: [],
+        codes: [],
+        workgroups: []
+      }
+      if (this.searchValue) {
+        if (this.selectResult.length > 0) {
+          this.selectResult.forEach(workgroupData => {
+            const node = { id: workgroupData.id, name: workgroupData.name, code: workgroupData.code }
+            this.addSelectedWorkgroupInfo(selectNodeInfo, node, workgroupData)
+          })
+          this.$emit('result', selectNodeInfo)
+        } else {
+          showTip = true
+        }
+      } else {
         var nodes = this.$refs.workgroupTree.getCheckedNodes()
         if (nodes) {
           if (nodes.length === 0) {
@@ -243,15 +381,18 @@ export default {
         } else {
           showTip = true
         }
+      }
+      this.showTip(showTip)
+    },
+    selectWorkgroup() {
+      if (this.multiple) {
+        this.multipleSetValue()
       } else {
-        const data = this.$refs.workgroupTree.getCurrentNode()
-        if (data && data !== null) {
-          this.selectSingleNode(data, true)
-        } else {
-          showTip = true
-        }
+        this.singleSetValue()
       }
-
+    },
+    showTip(showTip) {
+      // 是否需要显示提示框，默认不显示
       if (showTip) {
         this.$alert(this.$t('imatrixUIMessage.pleaseSelectATeam'), this.$t('imatrixUIMessage.tips'), {
           confirmButtonText: this.$t('imatrixUIPublicModel.sure')

package/packages/workgroup-tree-inline/src/workgroup-tree-service.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { getI18n } from '../../../src/utils/util'
 const workgroupTreeService = {
   // 初始化部门树
   initLoad(parentId, node, resolve, checkedKeys) {
@@ -38,6 +39,33 @@ const workgroupTreeService = {
         this.$refs.workgroupTree.store.nodesMap[parentId].expanded = true
       }
     })
+  },
+  querySearch(queryString, cb) {
+    this.searchValue = queryString
+    this.searchResult = []
+    this.selectNodeInfo = null
+    if (queryString && queryString.length > 0) {
+      this.filterAppendNodes(queryString)
+      cb([])
+    } else {
+      cb([])
+    }
+  },
+  filterAppendNodes(value) {
+    const param = {
+      searchValue: value
+    }
+    this.$http.post(Vue.prototype.baseAPI + '/component/organization-trees/search-workgroups', param).then(result => {
+      this.searchResult = result
+      if (this.searchResult.length === 0) {
+        this.$message({
+          showClose: true,
+          type: 'error',
+          message: getI18n().t('imatrixUIMessage.queryResultIsEmpty')
+        })
+        return
+      }
+    })
   }
 }
 export default workgroupTreeService

package/packages/workgroup-user-tree/src/workgroup-user-tree.vue

@@ -6,7 +6,7 @@
       :title="myTitle"
       :close-on-click-modal="false"
       append-to-body
-      :width="width"
+      :width="multiple?'60%':'40%'"
       @open="$emit('open')"
       @opend="$emit('opend')"
       @close="$emit('close')"