imatrix-ui 2.8.21-dw → 2.8.21

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

@@ -0,0 +1,176 @@
+<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">
+        <template slot-scope="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" 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="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 slot-scope="scope">
+          {{ scope.$index+1 }}
+        </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="removeUser(scope.$index, scope.row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentTreeInline.name')"
+        :width="170"
+        prop="name"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.showName">{{ scope.row.showName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentTreeInline.code')"
+        :width="140"
+        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('departmentTreeInline.namePath')"
+        :width="140"
+        prop="namePath"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.namePath">{{ scope.row.namePath }}</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: '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 []
+      }
+    }
+
+  },
+  data() {
+    let tableHeight = this.height
+    tableHeight = tableHeight.substring(0, tableHeight.indexOf('px'))
+    const myHeight = (parseInt(tableHeight) + 30) + 'px'
+    return {
+      singleUserIndex: null, // 选中的用户序号
+      selectedUser: null,
+      myHeight
+    }
+  },
+  created() {
+    console.log('search-result---', this.gridData)
+  },
+  methods: {
+    // 单选树时，点击行事件
+    // rowClick(row, column, event) {
+    //   this.selectedUser = row
+    //   // this.$emit('rowClick', row, column, event)
+    // },
+    // 移除用户
+    removeUser(index, row) {
+      this.$emit('removeUser', index, row)
+    },
+    // 添加用户
+    addUser(index, row) {
+      this.$emit('addUser', index, row)
+    },
+    selectUser(selectVal) {
+      // console.log('selectUser', selectVal)
+      this.$emit('selectResult', this.gridData[selectVal])
+    },
+    rowClick(row, column, event) {
+      this.singleUserIndex = row.row_index
+      this.$emit('selectResult', row)
+    },
+    tableRowClassName({ row, rowIndex }) {
+      row.row_index = rowIndex
+    },
+    rowDblclick(row, column, event) {
+      if (this.multiple) {
+        this.$emit('addUser', null, row)
+      } else {
+        this.$emit('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)
+      }
+    }
+  }
+}
+</script>

package/packages/department-user-tree/index.js

