agilebuilder-ui 1.1.45 → 1.1.46-sit2

package/packages/department-tree-inline/src/department-single-tree-inline.vue

@@ -17,47 +17,51 @@
         </el-autocomplete>
       </el-header>
       <el-main style="padding: 10px">
-        <div
-          v-if="!searchValue"
-          style="padding-top: 5px; overflow: auto; width: 100%; display: inline-block !important"
-        >
-          <el-tree
-            ref="deparmentTree"
-            :filter-node-method="filterNode"
-            :load="loadNode"
-            :props="defaultProps"
-            :show-checkbox="false"
-            check-strictly
-            lazy
-            node-key="id"
-            @check-change="handleCheckChange"
-            @node-expand="handleNodeExpand"
-            @node-click="handleNodeClick"
+        <template v-if="!searchValue">
+          <div
+            v-if="canShowOrgTree"
+            style="padding-top: 5px; overflow: auto; width: 100%; display: inline-block !important"
           >
-            <template #default="{ node, data }">
-              <span>
-                <el-icon>
-                  <Menu v-if="node.data.id === -1 || node.data.branch" />
-                  <Tickets v-else-if="node.data.id === -2 || node.data.id === -3" />
-                  <Calendar v-else />
-                </el-icon>
-                <span
-                  :class="
-                    data.nodeType &&
-                    data.nodeType === 'DEPARTMENT' &&
-                    searchValue &&
-                    data.name.indexOf(searchValue) > -1
-                      ? 'searchResult'
-                      : ''
-                  "
-                  :title="node.label"
-                >
-                  {{ node.label }}
+            <el-tree
+              ref="deparmentTree"
+              :filter-node-method="filterNode"
+              :load="loadNode"
+              :props="defaultProps"
+              :show-checkbox="false"
+              check-strictly
+              lazy
+              node-key="id"
+              @check-change="handleCheckChange"
+              @node-expand="handleNodeExpand"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <span>
+                  <el-icon>
+                    <Menu v-if="node.data.id === -1 || node.data.branch" />
+                    <Tickets v-else-if="node.data.id === -2 || node.data.id === -3" />
+                    <Calendar v-else />
+                  </el-icon>
+                  <span
+                    :class="
+                      data.nodeType &&
+                      data.nodeType === 'DEPARTMENT' &&
+                      searchValue &&
+                      data.name.indexOf(searchValue) > -1
+                        ? 'searchResult'
+                        : ''
+                    "
+                    :title="node.label"
+                  >
+                    {{ node.label }}
+                  </span>
                 </span>
-              </span>
-            </template>
-          </el-tree>
-        </div>
+              </template>
+            </el-tree>
+          </div>
+          <!-- 暂无信息 -->
+          <EmptyState v-else style="width: 100%; height: 100%" />
+        </template>
         <div v-if="searchValue && searchValue.length > 0" style="height: 100%; overflow: hidden">
           <user-result
             :grid-data="searchResult"
@@ -81,7 +85,7 @@ import utils from '../../utils/utils'
 import departmentTreeService from './department-tree-service'
 import memoryCacheUtils from '../../utils/memory-cache-utils'
 import UserResult from './search-result.vue'
