@qqt-product/system 0.0.16 → 0.0.18

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

@@ -1,690 +0,0 @@
-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>
-      )
-    }
-  },
-})