@@ -0,0 +1,6 @@
+import DepartmentUserTree from './src/department-user-tree.vue'
+DepartmentUserTree.install = function(Vue) {
+  Vue.component(DepartmentUserTree.name, DepartmentUserTree)
+}
+
+export default DepartmentUserTree

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

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-dialog
+      ref="userDialog"
+      class="user-tree"
+      visible
+      :title="myTitle"
+      append-to-body
+      :close-on-click-modal="false"
+      :width="width"
+      @open="$emit('openDialog')"
+      @opend="$emit('opendDialog')"
+      @close="$emit('closeDialog')"
+      @closed="$emit('closedDialog')"
+    >
+      <inline-department-user-multi-tree
+        ref="inlineDepartmentUser"
+        :department-info="departmentInfo"
+        :is-need-virtual-user="isNeedVirtualUser"
+        :height="height"
+        :select-user-info="selectUserInfo"
+        :search-field="searchField"
+        :separator="separator"
+        @result="result"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="$emit('closeDialog')">
+          {{ $t('imatrixUIPublicModel.cancel') }}
+        </el-button>
+        <el-button size="small" type="primary" @click="confirmSelectUser">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<style>
+.searchResult {
+  color:red
+}
+.inline-select-custom {
+  width : 100px
+}
+.inline-input-custom {
+  width : 98%
+}
+</style>
+<script>
+import InlineDepartmentUserMultiTree from '../../department-user-tree-inline/src/department-user-multiple-tree-inline.vue'
+export default {
+  name: 'DepartmentUserMultiTree',
+  components: {
+    InlineDepartmentUserMultiTree
+  },
+  props: {
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    departmentInfo: {
+      type: Array,
+      default: null
+    },
+    // 弹框的标题
+    title: {
+      type: String,
+      default: null
+    },
+    // 弹框的宽度
+    width: {
+      type: String,
+      default: '60%'
+    },
+    // 弹框的高度
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 是否需要显示虚拟用户
+    isNeedVirtualUser: {
+      type: Boolean,
+      default: false
+    },
+    // 多选用户树时，已选择用户id或登录名集合，多个之间以逗号隔开
+    selectUserInfo: {
+      type: [String, Number],
+      default: null
+    },
+    // 移除用户时，用户属性名称：id、loginName、email、telephone，默认是loginName
+    searchField: {
+      type: String,
+      default: 'loginName'
+    },
+    // 多选树时结果之间的分隔符，默认是逗号分隔
+    separator: {
+      type: String,
+      default: ','
+    }
+  },
+  data() {
+    let myTitle = this.$t('imatrixUIMessage.pleaseSelectPersonnel')
+    if (this.title) {
+      myTitle = this.title
+    }
+    return {
+      myTitle
+    }
+  },
+  methods: {
+    result(selectNodeInfo) {
+      this.$emit('closeDialog', selectNodeInfo)
+    },
+    confirmSelectUser() {
+      this.$refs.inlineDepartmentUser.confirmSelectUser()
+    }
+
+  }
+}
+</script>

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

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <el-dialog
+      class="user-tree"
+      visible
+      :title="myTitle"
+      :close-on-click-modal="false"
+      append-to-body
+      :width="width"
+      @open="$emit('openDialog')"
+      @opend="$emit('opendDialog')"
+      @close="$emit('closeDialog')"
+      @closed="$emit('closedDialog')"
+    >
+      <inline-department-user-single-tree ref="inlineDepartmentUser" :department-info="departmentInfo" :is-need-virtual-user="isNeedVirtualUser" @result="result" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="$emit('closeDialog')">
+          {{ $t('imatrixUIPublicModel.cancel') }}
+        </el-button>
+        <el-button size="small" type="primary" @click="confirmSelectUser">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import InlineDepartmentUserSingleTree from '../../department-user-tree-inline/src/department-user-single-tree-inline.vue'
+export default {
+  name: 'DepartmentUserSingleTree',
+  components: {
+    InlineDepartmentUserSingleTree
+  },
+  props: {
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    departmentInfo: {
+      type: Array,
+      default: null
+    },
+    // 弹框的标题
+    title: {
+      type: String,
+      default: null
+    },
+    // 弹框的宽度
+    width: {
+      type: String,
+      default: '30%'
+    },
+    // 是否需要显示虚拟用户
+    isNeedVirtualUser: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    let myTitle = this.$t('imatrixUIMessage.pleaseSelectPersonnel')
+    if (this.title) {
+      myTitle = this.title
+    }
+    return {
+      myTitle
+    }
+  },
+  methods: {
+    result(selectNodeInfo) {
+      this.$emit('closeDialog', selectNodeInfo)
+    },
+    confirmSelectUser() {
+      // this.$refs.inlineDepartmentUser.confirmSelectUser()
+      // selectNodeInfo
+      this.$emit('closeDialog', this.$refs.inlineDepartmentUser.selectNodeInfo)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <department-user-multi-tree
+      v-if="multiple"
+      :title="title"
+      :width="width?width:'60%'"
+      :height="height"
+      :department-info="departmentInfo"
+      :is-need-virtual-user="isNeedVirtualUser"
+      :select-user-info="selectUserInfo"
+      :search-field="searchField"
+      :separator="separator"
+      @closeDialog="closeDialog"
+      @closedDialog="closedDialog"
+      @openDialog="openDialog"
+      @opendDialog="opendDialog"
+    />
+    <department-user-single-tree v-if="!multiple" :title="title" :width="width?width:'40%'" :department-info="departmentInfo" :is-need-virtual-user="isNeedVirtualUser" @closeDialog="closeDialog" @closedDialog="closedDialog" @openDialog="openDialog" @opendDialog="opendDialog" />
+  </div>
+</template>
+<script>
+import DepartmentUserSingleTree from './department-user-single-tree.vue'
+import DepartmentUserMultiTree from './department-user-multiple-tree.vue'
+export default {
+  name: 'DepartmentUserTree',
+  components: {
+    DepartmentUserSingleTree,
+    DepartmentUserMultiTree
+  },
+  props: {
+    // 是否是多选树，默认是true
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    departmentInfo: {
+      type: Array,
+      default: null
+    },
+    // 弹框的标题
+    title: {
+      type: String,
+      default: null
+    },
+    // 弹框的宽度
+    width: {
+      type: String,
+      default: null
+    },
+    // 弹框的高度
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 是否需要显示虚拟用户
+    isNeedVirtualUser: {
+      type: Boolean,
+      default: false
+    },
+    // 多选用户树时，已选择用户id或登录名集合，多个之间以逗号隔开
+    selectUserInfo: {
+      type: [String, Number],
+      default: null
+    },
+    // 移除用户时，用户属性名称：id、loginName、email、telephone，默认是loginName
+    searchField: {
+      type: String,
+      default: 'loginName'
+    },
+    // 多选树时结果之间的分隔符，默认是逗号分隔
+    separator: {
+      type: String,
+      default: ','
+    }
+  },
+  data() {
+    let myTitle = this.$t('imatrixUIMessage.pleaseSelectPersonnel')
+    if (this.title) {
+      myTitle = this.title
+    }
+    return {
+      myTitle
+    }
+  },
+  methods: {
+    closeDialog(selectNodeInfo) {
+      this.$emit('close', selectNodeInfo)
+    },
+    closedDialog() {
+      this.$emit('closed')
+    },
+    openDialog() {
+      this.$emit('open')
+    },
+    opendDialog() {
+      this.$emit('opend')
+    }
+  }
+}
+</script>

package/packages/department-user-tree-inline/index.js

@@ -0,0 +1,6 @@
+import InlineDepartmentUserTree from './src/department-user-tree-inline.vue'
+InlineDepartmentUserTree.install = function(Vue) {
+  Vue.component(InlineDepartmentUserTree.name, InlineDepartmentUserTree)
+}
+
+export default InlineDepartmentUserTree