-
+import EmptyState from '../../empty-state/index.vue'
 export default {
   data() {
     return {
@@ -120,12 +124,14 @@ export default {
       memoryCacheKey: 'DEPARTMENT_MEMORY_KEY',
       // 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
       memoryCacheData: [],
-      ElIconSearch
+      ElIconSearch,
+      canShowOrgTree: false
     }
   },
   name: 'InlineDepartmentSingleTree',
   components: {
-    UserResult
+    UserResult,
+    EmptyState
   },
   props: {
     // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
@@ -175,6 +181,11 @@ export default {
       }
     }
   },
+  created() {
+    utils.canShowOrgTree().then((showOrgTree) => {
+      this.canShowOrgTree = showOrgTree
+    })
+  },
   mounted() {
     var searchDepartment = localStorage.getObject(this.searchStoreKey)
     if (searchDepartment) {

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

@@ -1,238 +1,206 @@
 <template>
-	<div style="height: 100%">
-		<el-table
-				ref="superGrid"
-				:data="gridData"
-				:max-height="myHeight"
-				:row-class-name="tableRowClassName"
-				border
-				fit
-				row-key="id"
-				@row-click="rowClick"
-				@row-dblclick="rowDblclick"
-		>
-			<el-table-column v-if="multiple === false" width="60">
-				<template v-slot="scope">
-					<el-radio
-							v-model="singleUserIndex"
-							:label="scope.$index"
-							@change="selectUser"
-					>
-						{{ scope.$index + 1 }}
-					</el-radio>
-				</template>
-			</el-table-column>
-			<el-table-column
-					v-if="multiple && isSearchResult"
-					:label="$t('imatrixUIPublicModel.edit')"
-					align="center"
-					fixed
-					width="60px"
-			>
-				<template v-slot="scope">
-					<div>
-						<el-button
-								:disabled="isDisable(scope.row)"
-								:icon="ElIconPlus"
-								circle
-								size="default"
-								type="primary"
-								@click="addUser(scope.$index, scope.row)"
-						/>
-					</div>
-				</template>
-			</el-table-column>
-			<el-table-column
-					v-if="multiple"
-					:label="$t('superGrid.index')"
-					align="center"
-					width="60px"
-			>
-				<template v-slot="scope">
-					{{ scope.$index + 1 }}
-				</template>
-			</el-table-column>
-			<el-table-column
-					v-if="multiple && !isSearchResult"
-					:label="$t('imatrixUIPublicModel.edit')"
-					align="center"
-					fixed="right"
-					width="60px"
-			>
-				<template v-slot="scope">
-					<div>
-						<el-button
-								:icon="ElIconDelete"
-								circle
-								size="default"
-								type="danger"
-								@click="removeUser(scope.$index, scope.row)"
-						/>
-					</div>
-				</template>
-			</el-table-column>
-			<el-table-column
-					:label="$t('departmentTreeInline.name')"
-					:width="170"
-					prop="name"
-			>
-				<template v-slot="scope">
-          <span :title="scope.row.showName" class="ellipsis cell--span">{{
-		          scope.row.showName
-	          }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column
-					:label="$t('departmentTreeInline.code')"
-					:width="140"
-					prop="code"
-			>
-				<template v-slot="scope">
-          <span :title="scope.row.code" class="ellipsis cell--span">{{
-		          scope.row.code
-	          }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column
-					:label="$t('departmentTreeInline.namePath')"
-					:width="140"
-					prop="namePath"
-			>
-				<template v-slot="scope">
-          <span :title="scope.row.namePath" class="ellipsis cell--span">{{
-		          scope.row.namePath
-	          }}</span>
-				</template>
-			</el-table-column>
-			<template v-slot:empty>
-				<div class="roleQuery_center_area" style="height: 395px">
-					<div
-							class="roleQuery_notAvailable"
-							style="width: 120px; height: 120px"
-					>
-            <span class="roleQuery_notAvailable_text">{{
-		            $t('imatrixUIPromptMessage.NoContent')
-	            }}</span>
-					</div>
-				</div>
-			</template>
-		</el-table>
-	</div>
+  <div style="height: 100%">
+    <el-table
+      ref="superGrid"
+      :data="gridData"
+      :max-height="myHeight"
+      :row-class-name="tableRowClassName"
+      border
+      fit
+      row-key="id"
+      @row-click="rowClick"
+      @row-dblclick="rowDblclick"
+    >
+      <el-table-column v-if="multiple === false" width="60">
+        <template v-slot="scope">
+          <el-radio v-model="singleUserIndex" :label="scope.$index" @change="selectUser">
+            {{ scope.$index + 1 }}
+          </el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="multiple && isSearchResult"
+        :label="$t('imatrixUIPublicModel.edit')"
+        align="center"
+        fixed
+        width="60px"
+      >
+        <template v-slot="scope">
+          <div>
+            <el-button
+              :disabled="isDisable(scope.row)"
+              :icon="ElIconPlus"
+              circle
+              size="default"
+              type="primary"
+              @click="addUser(scope.$index, scope.row)"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="multiple" :label="$t('superGrid.index')" align="center" width="60px">
+        <template v-slot="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="multiple && !isSearchResult"
+        :label="$t('imatrixUIPublicModel.edit')"
+        align="center"
+        fixed="right"
+        width="60px"
+      >
+        <template v-slot="scope">
+          <div>
+            <el-button
+              :icon="ElIconDelete"
+              circle
+              size="default"
+              type="danger"
+              @click="removeUser(scope.$index, scope.row)"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('departmentTreeInline.name')" :width="170" prop="name">
+        <template v-slot="scope">
+          <span :title="scope.row.showName" class="ellipsis cell--span">{{ scope.row.showName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('departmentTreeInline.code')" :width="140" prop="code">
+        <template v-slot="scope">
+          <span :title="scope.row.code" class="ellipsis cell--span">{{ scope.row.code }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('departmentTreeInline.namePath')" :width="140" prop="namePath">
+        <template v-slot="scope">
+          <span :title="scope.row.namePath" class="ellipsis cell--span">{{ scope.row.namePath }}</span>
+        </template>
+      </el-table-column>
+      <template v-slot:empty>
+        <div class="empty_center_area" style="height: 395px">
+          <div class="empty_notAvailable" style="width: 120px; height: 120px">
+            <span class="empty_notAvailable_text">{{ $t('imatrixUIPromptMessage.NoContent') }}</span>
+          </div>
+        </div>
+      </template>
+    </el-table>
+  </div>
 </template>
 
 <script>
-import {Delete as ElIconDelete, Plus as ElIconPlus} from '@element-plus/icons-vue'
-import {$emit} from '../../utils/gogocodeTransfer'
+import { Delete as ElIconDelete, Plus as ElIconPlus } from '@element-plus/icons-vue'
+import { $emit } from '../../utils/gogocodeTransfer'
 
 export default {
-	data() {
-		let tableHeight = this.height
-		tableHeight = tableHeight.substring(0, tableHeight.indexOf('px'))
-		const myHeight = parseInt(tableHeight) + 30 + 'px'
-		return {
-			// 选中的用户序号
-			singleUserIndex: null,
-			selectedUser: null,
-			myHeight,
-			ElIconPlus,
-			ElIconDelete,
-		}
-	},
-	name: 'UserResult',
-	props: {
-		gridData: {
-			type: Array,
-			default: null,
-		},
-		containBranch: {
-			type: Boolean,
-			default: false,
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		// 多选树时是否是查询结果列表，用于控制“操作”列按钮的显示
-		isSearchResult: {
-			type: Boolean,
-			default: true,
-		},
-		height: {
-			type: String,
-			default: '300px',
-		},
-		selectResult: {
-			type: Array,
-			default: function () {
-				return []
-			},
-		},
-	},
-	created() {
-		console.log('search-result---', this.gridData)
-	},
-	methods: {
-		// 单选树时，点击行事件
-		// rowClick(row, column, event) {
-		//   this.selectedUser = row
-		//   // this.$emit('rowClick', row, column, event)
-		// },
-		// 移除用户
-		removeUser(index, row) {
-			$emit(this, 'removeUser', index, row)
-		},
-		// 添加用户
-		addUser(index, row) {
-			$emit(this, 'addUser', index, row)
-		},
-		selectUser(selectVal) {
-			// console.log('selectUser', selectVal)
-			$emit(this, 'selectResult', this.gridData[selectVal])
-		},
-		rowClick(row, column, event) {
-			this.singleUserIndex = row.row_index
-			$emit(this, 'selectResult', row)
-		},
-		tableRowClassName({row, rowIndex}) {
-			row.row_index = rowIndex
-		},
-		rowDblclick(row, column, event) {
-			if (this.multiple) {
-				$emit(this, 'addUser', null, row)
-			} else {
-				$emit(this, 'resultRowDblclick', row)
-			}
-		},
-		isDisable(row) {
-			if (this.selectResult) {
-				const containUsers = this.selectResult.filter(this.filterDept(row))
-				if (containUsers && containUsers.length > 0) {
-					return true
-				}
-			}
-			return false
-		},
-		// 判断用户是否存在的过滤器
-		filterDept(queryDept) {
-			return (dept) => {
-				return dept.id === queryDept.id
-			}
-		},
-	},
-	emits: ['removeUser', 'addUser', 'selectResult', 'resultRowDblclick'],
+  data() {
+    let tableHeight = this.height
+    tableHeight = tableHeight.substring(0, tableHeight.indexOf('px'))
+    const myHeight = parseInt(tableHeight) + 30 + 'px'
+    return {
+      // 选中的用户序号
+      singleUserIndex: null,
+      selectedUser: null,
+      myHeight,
+      ElIconPlus,
+      ElIconDelete
+    }
+  },
+  name: 'UserResult',
+  props: {
+    gridData: {
+      type: Array,
+      default: null
+    },
+    containBranch: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 多选树时是否是查询结果列表，用于控制“操作”列按钮的显示
+    isSearchResult: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    selectResult: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  created() {
+    console.log('search-result---', this.gridData)
+  },
+  methods: {
+    // 单选树时，点击行事件
+    // rowClick(row, column, event) {
+    //   this.selectedUser = row
+    //   // this.$emit('rowClick', row, column, event)
+    // },
+    // 移除用户
+    removeUser(index, row) {
+      $emit(this, 'removeUser', index, row)
+    },
+    // 添加用户
+    addUser(index, row) {
+      $emit(this, 'addUser', index, row)
+    },
+    selectUser(selectVal) {
+      // console.log('selectUser', selectVal)
+      $emit(this, 'selectResult', this.gridData[selectVal])
+    },
+    rowClick(row, column, event) {
+      this.singleUserIndex = row.row_index
+      $emit(this, 'selectResult', row)
+    },
+    tableRowClassName({ row, rowIndex }) {
+      row.row_index = rowIndex
+    },
+    rowDblclick(row, column, event) {
+      if (this.multiple) {
+        $emit(this, 'addUser', null, row)
+      } else {
+        $emit(this, 'resultRowDblclick', row)
+      }
+    },
+    isDisable(row) {
+      if (this.selectResult) {
+        const containUsers = this.selectResult.filter(this.filterDept(row))
+        if (containUsers && containUsers.length > 0) {
+          return true
+        }
+      }
+      return false
+    },
+    // 判断用户是否存在的过滤器
+    filterDept(queryDept) {
+      return (dept) => {
+        return dept.id === queryDept.id
+      }
+    }
+  },
+  emits: ['removeUser', 'addUser', 'selectResult', 'resultRowDblclick']
 }
 </script>
 
 <style>
 .searchResult {
-	color: red;
+  color: red;
 }
 
 .inline-select-custom {
-	width: 100px;
+  width: 100px;
 }
 
 .inline-input-custom {
-	width: 98%;
+  width: 98%;
 }
 </style>