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

package/src/components/UserManage.vue

@@ -0,0 +1,758 @@
+<template>
+  <div class="container">
+    <div :class="['filter-container', { 'fold': fold}]">
+       <el-tabs class="filter-tabs" v-model="filterWay" >
+        <el-tab-pane name="org">
+          <div class="filter-search">
+            <el-input v-model="orgKeyword" placeholder="按机构名称搜索" size="default" clearable @change="getOrgTreeData"></el-input>
+            <el-dropdown>
+              <span class="operate-icon">
+                <i class="el-icon-setting"></i>
+              </span>
+              <template v-slot:dropdown><el-dropdown-menu>
+                <el-dropdown-item @click="addOrg">新增</el-dropdown-item>
+                <el-dropdown-item @click="importDept">导入</el-dropdown-item>
+                <el-dropdown-item @click="exportDept" >导出</el-dropdown-item>
+              </el-dropdown-menu></template>
+            </el-dropdown>
+          </div>
+          <el-tree
+            class="tree"
+            :data="orgTreeData"
+            node-key="id"
+            :props="treeProps"
+            :default-expanded-keys="expandOrgKeys"
+            :draggable="true"
+            @node-click="orgTreeClick"
+            @node-expand="expandNode"
+            @node-collapse="collapseNode"
+            @node-drop="drop"
+            :allow-drag="node=>node.data.id!=='all'"
+            :allow-drop="allowDrop"
+          >
+            <template v-slot="{ node, data }">
+               <span :class="['tree-node']" >
+                  <!-- 图标 -->
+                  <i :class="data.children.length>0? 'el-icon-folder' : 'el-icon-document'"></i>
+                  <!-- 文字 -->
+                  <span :title="node.label">{{ node.label }}</span>
+                  <el-dropdown class="tree-node-operate" v-if="data.id!=='all'" @click.stop>
+                    <span class="node-operate-icon" >
+                      <i class="el-icon-setting"></i>
+                    </span>
+                    <template v-slot:dropdown><el-dropdown-menu>
+                      <el-dropdown-item @click="addOrg(data, 0)">添加同级部门</el-dropdown-item>
+                      <el-dropdown-item @click="addOrg(data, 1)">添加子部门</el-dropdown-item>
+                      <el-dropdown-item @click="editOrg(data)">编辑</el-dropdown-item>
+                      <el-dropdown-item @click="deleteOrg(data)">删除</el-dropdown-item>
+                    </el-dropdown-menu></template>
+                  </el-dropdown>
+               </span>
+            </template>
+          </el-tree>
+        </el-tab-pane>
+        <el-tab-pane name="userType">
+         <div class="filter-search">
+            <el-input v-model="userTypeKeyword" placeholder="按用户类型搜索" size="default" clearable @change="getUserTypeTreeData"></el-input>
+            <el-dropdown>
+              <span class="operate-icon">
+                <i class="el-icon-setting"></i>
+              </span>
+              <template v-slot:dropdown><el-dropdown-menu>
+                <el-dropdown-item @click="addUser">新增</el-dropdown-item>
+                <el-dropdown-item @click="editUser" :disabled="!selectUser || selectUser.id==='all'">编辑</el-dropdown-item>
+                <el-dropdown-item @click="deleteUser" :disabled="!selectUser || selectUser.id==='all'">删除</el-dropdown-item>
+              </el-dropdown-menu></template>
+            </el-dropdown>
+          </div>
+          <el-tree class="tree" :data="userTypeTreeData" :props="treeProps"  @node-click="data=> selectUser = data">
+            <template v-slot="{ node, data }">
+               <span class="tree-node" >
+                  <!-- 图标 -->
+                  <i :class="data.children.length>0? 'el-icon-folder' : 'el-icon-document'"></i>
+                  <!-- 文字 -->
+                  <span>{{ node.label }}</span>
+               </span>
+            </template>
+          </el-tree>
+
+        </el-tab-pane>
+       </el-tabs>
+       <div class="fold-btn">
+        <i :class="fold? 'el-icon-s-unfold' :'el-icon-s-fold'" @click="fold=!fold"></i>
+       </div>
+      <el-dialog
+        :title="(dataType==='edit'? '编辑' : '新增') + '组织机构'"
+        v-model="showOrgDialog"
+        width="50%"
+      >
+        <div>
+          <epx-table-form class="form-content" ref="orgForm" :fieldsConfigs="orgFieldConfigs" v-model="orgFormData" :column="1"></epx-table-form>
+        </div>
+        <template v-slot:footer><span class="dialog-footer">
+          <el-button @click="showOrgDialog = false">取 消</el-button>
+          <el-button type="primary" @click="submitOrg" v-loading="isRequesting">保存</el-button>
+        </span></template>
+      </el-dialog>
+      <el-dialog
+        :title="(dataType==='edit'? '编辑' : '新增') + '用户类型'"
+        v-model="showUserDialog"
+        width="50%"
+      >
+        <div>
+          <epx-table-form class="form-content" ref="userForm" :fieldsConfigs="userTypeFieldConfigs" v-model="userFormData" :column="1"></epx-table-form>
+        </div>
+        <template v-slot:footer><span class="dialog-footer">
+          <el-button @click="showUserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="submitUser" v-loading="isRequesting">保存</el-button>
+        </span></template>
+      </el-dialog>
+    </div>
+     <div class="content">
+      <el-tabs v-model="activeName" class="tabs" v-if="components.length> 1" type="card">
+        <el-tab-pane  v-for="component in $subcomponents"  :key="component.id" :label="component.title" :name="component.id">
+          <component
+            :is="'epx-' + component.contentType"
+            :content-type="component.contentType"
+            :comp-id="getComponentId(component)"
+            :comp-title="component.title"
+            :items="component.items"
+            :current-query="{scopeParams: scopeParams, deptId: selectOrg && selectOrg.id, deptName: selectOrg && selectOrg.text}"
+            :comp-style="component.style"
+            :comp-configs="component.configs"
+            :_component="component"
+        ></component>
+        </el-tab-pane>
+      </el-tabs>
+      <template v-else>
+        <component
+          v-for="component in components"
+          :key="component.id"
+          :is="'epx-' + component.contentType"
+          :content-type="component.contentType"
+          :comp-id="getComponentId(component)"
+          :comp-title="component.title"
+          :items="component.items"
+          :current-query="{scopeParams: scopeParams, deptId: selectOrg && selectOrg.id, deptName: selectOrg && selectOrg.text}"
+          :comp-style="component.style"
+          :comp-configs="component.configs"
+        ></component>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-user-manage',
+  mixins: [component],
+  data () {
+    return {
+      filterWay: 'org',
+      treeProps: {
+        children: 'children',
+        label: 'text'
+      },
+      fold: false,
+      orgTreeData: [],
+      orgKeyword: '',
+      orgFieldConfigs: [],
+      orgFormData: {},
+      expandOrgKeys: ['all'],
+      userTypeTreeData: [],
+      userTypeKeyword: '',
+      userTypeFieldConfigs: [],
+      selectOrg: null,
+      userFormData: {},
+      showOrgDialog: false,
+      selectUser: null,
+      showUserDialog: false,
+      isRequesting: false,
+      activeName: ''
+    }
+  },
+  computed: {
+    components () {
+      // items  itemConfigs
+      const { items } = this.$component
+      return items
+    },
+    scopeParams () {
+      if (this.filterWay === 'org') {
+        if (this.selectOrg) {
+          if (this.selectOrg.id === 'all') {
+            return []
+          } else {
+            if (this.selectOrg.children.length > 0) {
+              return [{ field: 'DEPT_ID', mode: 'multi_in', values: this.selectOrg.id }]
+            } else {
+              return [{ field: 'DEPT_ID', mode: 'equal', values: this.selectOrg.id }]
+            }
+          }
+        }
+      } else {
+        if (this.selectUser) {
+          if (this.selectUser.id === 'all') {
+            return []
+          } else {
+            return [{ field: 'USER_TYPE', mode: 'equal', values: this.selectUser.id }]
+          }
+        }
+      }
+      return []
+    },
+    deptScopeParams () {
+      const { deptScopeParams = [] } = this.$configs
+
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...deptScopeParams])
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || evalWith(`that.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  methods: {
+    getOrgTreeData () {
+      const params = {
+        action: 'getTree',
+        entityId: 'FM_DEPT',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc',
+        up_field: 'UP',
+        scopeParams: JSON.stringify(this.deptScopeParams)
+      }
+      if (this.orgKeyword) params['scope.NAME#like'] = this.orgKeyword
+      this.$http.$post(params)
+        .then(data => {
+          this.treeModule = [...data]
+          this.orgTreeData = [{ id: 'all', text: this.clientConfig.NAME, children: [...data] }]
+        })
+    },
+    getOrgFieldConfigs () {
+      this.$FieldFactory.createFields({
+        metaId: 'FM_DEPT',
+        pageType: 'EDIT',
+        fields: ['ID', 'NAME', 'CODE', 'UP']
+      })
+        .then(data => {
+          this.orgFieldConfigs = data
+        })
+    },
+    getUserTypeFieldConfigs () {
+      this.$FieldFactory.createFields({
+        metaId: 'FM_USER_TYPE',
+        pageType: 'EDIT',
+        fields: ['ID', 'SYSTEM', 'NAME', 'CODE']
+      })
+        .then(data => {
+          this.userTypeFieldConfigs = data
+        })
+    },
+    getUserTypeTreeData () {
+      this.$http.getTree({
+        entityId: 'FM_USER_TYPE',
+        'scope.NAME#like': this.userTypeKeyword
+      })
+        .then(data => {
+          // 只读树：markRaw 掐掉整棵树的深度响应式（省的是依赖收集，不是 Proxy 本身）。这棵树的 el-tree
+          // (:68) 没开 draggable —— 上面 getOrgTreeData 那棵开了，所以**不能**照抄到那里。将来若要改树里
+          // 某个节点并期望 UI 跟着变，正确做法是重新赋一份新数组，而不是把 markRaw 摘掉。
+          this.userTypeTreeData = markRaw([{ id: 'all', text: '全部', children: [] }, ...data])
+        })
+    },
+    $refesh () {
+      this.getOrgTreeData()
+    },
+    orgTreeClick (data) {
+      this.selectOrg = data
+    },
+    expandNode (node) {
+      this.expandOrgKeys = [...new Set([...this.expandOrgKeys, node.id])]
+    },
+    collapseNode (node) {
+      const index = this.expandOrgKeys.findIndex(item => item === node.id)
+      if (index !== -1) {
+        this.expandOrgKeys.splice(index, 1)
+      }
+    },
+    getParentNode (treeModule, nodeId, parent) {
+      for (const node of treeModule) {
+        if (node.id === nodeId) return parent
+        if (node.children) {
+          const _node = this.getParentNode(node.children, nodeId, node)
+          if (_node) return _node
+        }
+      }
+    },
+    addOrg (node, level) {
+      let selectOrg = this.selectOrg
+      if (node) {
+        selectOrg = node
+      }
+      if (selectOrg) {
+        if (level === 0) {
+          // 获取其父节点
+          const parent = this.getParentNode(this.treeModule, node.id)
+          if (parent) {
+            this.orgFormData = {
+              UP: parent.id,
+              'UP#': parent.text
+            }
+          } else {
+            this.orgFormData = {}
+          }
+        } else {
+          this.orgFormData = {
+            UP: selectOrg.id,
+            'UP#': selectOrg.text
+          }
+        }
+      }
+      this.dataType = 'add'
+      this.showOrgDialog = true
+    },
+    editOrg (data) {
+      console.log(data)
+      if (this.selectOrg || data) {
+        this.dataType = 'edit'
+        this.$http.get({
+          entityId: 'FM_DEPT',
+          id: data.id || this.selectOrg.id
+        })
+          .then(data => {
+            this.orgFormData = data.data
+            this.showOrgDialog = true
+          })
+      } else {
+        this.$message.error('请选择一条记录')
+      }
+    },
+    deleteOrg (data) {
+      if (this.selectOrg || data) {
+        this.$confirm(this.$t('Confirm the deletion'), this.$t('hint'), {
+          confirmButtonText: this.$t('confirm'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.$http.removeMulti({
+            entityId: 'FM_DEPT',
+            ids: data.id || this.selectOrg.id
+          })
+            .then(data => {
+              this.$message.success('删除成功')
+              this.getOrgTreeData()
+            })
+            .catch(err => {
+              this.$message.success(err.message)
+            })
+        })
+      } else {
+        this.$message.error('请选择一条记录')
+      }
+    },
+    submitOrg () {
+      this.$refs.orgForm.validate((valid, err) => {
+        if (!valid) {
+          for (const key in err) {
+            const errMessgae = err[key][0]
+            this.$message.error(errMessgae.message)
+            return
+          }
+        } else {
+          const params = {
+            entityId: 'FM_DEPT',
+            'bean.CLIENT': this.CLIENT,
+            'bean.SYSTEM': this.SYSTEM
+          }
+          if (this.orgFormData.ID) {
+            params.action = 'update'
+          }
+          for (const key in this.orgFormData) {
+            if (!key.includes('#')) {
+              params[`bean.${key}`] = this.orgFormData[key]
+            }
+          }
+          if (this.isRequesting) return
+          this.isRequesting = true
+          this.$http.save({
+            ...params
+          })
+            .then(() => {
+              this.isRequesting = false
+              this.showOrgDialog = false
+              this.getOrgTreeData()
+              this.$message.success('保存成功')
+            })
+            .catch(err => {
+              this.isRequesting = false
+              this.$message.error(err.message)
+            })
+        }
+      })
+    },
+    addUser () {
+      this.dataType = 'add'
+      this.showUserDialog = true
+    },
+    editUser () {
+      if (this.selectUser) {
+        this.dataType = 'edit'
+        this.$http.get({
+          entityId: 'FM_USER_TYPE',
+          id: this.selectUser.id
+        })
+          .then(data => {
+            this.userFormData = data.data
+            this.showUserDialog = true
+          })
+      } else {
+        this.$message.error('请选择一条记录')
+      }
+    },
+    deleteUser () {
+      if (this.selectUser) {
+        this.$confirm(this.$t('Confirm the deletion'), '提示', {
+          confirmButtonText: this.$t('confirm'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.$http.removeMulti({
+            entityId: 'FM_USER_TYPE',
+            ids: this.selectUser.id
+          })
+            .then(data => {
+              this.$message.success('删除成功')
+              this.getUserTypeTreeData()
+            })
+            .catch(err => {
+              this.$message.success(err.message)
+            })
+        })
+      } else {
+        this.$message.error('请选择一条记录')
+      }
+    },
+    submitUser () {
+      this.$refs.userForm.validate((valid, err) => {
+        if (!valid) {
+          for (const key in err) {
+            const errMessgae = err[key][0]
+            this.$message.error(errMessgae.message)
+            return
+          }
+        } else {
+          const params = {
+            entityId: 'FM_USER_TYPE',
+            'bean.CLIENT': this.CLIENT,
+            'bean.SYSTEM': this.SYSTEM
+          }
+          if (this.userFormData.ID) {
+            params.action = 'update'
+          }
+          for (const key in this.userFormData) {
+            if (!key.includes('#')) {
+              params[`bean.${key}`] = this.userFormData[key]
+            }
+          }
+          if (this.isRequesting) return
+          this.isRequesting = true
+          this.$http.save({
+            ...params
+          })
+            .then(() => {
+              this.isRequesting = false
+              this.showUserDialog = false
+              this.getUserTypeTreeData()
+              this.$message.success('保存成功')
+            })
+            .catch(err => {
+              this.isRequesting = false
+              this.$message.error(err.message)
+            })
+        }
+      })
+    },
+    getTreeModuleNode (modules, parentId) {
+      let node = null
+      for (let i = 0; i < modules.length; i++) {
+        const module = modules[i]
+        if ((module.id || module.ID) === parentId) {
+          node = module
+          return node
+        } else if (module.children && module.children.length > 0) {
+          node = this.getTreeModuleNode(module.children, parentId)
+        }
+        if (node) {
+          return node
+        }
+      }
+    },
+    allowDrop (draggingNode, dropNode, type) {
+      if (dropNode.data.id === 'all' && type !== 'inner') {
+        return false
+      }
+      return true
+    },
+    drop (node, current, type, event) {
+      // 获取当前节点结束后的父节点
+      let parentId = ''
+      let modules = []
+      if (type === 'after' || type === 'before') {
+        parentId = current.data.parent || 'root'
+      } else if (type === 'inner') {
+        parentId = current.data.id || current.data.ID
+      }
+      const orgTreeData = this.orgTreeData[0].children
+      if (parentId === 'root') {
+        modules = [...orgTreeData]
+      } else {
+        const parentNode = this.getTreeModuleNode(orgTreeData, parentId) || { children: [...orgTreeData] }
+        modules = [...parentNode.children]
+      }
+      // 获取其父节点的所有子节点
+      const str = modules.reduce((str, item, index) => (str += (item.id || item.ID) + ':' + index + ','), '')
+      // 递归获取id为parentId的节点
+      this.$http.$post({
+        action: 'moveTree',
+        entityId: 'FM_DEPT',
+        id: node.data.id || node.data.ID,
+        selfAttriName: 'ID',
+        newParentId: parentId,
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(data => {
+          this.showPage = false
+          this.getOrgTreeData()
+          this.$nextTick(() => {
+            this.showPage = true
+          })
+        })
+    },
+    // 页面导入
+    importDept () {
+      this.$createPage({
+        metaId: 'FM_DEPT',
+        component: 'import-page', // 默认模板 epx-export + component
+        params: {
+          isTreeMeta: true
+        }
+      })
+    },
+    exportDept () {
+      this.$http.getCount({
+        entityId: 'FM_DEPT'
+      })
+        .then(data => {
+          this.goPage({
+            pageFlag: 'v_export',
+            component: 'export-page',
+            metaId: 'FM_DEPT',
+            params: {
+              selects: this.selectOrg ? this.selectOrg.id : '',
+              total: data.total
+            }
+          })
+        })
+    }
+
+  },
+  created () {
+    this.getOrgTreeData()
+    this.getUserTypeTreeData()
+    this.getOrgFieldConfigs()
+    this.getUserTypeFieldConfigs()
+    this.activeName = this.components[0].id
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100%;
+  display: flex;
+}
+.filter-container {
+  width: 300px;
+  height: 100%;
+  margin-right: calc(var(--margin) * 2);
+  box-sizing: border-box;
+  padding: 20px;
+  background: var(--epx-bg-card);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  transition: all .3s;
+  border-radius: var(--border-radius);
+  &.fold {
+    width: 0;
+    padding: 20px 0;
+    .fold-btn {
+      right: -10px
+    }
+  }
+}
+.fold-btn {
+  position: absolute;
+  right: 8px;
+  top: 0;
+  width: 20px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+  text-align: center;
+  color: var(--epx-text-secondary);
+  cursor: pointer;
+}
+.filter-way {
+  margin-bottom: 20px;
+
+    :deep(.el-radio-button__inner) {
+      width: 120px;
+    }
+
+}
+.filter-tabs {
+  width: 100%;
+  height:  100%;
+  flex: 1;
+
+    :deep(.el-tabs__header) {
+      display: none;
+    }
+    :deep(.el-tabs__content) {
+      height: 100%;
+      overflow: hidden;
+    }
+    :deep(.el-tab-pane) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+}
+.tree {
+  flex: 1;
+  overflow: auto;
+}
+.filter-search {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 10px;
+
+}
+.operate-icon {
+  font-size: var(--epx-font-size-l);
+  margin-left: 8px;
+  cursor: pointer;
+}
+.tree {
+
+    :deep(.el-tree-node.is-current) {
+      >.el-tree-node__content {
+        background: var(--epx-bg);
+      }
+    }
+    :deep(.el-tree-node__content) {
+      height: 32px;
+    }
+
+}
+.tree-node {
+  flex: 1;
+  line-height: 32px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  >span {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &:hover {
+    .node-operate-icon {
+      display: inline
+    }
+  }
+}
+.tree-node-operate {
+  float: right;
+  margin-right: 6px;
+}
+.node-operate-icon {
+  color: var(--epx-text-secondary);
+  display: none;
+}
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: var(--epx-font-size-l);
+}
+.content {
+  flex: 1;
+  overflow: auto;
+
+    :deep(>.list-container) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .table {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+
+}
+.tabs {
+  background: var(--epx-bg-card);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+    :deep(.el-tabs__content) {
+      flex: 1;
+      .el-tab-pane {
+        overflow: auto;
+        height: 100%;
+        >.list-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .table {
+            flex: 1;
+            overflow: auto;
+          }
+        }
+      }
+    }
+
+}
+</style>