@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/UserFind.vue

@@ -0,0 +1,702 @@
+<script>
+// @jsx-vue3（T30 JSX 批②：Vue3 JSX 语法）
+import EntityListFind from '@epxing/components/src/entity-list-find'
+import axios from 'axios'
+export default {
+  name: 'epx-user-find',
+  extends: EntityListFind,
+  pageSize: 20,
+  keywords: ['NAME', 'ACCOUNT'],
+  style: {
+    margin: 0,
+    padding: '0 10px'
+  },
+  data () {
+    return {
+      data: [],
+      orgTreeData: [],
+      expandOrgKeys: ['all'],
+      checkedList: [],
+      input: '',
+      noData: false,
+      loadFirst: true,
+      keywordFieldConfigs: [],
+      userTypeList: [],
+      activeUserType: ''
+    }
+  },
+  computed: {
+    checked () {
+      return this.checkedList.map(item => item.ID)
+    },
+    checkedAll () {
+      return this.checkedList.length === this.data.length
+    },
+    // 查询关键词
+    keywordFields () {
+      return this.keywordFieldConfigs.map(item => item.attriName || item)
+    },
+    // 查询关键词提示
+    keywordsPlaceHolder () {
+      const labels = this.keywordFieldConfigs.filter(item => !!item).map(item => item.attriLabel || this.$meta.getLabelByField(item) || '')
+      return this.$t('input') + (labels.join('/') || this.$t('antistop'))
+    },
+    dataType () {
+      const { dataType } = this.fieldConfig
+      return dataType
+    },
+    userType () {
+      const { attribute = {} } = this.fieldConfig
+      const { userType } = attribute
+      return userType
+    }
+  },
+  methods: {
+    getSearchFields () {
+      let { keywords } = this.$configs
+      if (!this.$meta) return
+      if (!keywords) {
+        keywords = [...new Set([this.$meta.label])]
+      }
+      this.$FieldFactory.createFields({
+        fields: keywords,
+        meta: this.$meta,
+        metaId: this.$metaId
+      })
+        .then(data => {
+          this.keywordFieldConfigs = [...data]
+        })
+    },
+    openWatchSelection () {
+
+    },
+    getOrgTreeData () {
+      const { deptParams = {} } = this.$configs
+      this.$http.getTree({
+        entityId: 'FM_DEPT',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc',
+        up_field: 'UP',
+        'scope.REMOVE_FLAG#not_in': '1',
+        ...deptParams
+      })
+        .then(data => {
+          this.orgTreeData = [{ id: 'all', text: this.clientConfig.NAME, children: [...data] }]
+          const findFolder = (arr = this.orgTreeData, folder = []) => {
+            for (const item of arr) {
+              if (item.id === this.user.deptId) {
+                folder.push(item.id)
+                return folder
+              } else if (item.children) {
+                const childFolder = findFolder(item.children, [...folder, item.id])
+                if (childFolder) return childFolder
+              }
+            }
+          }
+          const folder = findFolder()
+          if (folder) {
+            this.expandOrgKeys = folder
+          }
+          this.$nextTick(() => {
+            if (this.fieldConfig.setDefaultDept !== false && this.user.deptId) this.$refs.orgTree.setCurrentKey(this.user.deptId)
+          })
+        })
+    },
+    orgTreeClick (data) {
+      this.selectOrg = data
+      this.reloadData()
+    },
+    clickUserType (item) {
+      this.activeUserType = item.ID
+      // this.reloadData()
+    },
+    async getFields (fields) {
+      if (this.$configs.type === 'card') {
+        return this.getCardFields()
+      }
+      if (this.dataType === 'user') {
+        if (this.userType) {
+          this.activeUserType = this.userType
+        }
+      } else {
+        await this.$http.list({
+          entityId: 'FM_ENTITY_VIEW',
+          'scope.SYSTEM': this.SYSTEM,
+          'scope.VIEWENTITY|CODE': 'FM_USER'
+        })
+          .then(data => {
+            this.userTypeList = [...data.entitys]
+            if (data.entitys.length > 0) {
+              this.activeUserType = data.entitys[0].ID
+            }
+          })
+          .catch(() => {})
+      }
+      const { metaViewId, fieldConfigs = {}, hiddenFields = [], exportFields } = this.$configs
+      const linkArr = []
+      const listFields = fields || this.$configs.listFields
+      if (listFields) {
+        listFields.forEach((item, index) => {
+          // 重复字段添加别名
+          let firstIndex = listFields.findIndex(field => (field.attriName || field) === (item.attriName || item))
+          let num = 1
+          while (firstIndex !== index) {
+            if (!item.attriName) {
+              listFields[index] = item = { attriName: item }
+            }
+            item.alias = item.attriName + num++
+            firstIndex = listFields.findIndex(field => (field.alias || field.attriName || field) === item.alias)
+          }
+          const name = item.attriName || item
+          if (name.includes('|')) {
+            const arr = name.split('|')
+            arr.pop()
+            var flags = []
+            arr.forEach((flag, index) => {
+              if (index > 0) {
+                flags.push(flags[index - 1] + '#' + flag.toLowerCase())
+              } else {
+                flags.push(flag.toLowerCase())
+              }
+            })
+            flags.forEach(flag => {
+              if (!linkArr.includes(flag)) {
+                linkArr.push(flag)
+              }
+            })
+          }
+        })
+      }
+      this.$http.get({
+        action: 'validateRoleFieldScope',
+        entityId: 'FM_ROLE_FIELDSCOPE',
+        metaId: this.$metaId,
+        link: linkArr.join(',')
+      })
+        .then(data => {
+          this.roleFieldScope = data
+          this.$FieldFactory.createFields({
+            defaultFieldConfigs: fieldConfigs,
+            fieldScope: data,
+            fields: listFields,
+            meta: this.$meta,
+            metaViewId,
+            hiddenFields
+            // metaId: this.$metaId
+          })
+            .then(data => {
+              this.listFields = [...data]
+              this.initField = true
+              if (!exportFields || exportFields.length === 0) {
+                this.exportFields = data.filter(item => item.state !== 'HIDDEN')
+              } else {
+                this.$FieldFactory.createFields({
+                  fieldScope: this.roleFieldScope,
+                  fields: exportFields,
+                  meta: this.$meta,
+                  hiddenFields
+                })
+                  .then(exportData => {
+                    this.exportFields = [...exportData]
+                  })
+              }
+              if (!this.activeUserType) {
+                this.getData()
+              }
+            })
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    getData (current, cb) {
+      const CancelToken = axios.CancelToken
+      let { queryParams = {}, pageFlag, orderFields, order_field: orderField = [], order_mode: orderMode = [], limit, action = 'listUser' } = this.$configs
+      const params = {
+        action,
+        entityId: this.$metaId
+      }
+      // if (fields.length > 0) {
+      //   params.columnFieldNames = fields.join('#,') + '#'
+      // }
+      const functionField = this.listFields.filter(item => {
+        return item.function
+      })
+      let functionList = []
+      if (functionField.length > 0) {
+        functionList = functionField.map(item => ({ dataIndex: item.attriName, function: item.function }))
+        params.fieldFunctions = JSON.stringify(functionList)
+      }
+      if (pageFlag) {
+        params.page = current || this.currentPage
+        params.limit = this.pageSize
+      }
+      if (limit) {
+        params.limit = limit
+      }
+      if (this.scopeParams) {
+        const scopeParams = [...this.scopeParams]
+        if (this.selectOrg && this.selectOrg.id && this.selectOrg.id !== 'all') {
+          scopeParams.push({ field: 'DEPT_ID', mode: 'like', values: this.selectOrg.id })
+        }
+        params.scopeParams = JSON.stringify(scopeParams)
+      }
+      if (this.activeUserType) {
+        params.userViewId = this.activeUserType
+      }
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+        orderMode = orderFields.map(item => item.sort || 'asc')
+      }
+      // 排序字段
+      if (this.sortParams && this.sortParams.sort) {
+        const { sort, order } = this.sortParams
+        orderField = [sort]
+        orderMode = [order]
+      }
+
+      if (this.loading) return
+      this.loading = true
+      const that = this
+      this.$http.list({
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.searchKeyParams,
+        ...this.queryParams,
+        columnFields: this.columnFields,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      }, {
+        cancelToken: new CancelToken(function executor (c) {
+          // executor 函数接收一个 cancel 函数作为参数
+          that.cancelGetData = c
+        })
+      })
+        .then(data => {
+          this.initData = true
+          this.loading = false
+          if (current) this.currentPage = current
+          if (!data) return
+          this.data = [...this.data, ...data.entitys]
+          this.total = data.total || data.entitys.length
+          if (this.data.length === this.total) this.noData = true
+          if (cb) cb(this.data)
+          this.$dispatchPage('listData', [{ total: this.total, entitys: this.data }])
+          this.$emit('listData', { total: this.total, entitys: this.data })
+          if (this.afterData) this.afterData(this.data)
+        })
+        .catch((err) => {
+          console.log(err)
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    },
+    reloadData () {
+      if (this.cancelGetData) {
+        this.loading = false
+        this.cancelGetData()
+      }
+      this.noData = false
+      this.data = []
+      this.currentPage = 1
+      this.getData()
+      this.loadFirst = false
+    },
+    clickItem (item) {
+      const index = this.checked.indexOf(item.ID)
+      if (index !== -1) {
+        this.checkedList.splice(index, 1)
+      } else {
+        if (this.multiple) {
+          this.checkedList.push(item)
+        } else {
+          this.checkedList = [item]
+        }
+      }
+    },
+    changeSelectAll () {
+      if (this.checkedAll) {
+        this.checkedList = []
+      } else {
+        this.checkedList = [...this.data]
+      }
+    },
+    confirm () {
+      // 更新数据
+      const key = this.$meta.getKey()
+      let label = this.$meta.getLabel()
+      if (this.$configs.LabelFields && this.$configs.LabelFields.length > 0) {
+        label = this.$configs.LabelFields[0]
+      }
+      const result = this.checkedList.filter(item => !!item).map(item => ({ id: item[key], name: item[`${label}#`] || item[label] }))
+      if (this.multiple) {
+        this.change(result, this.checkedList)
+      } else {
+        this.change(result[0], this.checkedList[0])
+      }
+      this.cancel()
+    },
+    cancelFn () {
+      this.cancel()
+    },
+    addUsercrollEvent () {
+      if (this.$refs.userContainer) {
+        let timer = null
+        const userContainer = this.$refs.userContainer
+        userContainer.addEventListener('scroll', e => {
+          if (userContainer.scrollTop + userContainer.offsetHeight + 40 >= userContainer.scrollHeight) {
+            if (timer) return
+            timer = setTimeout(() => {
+              timer = null
+              clearTimeout(timer)
+              this.loadFirst = false
+              if (this.noData || this.loading) return
+              this.currentPage++
+              this.getData()
+            }, 200)
+          }
+        })
+      }
+    },
+    getCheckedUserList (v) {
+      this.$http.list({
+        entityId: 'FM_USER',
+        'scope.ID#in': v.join(',')
+      })
+        .then(data => {
+          const orderMap = v.reduce((map, item, index) => ({ ...map, [item]: index }), {})
+          this.checkedList = data.entitys.sort((item, nextItem) => orderMap[item.ID] - orderMap[nextItem.ID])
+        })
+    }
+  },
+  watch: {
+    input (v) {
+      if (!v) {
+        this.searchKeyParams = {}
+      } else {
+        // 获取配置的关键词
+        this.searchKeyParams = {
+          keywordFields: this.keywordFields.join(','),
+          keywordValue: v
+        }
+        this.selectOrg = null
+        if (this.$refs.orgTree) this.$refs.orgTree.setCurrentKey()
+      }
+    },
+    value: {
+      handler (v) {
+        this.checkedList = this.data.filter(item => v.includes(item.ID))
+        if (this.checkedList.length !== v.length) {
+          this.getCheckedUserList(v)
+        }
+        // 如果不存在，去请求
+      },
+      immediate: true
+    },
+    activeUserType: {
+      handler (v) {
+        if (v) {
+          if (this.cancelGetData) {
+            this.cancelGetData()
+          }
+          this.loading = false
+          this.currentPage = 1
+          this.reloadData()
+        }
+      }
+      // immediate: true
+    },
+    // ⚠️ handler 体已被整段注释，是空函数 ⇒ 触发与否都无副作用，所以在 array-watchers
+    // 基线里算误报。但**别顺手把注释恢复**：基类 EntityList 对 this.data 有 push 和多处
+    // splice，一旦这个 handler 有了真实逻辑，它立刻从误报变成真问题（Vue3 下那些原地变更
+    // 不会触发浅层 watcher），届时要连 deep 一起补。
+    data () {
+      if (this.loadFirst) {
+        // this.checkedList = this.data.filter(item => this.value.includes(item.ID))
+      }
+    }
+  },
+  created () {
+    if (this.fieldConfig.setDefaultDept !== false && this.user.deptId) {
+      this.selectOrg = {
+        id: this.user.deptId
+      }
+    }
+
+    this.getOrgTreeData()
+    this.getSearchFields()
+  },
+  mounted () {
+    this.addUsercrollEvent()
+    setTimeout(() => {
+      if (this.$refs.searchInput) this.$refs.searchInput.focus()
+    }, 500)
+  },
+  render () {
+    return (
+      <div class="epx-user-find container" style={this.$component.style}>
+        <el-input ref="searchInput" placeholder={this.keywordsPlaceHolder} v-model={this.input} suffix-icon="el-icon-search"></el-input>
+        <div class="content">
+          <div class="org-container">
+            <el-tree
+              class="tree"
+              ref="orgTree"
+              data={this.orgTreeData}
+              node-key="id"
+              default-expanded-keys={this.expandOrgKeys}
+              onNodeClick={this.orgTreeClick.bind(this)}
+              v-slots={{
+                default: ({ node, data }) => (
+                  <span class={['tree-node']} title={data.text}>
+                    <i class={data.children.length > 0 ? 'el-icon-folder' : 'el-icon-document'}></i>
+                    <span>{ data.text }</span>
+                  </span>
+                )
+              }}
+            >
+            </el-tree>
+          </div>
+          <div class="user-container" ref="userContainer">
+            <div class="user-count">
+              <el-checkbox label="全选" value="全选" v-model={this.checkedAll} onChange={this.changeSelectAll.bind(this)}>全选</el-checkbox>
+              <label> {this.total} </label>
+            </div>
+            {
+              this.dataType !== 'user' && this.userTypeList.length > 0 && (
+                <div class="user-type-container">
+                  {
+                    this.userTypeList.map(item => (
+                      <div class={{ 'user-type-item': true, 'user-type-selected': this.activeUserType === item.ID }} key={item.ID} onClick={this.clickUserType.bind(this, item)}>
+                        {item.NAME}
+                      </div>
+                    ))
+                  }
+                </div>
+              )
+            }
+            <el-checkbox-group modelValue={this.checked}>
+              <ul class="user-list">
+                {
+                  this.data.map(item => (
+                    <li class={{ 'user-item': true, selected: this.checked.includes(item.ID) }} key={item.ID} onClick={this.clickItem.bind(this, item)}>
+                      <el-checkbox label={item.ID} value={item.ID} onClick={e => e.stopPropagation()} onChange={this.clickItem.bind(this, item)}>&nbsp;</el-checkbox>
+                      <div class="user-head">
+                        {
+                          item.PHOTO
+                            ? <img src={this.$util.getFileUrl(item.PHOTO)} />
+                            : (
+                              <i class="epx-icon-default-avatar" ></i>
+                            )
+                        }
+                      </div>
+                      <p class="user-name">{item.NAME}</p>
+                      <p class="user-code">{item.ACCOUNT}</p>
+                    </li>
+                  ))
+                }
+                <li class="load-text">
+                  { this.noData ? '暂无更多' : '正在加载' }
+                </li>
+              </ul>
+            </el-checkbox-group>
+          </div>
+          <div class="user-selected-container">
+            <div class="user-count">
+              <label>已选 {this.checkedList.length} 人</label>
+              <el-button type="primary" link onClick={() => (this.checkedList = [])}>清空</el-button>
+            </div>
+            <ul class="user-list">
+              {
+                this.checkedList.map(item => (
+                  <li class={{ 'user-item': true, 'user-item__selected': true }} key={item.ID} >
+                    <div class="user-head">
+                      {
+                        item.PHOTO
+                          ? <img src={this.$util.getFileUrl(item.PHOTO)} />
+                          : (
+                            <i class="epx-icon-default-avatar" ></i>
+                          )
+                      }
+                    </div>
+                    <p class="user-name">{item.NAME}</p>
+                    <p class="user-code">{item.ACCOUNT}</p>
+                    <i class="el-icon-close user-delete" onClick={this.clickItem.bind(this, item)}></i>
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
+        </div>
+        <div class="button-group">
+          <el-button type="primary" onClick={this.confirm.bind(this)}>确定</el-button>
+          <el-button onClick={this.cancelFn.bind(this)}>取消</el-button>
+        </div>
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss">
+// 树节点和复选组插槽由 Element Plus 渲染，没有本组件的 scopeId。
+.epx-user-find {
+  width: 100%;
+  min-width: 800px;
+.content {
+  display: flex;
+  height: 360px;
+  margin-top: 12px;
+}
+.org-container {
+  flex: 3.5;
+  border: 1px solid var(--epx-border);
+  height: 100%;
+  overflow: auto;
+}
+.tree {
+  flex: 1;
+  overflow: auto;
+
+    .el-tree-node.is-current {
+      >.el-tree-node__content {
+        background: var(--epx-bg);
+      }
+    }
+    .el-tree-node__content {
+      height: 32px;
+    }
+
+}
+
+.tree-node {
+  flex: 1;
+  line-height: 32px;
+}
+
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: var(--epx-font-size-l);
+}
+
+.user-container {
+  flex: 3;
+  border: 1px solid var(--epx-border);
+  border-left: 0;
+  height: 100%;
+  overflow: auto;
+}
+.user-type-container{
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  // border-top: 1px solid var(--epx-border);
+  border-bottom: 1px solid var(--epx-border);
+  padding: 0 10px;
+  // padding-bottom: 10px;
+  box-sizing: border-box;
+  // height: 40px;
+}
+.user-type-item{
+  border: 1px solid var(--epx-border);
+  margin-right: 5px;
+  padding: 4px 6px;
+  border-radius: var(--epx-radius-base);
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 30px;
+  box-sizing: border-box;
+}
+.user-type-selected{
+  @include bg_color_primary(0.2);
+  @include font_color_primary;
+}
+
+.user-item {
+  font-size: var(--epx-font-size-base);
+  height: 48px;
+  padding: 0 12px;
+  cursor: pointer;
+  &:hover{
+    @include bg_color_primary(.2)
+  }
+  display: flex;
+  align-items: center;
+}
+.user-head {
+  margin-left: 4px;
+  width: 30px;
+  height: 30px;
+  >img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid var(--epx-border);
+  }
+  >i {
+    font-size: 30px;
+    text-align: center;
+    line-height: 30px;
+    color: var(--epx-text-secondary)
+  }
+}
+.user-name {
+  display: inline-block;
+  width: 80px;
+  margin-left: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-code {
+  margin-left: 4px;
+  font-size: var(--epx-font-size-s);
+  color: #555;
+}
+
+.user-selected-container {
+  flex: 3;
+  height: 100%;
+  margin-left: 10px;
+  border: 1px solid var(--epx-border);
+  overflow: auto;
+}
+.user-item__selected {
+  position: relative;
+  &:hover {
+    background: #F2F4F7;
+    .user-delete {
+      display: inline;
+    }
+  }
+  border-bottom: 1px solid var(--epx-border);
+}
+
+.user-delete {
+  display: none;
+  position: absolute;
+  right: 12px;
+  cursor: pointer;
+  font-size: var(--epx-font-size-l);
+}
+.user-count {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding: 0 12px;
+}
+.load-text {
+  line-height: 40px;
+  color: var(--epx-text-secondary);
+  text-align: center;
+  font-size: var(--epx-font-size-base);
+}
+.button-group {
+  margin-top: 20px;
+  text-align: center;
+}
+}
+</style>