epx-frame 3.5.0-shpgy.1

package/src/frame/components/UserManage.vue

@@ -0,0 +1,716 @@
+<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="medium" clearable @change="getOrgTreeData"></el-input>
+            <!-- <el-dropdown>
+              <span class="operate-icon">
+                <i class="el-icon-setting"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="addOrg">新增</el-dropdown-item>
+                <el-dropdown-item @click.native="importDept">导入</el-dropdown-item>
+                <el-dropdown-item @click.native="exportDept" >导出</el-dropdown-item>
+              </el-dropdown-menu>
+            </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 slot-scope="{ node, data }">
+               <span :class="['tree-node']" slot="reference" >
+                  <!-- 图标 -->
+                  <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'">
+                    <span class="node-operate-icon">
+                      <i class="el-icon-setting"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item @click.native="addOrg(data, 0)">添加同级部门</el-dropdown-item>
+                      <el-dropdown-item @click.native="addOrg(data, 1)">添加子部门</el-dropdown-item>
+                      <el-dropdown-item @click.native="editOrg">编辑</el-dropdown-item>
+                      <el-dropdown-item @click.native="deleteOrg">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </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="medium" clearable @change="getUserTypeTreeData"></el-input>
+            <el-dropdown>
+              <span class="operate-icon">
+                <i class="el-icon-setting"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="addUser">新增</el-dropdown-item>
+                <el-dropdown-item @click.native="editUser" :disabled="!selectUser || selectUser.id==='all'">编辑</el-dropdown-item>
+                <el-dropdown-item @click.native="deleteUser" :disabled="!selectUser || selectUser.id==='all'">删除</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <el-tree class="tree" :data="userTypeTreeData" :props="treeProps"  @node-click="data=> selectUser = data">
+            <template slot-scope="{ node, data }">
+               <span class="tree-node" slot="reference" >
+                  <!-- 图标 -->
+                  <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'? '编辑' : '新增') + '组织机构'"
+        :visible.sync="showOrgDialog"
+        width="50%"
+      >
+        <div>
+          <epx-table-form class="form-content" ref="orgForm" :fieldsConfigs="orgFieldConfigs" v-model="orgFormData" :column="1"></epx-table-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="showOrgDialog = false">取 消</el-button>
+          <el-button type="primary" @click="submitOrg" v-loading="isRequesting">保存</el-button>
+        </span>
+      </el-dialog>
+      <el-dialog
+        :title="(dataType==='edit'? '编辑' : '新增') + '用户类型'"
+        :visible.sync="showUserDialog"
+        width="50%"
+      >
+        <div>
+          <epx-table-form class="form-content" ref="userForm" :fieldsConfigs="userTypeFieldConfigs" v-model="userFormData" :column="1"></epx-table-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="showUserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="submitUser" v-loading="isRequesting">保存</el-button>
+        </span>
+      </el-dialog>
+    </div>
+     <div class="content">
+      <component
+        v-for="component in components"
+        :key="component.id"
+        :is="'epx-' + component.contentType"
+        is-component
+        :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>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/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
+    }
+  },
+  computed: {
+    components () {
+      // items  itemConfigs
+      const { items } = this.$component
+      return items
+    },
+    getComponentId () {
+      return component => {
+        if (!this.isPage) {
+          const { id } = this.$component
+          return id + '-' + component.id
+        }
+        return component.id
+      }
+    },
+    scopeParams () {
+      if (this.filterWay === 'org') {
+        if (this.selectOrg) {
+          if (this.selectOrg.id === 'all') {
+            return []
+          } else {
+            if (this.selectOrg.children.length > 0) {
+              return [{ field: 'UDR|DEPT_UP', mode: 'like', values: this.selectOrg.id }]
+            } else {
+              return [{ field: 'UDR|DEPT_ID', mode: 'like', 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])
+      // eslint-disable-next-line no-unused-vars
+      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 {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || eval(`that.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  methods: {
+    getOrgTreeData () {
+      this.$http.$post({
+        action: 'getTree',
+        entityId: 'FM_DEPT',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc',
+        up_field: 'UP',
+        'scope.NAME#like': this.orgKeyword,
+        scopeParams: JSON.stringify(this.deptScopeParams)
+      })
+        .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 => {
+          this.userTypeTreeData = [{ 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.id === 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 () {
+      if (this.selectOrg) {
+        this.dataType = 'edit'
+        this.$http.get({
+          entityId: 'FM_DEPT',
+          id: this.selectOrg.id
+        })
+          .then(data => {
+            this.orgFormData = data.data
+            this.showOrgDialog = true
+          })
+      } else {
+        this.$message.error('请选择一条记录')
+      }
+    },
+    deleteOrg () {
+      if (this.selectOrg) {
+        this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$http.removeMulti({
+            entityId: 'FM_DEPT',
+            ids: 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('确认删除？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          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
+      }
+      if (parentId === 'root') {
+        modules = [{ ...node.data }, ...this.treeModule]
+      } else {
+        const parentNode = this.getTreeModuleNode(this.treeModule, parentId) || { children: [...this.treeModule] }
+        modules = [...parentNode.children]
+      }
+
+      // 获取其父节点的所有子节点
+      const str = modules.reduce((str, item, index) => (str += (item.id || item.ID) + ':' + index + ','), '')
+      // 递归获取id为parentId的节点
+      this.$http.$request({
+        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.$nextTick(() => {
+            this.showPage = true
+          })
+        })
+    },
+    // 页面导入
+    importDept () {
+      this.$createPage({
+        metaId: 'FM_DEPT',
+        component: 'import-page' // 默认模板 epx-export + component
+      })
+    },
+    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()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100%;
+  display: flex;
+}
+.filter-container {
+  width: 300px;
+  height: 100%;
+  margin-right: 20px;
+  box-sizing: border-box;
+  padding: 20px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  transition: all .3s;
+  &.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: #888;
+  cursor: pointer;
+}
+.filter-way {
+  margin-bottom: 20px;
+  &::v-deep {
+    .el-radio-button__inner {
+      width: 120px;
+    }
+  }
+}
+.filter-tabs {
+  width: 100%;
+  height:  100%;
+  flex: 1;
+  &::v-deep {
+    .el-tabs__header {
+      display: none;
+    }
+    .el-tabs__content {
+      height: 100%;
+      overflow: hidden;
+    }
+    .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: 16px;
+  margin-left: 8px;
+  cursor: pointer;
+}
+.tree {
+  &::v-deep {
+    .el-tree-node.is-current {
+      >.el-tree-node__content {
+        background: #F5F7FA;
+      }
+    }
+    .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: #999;
+  display: none;
+}
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: 16px;
+}
+.content {
+  flex: 1;
+  overflow: auto;
+  &::v-deep {
+    >.list-container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .table {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+  }
+}
+</style>