@qqt-product/system 0.0.1

package/src/lib/components/QRoleList/src/components/userAuthorization/index.tsx

@@ -0,0 +1,690 @@
+import { ref, defineComponent, PropType, ExtractPropTypes, computed, onMounted } from 'vue'
+import type { Ref, ComputedRef } from 'vue'
+import QContentHeader from '../content-header'
+
+import { BUTTON_CUSTOM, BUTTON_CUSTOM_PRIMARY } from '@qqt-product/ui'
+import type { GlobalPageLayoutTypes } from '@qqt-product/ui'
+
+import { message as Message } from '@qqt-product/ui'
+
+import qqtApi from '@qqt-product/api'
+import type { Map } from '@qqt-product/api'
+
+import qqtUtils from '@qqt-product/utils'
+const { debounce, cloneDeep } = qqtUtils
+
+import { QIcon } from '@qqt-product/icons'
+import { UpOutlined, DownOutlined, CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
+
+import './userAuthorization.less'
+
+const authProps = {
+  rows: {
+    type: Array as PropType<GlobalPageLayoutTypes.RecordStringNumber[]>,
+    default() {
+      return []
+    },
+  },
+  /**
+  |--------------------------------------------------
+  | 目前为止该授权组件主要应用于三个页面
+  | 租户管理 TenantList（默认）
+  | 角色管理 RoleList
+  | 供应商权限组 SupplierGroupList
+  | 其中 租户管理 列表页面有批量、单选功能需要区分
+  |--------------------------------------------------
+  */
+  parentPath: {
+    type: String as PropType<'TenantList' | 'RoleList' | 'SupplierGroupList'>,
+    default: 'TenantList',
+  },
+}
+
+export type AuthProps = ExtractPropTypes<typeof authProps>
+
+// 定义树节点类型
+export interface TreeNode {
+  __show?: boolean
+  __checkall?: boolean
+  __indeterminate?: boolean
+  __checked?: boolean
+  __has_children?: boolean
+  __sibling_has_children?: boolean
+  level: number
+  isLeaf: boolean
+  key: string
+  menuType: number
+  parentId: string
+  slotTitle: string
+  value: string
+  children?: null | TreeNode[]
+}
+
+export default defineComponent({
+  name: 'QUserAuthorization',
+  components: {
+    'q-content-header': QContentHeader,
+    'q-icon': QIcon,
+    'up-outlined': UpOutlined,
+    'down-outlined': DownOutlined,
+    'caret-right-outlined': CaretRightOutlined,
+    'caret-down-outlined': CaretDownOutlined,
+  },
+  props: authProps,
+  setup(props: AuthProps, ctx) {
+    const Request: qqtApi.Request = qqtApi.useHttp()
+
+    // 自定义属性常量设置
+    const SHOW = '__show'
+    const CHECKALL = '__checkall'
+    const INDETERMINATE = '__indeterminate'
+    const CHECKED = '__checked'
+    const HAS_CHILDREN = '__has_children' // 有子级
+    const SIBLING_HAS_CHILDREN = '__sibling_has_children' // 同级别有子级
+
+    /**
+     * @description:
+     * 递归操作
+     * 根据给定值 value 和节点 property 递归查找树的所有层级关系结果
+     *
+     * @param {*} array
+     * @param {*} property
+     * @param {*} value
+     * @param {*} childrenName
+     * @param {*} fn
+     * @return {*}
+     */
+    const getNestedParentRelationItems = (array: TreeNode[], property = 'key', value = '', childrenName = 'children') => {
+      /**
+       * @description 递归查找所有符合条件依赖
+       *
+       * @param {*} arr
+       * @returns
+       */
+      console.time('getRelation')
+      function recursion(arr: TreeNode[]) {
+        let result: TreeNode[] = []
+        for (const v of arr) {
+          const val: string = v[property]
+          if (val === value) {
+            result.push(v)
+            break
+          } else {
+            const child = v[childrenName]
+            if (child && child.length) {
+              const sub = recursion(child)
+              if (sub && sub.length) {
+                result = [v].concat(sub)
+                // 自定义格式化处理数据
+                formatItem(v)
+              }
+            }
+          }
+        }
+        if (result.length) {
+          return result
+        }
+      }
+
+      console.timeEnd('getRelation')
+      return recursion(array)
+    }
+
+    /**
+     * @description: 赋值全选或半勾选操作
+     *
+     * @param {*} item
+     * @return {*}
+     */
+    function formatItem(item) {
+      // if (item.key === '1394598965592260610') {
+      //     console.log('item :>> ', item)
+      // }
+      const children = item.children || []
+      const checkAll = children.every((n) => n[CHECKED] || n[CHECKALL])
+      const indeterminate = children.some((n) => {
+        return n[CHECKED] || n[CHECKALL] || n[INDETERMINATE]
+      })
+      if (children && children.length) {
+        if (item[CHECKALL] !== checkAll) {
+          item[CHECKALL] = checkAll
+        }
+        const flag = !checkAll && indeterminate
+        if (item[INDETERMINATE] !== flag) {
+          item[INDETERMINATE] = flag
+        }
+      }
+    }
+
+    /**
+     * @description:
+     * 递归操作
+     * 设置子级绑定值
+     * @param {*} array
+     * @param {*} bool
+     * @param {*} childrenName
+     * @return {*}
+     */
+    const arrayTreeSetBool = (array: TreeNode[], bool = false, childrenName = 'children') => {
+      const recursion = (arr: TreeNode[]) => {
+        arr.forEach((v) => {
+          if (v[HAS_CHILDREN]) {
+            if (v[CHECKALL] !== bool) {
+              v[CHECKALL] = bool
+            }
+            if (v[INDETERMINATE]) {
+              v[INDETERMINATE] = false
+            }
+          } else {
+            if (v[CHECKED] !== bool) {
+              v[CHECKED] = bool
+            }
+          }
+
+          const child = v[childrenName]
+          if (child && child.length) recursion(child)
+        })
+      }
+      recursion(array)
+    }
+
+    /**
+     * @description:
+     * 递归操作
+     * 树级列表各层级统一添加相同自定义属性值
+     * @param {*} array
+     * @param {*} levelName
+     * @param {*} childrenName
+     * @return {*}
+     */
+    const arrayTreeAddPropertys = (array: TreeNode[], levelName = 'level', childrenName = 'children') => {
+      if (!Array.isArray(array)) return []
+      const recursion = (array: TreeNode[], level = 0) => {
+        level++
+        const siblingHasChildren = array.some((v) => v.children)
+        return array.map((v) => {
+          v[levelName] = level
+          const child = v[childrenName] as TreeNode[]
+          const hasChildren = !!(child && child.length)
+          // 展开/收起过滤切换绑定值
+          v[SHOW] = false
+          // checkbox 绑定值
+          v[CHECKED] = false
+
+          v[CHECKALL] = false
+          v[INDETERMINATE] = false
+          // 标识有没有子级
+          v[HAS_CHILDREN] = hasChildren
+          // 标识同级别其他 item 有没有子级, 用于布局排列控制
+          v[SIBLING_HAS_CHILDREN] = siblingHasChildren
+          if (hasChildren) recursion(child, level)
+          return v
+        })
+      }
+      return recursion(array)
+    }
+
+    /**
+     * @description:
+     * 递归操作
+     * 格式化处理树级列表各层级半勾选绑定值
+     * @param {*} array
+     * @param {*} childrenName
+     * @return {*}
+     */
+    const arrayTreeFormatItem = (array: TreeNode[], permissionIds: string[], property = 'key', childrenName = 'children') => {
+      if (!Array.isArray(array)) return []
+      let num = 0
+
+      const recursion = (arr: TreeNode[]) => {
+        arr.forEach((v) => {
+          if (permissionIds.includes(v[property])) {
+            // 有子级，绑定在 __checkAll 属性上面
+            if (v[HAS_CHILDREN]) {
+              v[CHECKALL] = true
+            } else {
+              v[CHECKED] = true
+            }
+            num++
+          }
+          const child = v[childrenName] as TreeNode[]
+          if (child && child.length) recursion(child)
+
+          // 格式化处理每一层级半勾选绑定值
+          // 注，此处后序遍历处理才能确保把父级绑定半勾选状态值
+          formatItem(v)
+        })
+      }
+      recursion(array)
+      console.log('num :>> ', num)
+    }
+
+    /**
+     * 计算属性
+     */
+    // 是否单个权限配置
+    const isSingle: ComputedRef<boolean> = computed(() => props.rows.length === 1)
+
+    // 租户管理
+    const isTenantList: ComputedRef<boolean> = computed(() => props.parentPath === 'TenantList')
+
+    // 角色管理
+    const isRoleList: ComputedRef<boolean> = computed(() => props.parentPath === 'RoleList')
+
+    // 供应商权限组
+    const isSupplierGroupList: ComputedRef<boolean> = computed(() => props.parentPath === 'SupplierGroupList')
+
+    // 标题
+    const title: ComputedRef<string> = computed(() => {
+      return isTenantList.value ? '租户' : isRoleList.value ? '角色' : '供应商权限组'
+    })
+
+    // 副标题
+    const computedSubTit: ComputedRef<string> = computed(() => {
+      const names = props.rows.map((n) => {
+        if (isTenantList.value) {
+          return n.elsAccount ? `${n.elsAccount}_${n.companyName}` : ''
+        } else {
+          return n.roleCode ? `${n.roleCode}_${n.roleName}` : ''
+        }
+      })
+      return names.join(',')
+    })
+
+    /**
+     * 属性定义
+     */
+    // loading
+    const spinning: Ref<boolean> = ref(false)
+    const treeList: Ref<TreeNode[]> = ref([])
+    // const ids: Ref<string[]> = ref([])
+    const permissionIds: Ref<string[]> = ref([])
+    const lastpermissionIds: Ref<string[]> = ref([])
+
+    const toggleShow = debounce(function checkAllChange(event: Event, item: TreeNode) {
+      console.log('item :>> ', item)
+      item[SHOW] = !item[SHOW]
+    }, 150)
+
+    // 全选操作
+    const handleCheckAllChange = debounce(function checkAllChange(event: Event, item: TreeNode) {
+      console.log('item :>> ', item)
+      if (!item.children) {
+        return
+      }
+
+      item[CHECKALL] = !item[CHECKALL]
+      item[INDETERMINATE] = false
+      arrayTreeSetBool(item.children, item[CHECKALL])
+
+      // 层级一后面子级勾选全部时，需要设置其父级半勾选状态
+      if (item.level > 1) {
+        getNestedParentRelationItems(treeList.value, 'key', item.key)
+      }
+    }, 150)
+
+    // 最底层 checkbox 勾选
+    // 需要递归查找其所有关联的父级checkbox 并设置半勾选状态
+    const handleLastLevelCheckBoxChange = debounce(function lastLevelCheckBoxChange(event: Event, item: TreeNode) {
+      console.log('item :>> ', item)
+      item[CHECKED] = !item[CHECKED]
+
+      if (item.level === 1) {
+        return
+      }
+      getNestedParentRelationItems(treeList.value, 'key', item.key)
+    }, 150)
+
+    // 获取所有树级节点的key值
+    const handleGetPermissionIds = (array: TreeNode[], property = 'key', childrenName = 'children') => {
+      if (!Array.isArray(array)) return []
+      const result: string[] = []
+      const recursion = (arr: TreeNode[]) => {
+        arr.forEach((v) => {
+          // if (v.key === '1394598965592260610') {
+          //     console.log('v :>> ', v)
+          // }
+          const val = v[property]
+          if (v[HAS_CHILDREN]) {
+            if (v[CHECKALL] || v[INDETERMINATE]) {
+              result.push(val)
+            }
+          } else {
+            if (v[CHECKED]) {
+              result.push(val)
+            }
+          }
+
+          const child = v[childrenName]
+          if (child && child.length) recursion(child)
+        })
+      }
+      recursion(array)
+
+      return result
+    }
+
+    const handleAuthSave = () => {
+      const permissionIds = handleGetPermissionIds(treeList.value)
+      console.log('permissionIds.length :>> ', permissionIds.length)
+      spinning.value = true
+      let params = {}
+      let request: Promise<void | Map> = Promise.resolve()
+
+      // 租户管理
+      if (isTenantList.value) {
+        // 单个租户
+        if (isSingle.value) {
+          const { elsAccount = '' } = props.rows[0] || {}
+          params = {
+            elsAccount,
+            permissionIds: permissionIds.join(','),
+            lastpermissionIds: lastpermissionIds.value.join(','),
+          }
+          request = Request.post({ url: '/account/permission/saveCompanyPermission', data: params })
+        } else {
+          // 多个租户
+          const elsAccount = props.rows.map((n) => n.elsAccount as string)
+          params = {
+            elsAccountList: elsAccount,
+            permissionIds: permissionIds.join(','),
+            lastpermissionIds: '',
+          }
+          request = Request.post({ url: '/account/permission/saveCompanyPermissionList', data: params })
+        }
+      }
+
+      // 角色管理
+      if (isRoleList.value) {
+        const { id = '' } = props.rows[0] || {}
+        params = {
+          roleId: id,
+          permissionIds: permissionIds.join(','),
+          lastpermissionIds: lastpermissionIds.value.join(','),
+        }
+        request = Request.post({ url: '/account/permission/saveRolePermission', data: params })
+      }
+
+      // 供应商权限组
+      if (isSupplierGroupList.value) {
+        const { id = '' } = props.rows[0] || {}
+        params = {
+          groupId: id,
+          permissionIds: permissionIds.join(','),
+          lastpermissionIds: lastpermissionIds.value.join(','),
+        }
+        request = Request.post({ url: '/account/supplierGroup/saveGroupPermission', data: params })
+      }
+
+      request
+        .then((res) => {
+          const response = res as GlobalPageLayoutTypes.ResponseType
+
+          const type = response.success ? 'success' : 'error'
+          Message[type](response.message)
+          if (response.success) {
+            ctx.emit('authCancel')
+          }
+        })
+        .finally(() => {
+          spinning.value = false
+        })
+    }
+
+    // 获取树级节点数据
+    const getTreeData = () => {
+      const Map = {
+        // 租户管理
+        TenantList: {
+          treeListApi: '/account/role/queryTreeList',
+          permissionApi: '/account/permission/queryCompanyPermission',
+          params: {},
+        },
+        // 角色管理
+        RoleList: {
+          treeListApi: '/account/role/queryTreeList',
+          permissionApi: '/account/permission/queryRolePermission',
+          params: {},
+        },
+        // 供应商权限组
+        SupplierGroupList: {
+          treeListApi: '/account/supplierGroup/queryTreeList',
+          permissionApi: '/account/supplierGroup/queryGroupPermission',
+          params: {},
+        },
+      }
+      const { treeListApi, permissionApi } = Map[props.parentPath]
+      let { params } = Map[props.parentPath]
+      spinning.value = true
+      Request.get({ url: treeListApi })
+        .then((res) => {
+          if (!res.success) {
+            return
+          }
+          const response = res.result
+
+          // 树级数据添加自定义属性
+          treeList.value = arrayTreeAddPropertys(response.treeList)
+          console.log('treeList.value :>> ', treeList.value)
+
+          // ids.value = ids
+
+          // 查询单个租户 或 单个角色 或 单个供应商 权限数据
+          if (isSingle.value) {
+            // 单个租户
+            if (isTenantList.value) {
+              const { elsAccount = '' } = props.rows[0] || {}
+              params = { elsAccount }
+            }
+
+            // 单个角色
+            if (isRoleList.value) {
+              const { id = '' } = props.rows[0] || {}
+              params = { roleId: id }
+            }
+
+            // 单个供应商
+            if (isSupplierGroupList.value) {
+              const { elsAccount = '', groupId = '' } = props.rows[0] || {}
+              params = { elsAccount, groupId }
+            }
+
+            spinning.value = true
+            Request.get({ url: permissionApi, params }).then((res) => {
+              if (!res.success) {
+                return
+              }
+              const result = res.result || []
+              permissionIds.value = result
+              lastpermissionIds.value = cloneDeep(result)
+              console.time('time')
+              arrayTreeFormatItem(treeList.value, permissionIds.value)
+              console.timeEnd('time')
+            })
+          }
+        })
+        .finally(() => {
+          spinning.value = false
+        })
+    }
+
+    // 菜单图标
+    // menuType, (0: 一级菜单，1: 子菜单, 2: 按钮)
+    const renderIcon = (item: TreeNode) => {
+      return item.menuType === 0 ? (
+        <q-icon class="icon" type="icon-first-level-menu" size="16" color="#5570f1" style={{ marginRight: '4px' }} />
+      ) : item.menuType === 1 ? (
+        <q-icon class="icon" type="icon-secondary-menu" size="16" color="#454F59" style={{ marginRight: '4px' }} />
+      ) : null
+    }
+
+    const renderMenuItem = (item: TreeNode) => {
+      return (
+        <a-col lg={8} xl={6} xxl={4}>
+          <a-checkbox checked={item[CHECKED]} onChange={(e: Event) => handleLastLevelCheckBoxChange(e, item)}>
+            {renderIcon(item)}
+            {item.slotTitle}
+          </a-checkbox>
+        </a-col>
+      )
+    }
+
+    const renderSubMenu = (item: TreeNode) => {
+      // 根据层级分别渲染不同的结构布局
+      const hasChildren = !!item[HAS_CHILDREN]
+
+      let subArr
+      if (hasChildren) {
+        if (item.children) {
+          subArr = item.children.map((sub) => renderItem(sub)) as JSX.Element[]
+        }
+      }
+
+      // 根据子级的子级添加class类名
+      const hasGrandchildren = item.children && item.children.some((sub) => sub.children)
+
+      const subArrElem = hasGrandchildren ? <div class="children">{subArr}</div> : <a-row class="children">{subArr}</a-row>
+
+      // 渲染层级一
+      if (item.level === 1) {
+        const toggleBtn = !hasChildren ? null : (
+          <a-button type="link" onClick={(e) => toggleShow(e, item)}>
+            <span>{item[SHOW] ? '收起' : '展开'}</span>
+            {item[SHOW] ? <up-outlined /> : <down-outlined />}
+          </a-button>
+        )
+
+        const childrenEl = !hasChildren ? null : (
+          <q-collapse-transition>
+            {!item[SHOW] ? null : <div class={['collapse', hasGrandchildren ? '' : 'noneGrandchildren']}>{hasGrandchildren ? subArr : <a-row class="children">{subArr}</a-row>}</div>}
+          </q-collapse-transition>
+        )
+
+        return (
+          <div class="item">
+            <div class={['level', `level_${item.level}`, item[SHOW] ? '' : 'border']}>
+              <div class="info">
+                {!hasChildren ? (
+                  <a-checkbox checked={item[CHECKED]} onChange={(e: Event) => handleLastLevelCheckBoxChange(e, item)}>
+                    {renderIcon(item)}
+                    <strong>{item.slotTitle}</strong>
+                  </a-checkbox>
+                ) : (
+                  <a-checkbox indeterminate={item[INDETERMINATE]} checked={item[CHECKALL]} onChange={(e: Event) => handleCheckAllChange(e, item)}>
+                    {renderIcon(item)}
+                    <strong>{item.slotTitle}</strong>
+                  </a-checkbox>
+                )}
+                <span class="tip">
+                  {'请耐心地完成您的'}
+                  {`${item.slotTitle}`}
+                  {'权限配置设置'}
+                </span>
+              </div>
+              <div class="extra">{toggleBtn}</div>
+            </div>
+            {childrenEl}
+          </div>
+        )
+      }
+
+      // 渲染层级二
+      if (item.level === 2) {
+        return (
+          <div class={['level', `level_${item.level}`]}>
+            <div class="info">
+              {!hasChildren ? (
+                <a-checkbox checked={item[CHECKED]} onChange={(e: Event) => handleLastLevelCheckBoxChange(e, item)}>
+                  {renderIcon(item)}
+                  {item.slotTitle}
+                </a-checkbox>
+              ) : (
+                <a-checkbox indeterminate={item[INDETERMINATE]} checked={item[CHECKALL]} onChange={(e: Event) => handleCheckAllChange(e, item)}>
+                  {renderIcon(item)}
+                  <strong>{item.slotTitle}</strong>
+                </a-checkbox>
+              )}
+            </div>
+            {subArrElem}
+          </div>
+        )
+      }
+
+      // 递归渲染缄层级三及后面层级
+      return (
+        <div class={['level', `level_${item.level}`]}>
+          {!hasChildren ? null : (
+            <span class={['triangle', item[SHOW] ? 'rotate90' : '']} onClick={(e: Event) => toggleShow(e, item)}>
+              <caret-right-outlined style={item[SHOW] ? { color: '#5570f1', fontSize: '16px' } : { color: 'rgba(0, 0, 0, 0.45)', fontSize: '16px' }} />
+            </span>
+          )}
+          {!hasChildren ? (
+            <a-checkbox checked={item[CHECKED]} onChange={(e: Event) => handleLastLevelCheckBoxChange(e, item)}>
+              {renderIcon(item)}
+              {item.slotTitle}
+            </a-checkbox>
+          ) : (
+            <a-checkbox indeterminate={item[INDETERMINATE]} checked={item[CHECKALL]} onChange={(e: Event) => handleCheckAllChange(e, item)}>
+              {renderIcon(item)}
+              {item.slotTitle}
+            </a-checkbox>
+          )}
+          {!hasChildren ? null : <q-collapse-transition>{!item[SHOW] ? null : subArrElem}</q-collapse-transition>}
+        </div>
+      )
+    }
+
+    // 渲染结构
+    const renderItem = (item: TreeNode) => {
+      // 某部分三级菜单有多个相邻同级别菜单
+      // 可能出现某几个没有子级，而其他有子级的情况
+      // 如供应商管理--准入管理简化模式
+      // 此处条件判断，如果相同层级某一个有子级就全部渲染成单行
+      return item.level === 1 || item[HAS_CHILDREN] || item[SIBLING_HAS_CHILDREN] ? renderSubMenu(item) : renderMenuItem(item)
+    }
+
+    // init 初始化
+    onMounted(() => getTreeData())
+
+    const buttons: GlobalPageLayoutTypes.PageButton[] = [
+      {
+        ...BUTTON_CUSTOM_PRIMARY,
+        title: '保存',
+        emit: true,
+        emitKey: 'authSave',
+      },
+      {
+        ...BUTTON_CUSTOM,
+        title: '取消',
+        emit: true,
+        emitKey: 'authCancel',
+      },
+    ]
+
+    const headerProps = {
+      buttons,
+      onAuthSave: () => handleAuthSave(),
+      ...ctx.attrs,
+    }
+
+    return () => {
+      return (
+        <div class="UserAuthorization">
+          <a-spin spinning={spinning.value}>
+            <q-content-header {...headerProps}></q-content-header>
+            <div class="container">
+              <div class="pageBox">
+                <div class="title">
+                  <strong>{title.value}</strong>
+                  <strong>{props.rows.length > 1 ? '批量权限配置' : '权限配置'}</strong>
+                  <span>{computedSubTit.value}</span>
+                </div>
+                {treeList.value.map((n) => renderItem(n))}
+              </div>
+            </div>
+          </a-spin>
+        </div>
+      )
+    }
+  },
+})