create-young-proj 0.12.0 → 1.0.0

package/template-nuxt-admin/pages/system/hooks/useRole.ts

@@ -1,335 +0,0 @@
-/*
- * @Author: zhangyang
- * @Date: 2023-07-26 15:51:14
- * @LastEditTime: 2023-07-28 11:22:35
- * @Description:
- */
-import type {
-  SelectOptionItem,
-  TableDataItem,
-  TableHeadItem,
-  YoungSearchScheme,
-} from '@bluesyoung/ui-vue3-element-plus'
-import { YoungSelect, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus'
-import { deepClone } from '@bluesyoung/utils'
-
-export function useRoleBase() {
-  const FORM_TEMP: RoleItem = {
-    id: 0,
-    name: '',
-    keyword: '',
-    desc: '',
-    status: 1,
-    sort: 0,
-  }
-
-  const { isAdd, isEdit, edit, del, sure, clear, form, formRef, validForm } = useFormMode(
-    FORM_TEMP,
-    {
-      addCbk: async () => {
-        const res = (await validForm()) as boolean
-        if (res) {
-          const v = deepClone(form.value)
-          await apis.post.addRoleItem(v)
-          ElMessage.success('新增成功！')
-        }
-        return res
-      },
-      modCbk: async () => {
-        const res = (await validForm()) as boolean
-        if (res) {
-          const v = deepClone(form.value)
-          await apis.patch.changeRoleItem(v)
-          ElMessage.success('修改成功！')
-        }
-        return res
-      },
-      delCbk: async (row) => {
-        await apis.delete.deleteRole(row.id.toString())
-        ElMessage.success('删除成功！')
-        query.value.pageNum = 1
-      },
-      cgEffect: () => getList(),
-    },
-  )
-
-  const options: SelectOptionItem[] = [
-    { label: '禁用', value: 0 },
-    { label: '启用', value: 1 },
-  ]
-
-  const tableHead: TableHeadItem<RoleItem>[] = [
-    { label: '角色ID', prop: 'id' },
-    { label: '角色关键字', prop: 'keyword' },
-    { label: '角色名称', prop: 'name' },
-    { label: '角色描述', prop: 'desc' },
-    { label: '创建信息', prop: 'creator' },
-    {
-      label: '启用状态',
-      prop: 'status',
-      render: row =>
-        h(YoungSelect, {
-          'modelValue': row.status,
-          options,
-          'onUpdate:modelValue': async (status) => {
-            // 状态未修改
-            if (status === row.status)
-              return
-
-            row.status = status as 0 | 1
-            await apis.patch.changeRoleItem(row)
-            ElMessage.success('修改成功！')
-          },
-        }),
-    },
-  ]
-  const tableData = ref<TableDataItem<RoleItem>[]>([])
-  const getList = async () => {
-    const { list, pageNum, pageSize, total } = await apis.get.getRoleList(query.value)
-    tableData.value = deepClone(list || [])
-    query.value.pageNum = +pageNum || 1
-    query.value.pageSize = +pageSize || 50
-    query.value.total = +total || 0
-  }
-
-  interface Query extends BaseQuery {
-    name: string
-    keyword: string
-    status: 0 | 1
-  }
-
-  const { query, reset } = useQuery<Query>(
-    {
-      pageNum: 1,
-      pageSize: 10,
-      total: 0,
-      name: '',
-      keyword: '',
-      status: 1,
-    },
-    getList,
-  )
-
-  const queryScheme: YoungSearchScheme<Query> = {
-    name: {
-      type: 'input',
-      tip: '角色名称',
-      attrs: {
-        placeholder: '请输入角色名称(中文)',
-      },
-    },
-    keyword: {
-      type: 'input',
-      tip: '角色关键字',
-      attrs: {
-        placeholder: '请输入角色关键字(英文)',
-      },
-    },
-    status: {
-      type: 'select',
-      tip: '状态',
-      attrs: {
-        placeholder: '角色状态',
-      },
-      options,
-    },
-  }
-
-  return {
-    query,
-    queryScheme,
-    getList,
-    reset,
-    tableHead,
-    tableData,
-    baseFormRef: formRef,
-    base: reactive({
-      form,
-      isAdd,
-      isEdit,
-      edit,
-      del,
-      sure,
-      clear,
-    }),
-  }
-}
-
-export function useRoleMenu() {
-  const showPriority = ref(false)
-  const currRole = ref(0)
-  const access = ref<number[]>([])
-  const origin = ref<number[]>([])
-
-  const tableHead = ref<TableHeadItem<NavArrItem>[]>([
-    { label: '菜单名称', prop: 'title' },
-    { label: '菜单id', prop: 'id' },
-    { label: '父节点', prop: 'parentId' },
-    { label: '页面路径', prop: 'component' },
-  ])
-  const tableData = ref<TableDataItem<NavArrItem>[]>([])
-
-  const checkMap = ref<Record<number, boolean>>({})
-
-  /**
-   * 生成节点映射
-   */
-  const nodeMap = new Map<number, NavArrItem>()
-  const generateNodeMap = (list: NavArrItem[]) => {
-    for (const node of list) {
-      nodeMap.set(node.id, node)
-      if (node.children && node.children?.length > 0)
-        generateNodeMap(node.children)
-    }
-  }
-
-  /**
-   * 多级联动选择
-   */
-  const selectChange = (item: NavArrItem) => {
-    if (item.children && item.children?.length !== 0) {
-      item.children.forEach((v) => {
-        checkMap.value[v.id] = checkMap.value[item.id]
-        selectChange(v)
-      })
-    }
-    if (checkMap.value[item.id]) {
-      while (item.parentId) {
-        const tp = nodeMap.get(item.parentId)
-        if (tp) {
-          item = tp
-          checkMap.value[item.id] = true
-        }
-        else {
-          break
-        }
-      }
-    }
-  }
-
-  const edit = async (row: TableDataItem<RoleItem>) => {
-    currRole.value = row.id
-    checkMap.value = {}
-    nodeMap.clear()
-
-    const { list, accessIds } = await apis.get.getRoleMenuTree(row.id)
-    generateNodeMap(list);
-    (Array.from(accessIds) as number[]).forEach((v) => {
-      checkMap.value[v] = true
-    })
-
-    tableData.value = deepClone(list)
-    access.value = accessIds
-    origin.value = accessIds
-    showPriority.value = true
-  }
-  const clear = () => {
-    showPriority.value = false
-    currRole.value = 0
-    tableData.value.length = 0
-  }
-
-  const sure = async () => {
-    const before = origin.value.slice()
-    const now = Object.entries(checkMap.value)
-      .filter(([k, v]) => v)
-      .map(([k, v]) => +k)
-
-    const add = now.filter(v => !before.includes(v))
-    const del = before.filter(v => !now.includes(v))
-    await apis.patch.changeRoleMenu(currRole.value, add, del)
-    ElMessage.success('修改成功！')
-    clear()
-  }
-
-  return {
-    showPriority,
-    menu: reactive({
-      checkMap,
-      tableHead,
-      tableData,
-      edit,
-      clear,
-      sure,
-      selectChange,
-    }),
-  }
-}
-
-export function useRoleApi() {
-  const showApi = ref(false)
-  const currRole = ref(0)
-  const access = ref<number[]>([])
-  const origin = ref<number[]>([])
-
-  const tableHead = ref<TableHeadItem<ApiItem>[]>([
-    { prop: 'desc', label: '接口描述' },
-    { prop: 'id', label: '接口ID' },
-    { prop: 'method', label: '接口方法' },
-    { prop: 'path', label: '请求地址' },
-  ])
-  const tableData = ref<TableDataItem<ApiItem>[]>([])
-
-  const checkMap = ref<Record<number, boolean>>({})
-
-  const edit = async (row: TableDataItem<RoleItem>) => {
-    currRole.value = row.id
-    checkMap.value = {}
-
-    const { list, accessIds } = await apis.get.getRoleApis(row.id);
-    (Array.from(accessIds) as number[]).forEach((v) => {
-      checkMap.value[v] = true
-    })
-
-    tableData.value = deepClone(
-      Array.from(list)
-        .map((item: any) => item.children)
-        .flat(),
-    )
-
-    access.value = accessIds
-    origin.value = accessIds
-    showApi.value = true
-
-    isAll.value = tableData.value.length === access.value.length
-  }
-  const clear = () => {
-    showApi.value = false
-    currRole.value = 0
-    tableData.value.length = 0
-  }
-
-  const sure = async () => {
-    const before = origin.value.slice()
-    const now = Object.entries(checkMap.value)
-      .filter(([k, v]) => v)
-      .map(([k, v]) => +k)
-
-    const add = now.filter(v => !before.includes(v))
-    const del = before.filter(v => !now.includes(v))
-    await apis.patch.changeRoleApi(currRole.value, add, del)
-    ElMessage.success('修改成功！')
-    clear()
-  }
-
-  const isAll = ref(false)
-  const changeAll = () => {
-    tableData.value.forEach((i) => {
-      checkMap.value[i.id] = isAll.value
-    })
-  }
-
-  return {
-    showApi,
-    api: reactive({
-      checkMap,
-      tableHead,
-      tableData,
-      edit,
-      clear,
-      sure,
-      isAll,
-      changeAll,
-    }),
-  }
-}

package/template-nuxt-admin/pages/system/menuList.vue

@@ -1,353 +0,0 @@
-<!--
- * @Author: zhangyang
- * @Date: 2023-07-25 16:45:17
- * @LastEditTime: 2023-08-25 16:55:00
- * @Description:
--->
-<script lang="ts" setup>
-import { YoungDialog, YoungSelect, YoungTablePro, useFormMode } from '@bluesyoung/ui-vue3-element-plus'
-import type { TableHeadItem } from '@bluesyoung/ui-vue3-element-plus'
-import { deepClone, isArray } from '@bluesyoung/utils'
-import { ElButton } from 'element-plus'
-
-definePageMeta({
-  title: '菜单管理',
-})
-
-const FORM_TEMP: NavArrItem = {
-  breadcrumb: 0,
-  component: '',
-  createdAt: '',
-  creator: '',
-  icon: '',
-  id: 0,
-  name: '',
-  not_dev: 0,
-  parentId: 0,
-  path: '',
-  permission: '',
-  redirect: '',
-  sort: 0,
-  status: 1,
-  title: '',
-  updatedAt: '',
-  visible: 1,
-}
-// key 的类型必须为 string 才会生效！！！
-const expandKeys = ref<Set<string>>(new Set())
-
-let tempArr: string[] = []
-function getFatherAndSon(arr: NavArrItem[], num?: number): string[] {
-  if (num === 1)
-    tempArr = []
-
-  for (const item of arr) {
-    tempArr.push(`${item.id}`)
-    if (item.children && isArray(item.children) && item.children.length > 0)
-      getFatherAndSon(deepClone(item.children))
-  }
-  return tempArr
-}
-function expandChange(...args: any) {
-  const [row, isOpen] = args as [NavArrItem, boolean]
-  const autoid = row.id
-  if (isOpen) {
-    expandKeys.value.add(`${autoid}`)
-  }
-  else {
-    const allSub = getFatherAndSon([row], 1)
-    allSub.forEach(v => expandKeys.value.delete(v))
-  }
-}
-const tableData = ref<NavArrItem[]>([])
-
-const topMenuOption = ref<Partial<NavArrItem>[]>([])
-
-/**
- * 生成节点映射
- */
-const nodeMap = new Map<string, NavArrItem>()
-function generateNodeMap(list: NavArrItem[]) {
-  for (const node of list) {
-    nodeMap.set(node.id.toString(), node)
-    if (node.children && node.children?.length > 0)
-      generateNodeMap(node.children)
-  }
-}
-
-/**
- * 获取节点列表
- */
-async function getList() {
-  const list = Object.values(await apis.get.getMenuList())
-  generateNodeMap(list)
-
-  tableData.value = list
-
-  topMenuOption.value = [
-    { title: '顶级目录', children: list, id: 0 },
-  ]
-}
-
-const {
-  isAdd,
-  isEdit,
-  form,
-  edit,
-  del,
-  sure,
-  clear,
-  formRef,
-  validForm,
-} = useFormMode<NavArrItem>(FORM_TEMP, {
-  addCbk: async () => {
-    const res = await validForm() as boolean
-    if (res) {
-      const v = deepClone(form.value)
-      await apis.post.addMenuItem(v)
-      ElMessage.success('菜单添加成功！')
-    }
-    return res
-  },
-  modCbk: async () => {
-    const res = await validForm() as boolean
-    if (res) {
-      const v = deepClone(form.value)
-      await apis.patch.changeMenuItem(v)
-      ElMessage.success('菜单修改成功！')
-    }
-    return res
-  },
-  delCbk: async (nav: NavArrItem) => {
-    apis.delete.deleteMenu(nav.id.toString())
-    expandKeys.value.delete(nav.id.toString())
-    ElMessage.success('节点删除成功！')
-    // 框架有 bug，视图更新不及时
-    location.reload()
-  },
-  cgEffect: async () => {
-    await getList()
-  },
-})
-
-/**
- * 添加节点
- */
-function add() {
-  form.value.parentId = 0
-  isAdd.value = true
-}
-
-const tableHead: TableHeadItem<NavArrItem>[] = [
-  {
-    prop: 'title',
-    label: '标题',
-    render: row => h('div', { class: 'inline-flex items-center justify-center' }, [
-      h('div', { class: row.icon }),
-      h('div', row.title),
-    ]),
-  },
-  {
-    prop: 'sort',
-    label: '同级排序',
-    aligin: 'center',
-    render: (row, i) => h('div', {
-      class: 'flex text-2xl justify-center',
-    }, [
-      h('div', {
-        class: 'i-ic-round-keyboard-arrow-up cursor-pointer',
-        title: '向上',
-        onClick: async () => {
-          const arr = nodeMap.get(row.parentId.toString())?.children || []
-          const index = arr.findIndex(m => m.id === row.id)
-          if (index <= 0) {
-            return ElMessage.warning('已经到最前面啦！')
-          }
-          else {
-            const pre = arr[index - 1]
-
-            const num = row.sort
-            const preNum = pre.sort
-
-            if (num !== preNum) {
-              row.sort = preNum
-              pre.sort = num
-            }
-            else {
-              row.sort = num - 1
-            }
-            await Promise.all([
-              apis.patch.changeMenuItem(row),
-              apis.patch.changeMenuItem(pre),
-            ])
-            ElMessage.success('顺序修改成功！')
-            getList()
-          }
-        },
-      }),
-      h('div', {
-        class: 'i-ic-round-keyboard-arrow-down cursor-pointer',
-        title: '向下',
-        onClick: async () => {
-          const arr = nodeMap.get(row.parentId.toString())?.children || []
-          const index = arr.findIndex(m => m.id === row.id)
-          if (index === arr.length - 1) {
-            return ElMessage.warning('已经到最后面啦！')
-          }
-          else {
-            const next = arr[index + 1]
-
-            const num = row.sort
-            const nextNum = next.sort
-
-            if (num !== nextNum) {
-              row.sort = nextNum
-              next.sort = num
-            }
-            else {
-              row.sort = num + 1
-            }
-            await Promise.all([
-              apis.patch.changeMenuItem(row),
-              apis.patch.changeMenuItem(next),
-            ])
-            ElMessage.success('顺序修改成功！')
-            getList()
-          }
-        },
-      }),
-    ]),
-  },
-  { prop: 'component', label: '页面路径' },
-  {
-    prop: 'visible',
-    label: '隐藏/显示',
-    render: row => h(YoungSelect, {
-      'modelValue': row.visible,
-      'options': [{ label: '显示', value: 1 }, { label: '隐藏', value: 0 }],
-      'onUpdate:modelValue': async (e: number) => {
-        // 状态未修改
-        if (e === row.visible)
-          return
-
-        row.visible = e
-        await apis.patch.changeMenuItem({ ...row, visible: e })
-        ElMessage.success('菜单修改成功！')
-      },
-    }),
-  },
-  { prop: 'creator', label: '创建时间' },
-  {
-    prop: 'id',
-    label: '操作',
-    fixed: 'right',
-    width: '180',
-    render: row => h('div', [
-      h(ElButton, {
-        text: true,
-        class: '!p-0',
-        type: 'primary',
-        onClick: () => edit(row),
-      }, {
-        default: () => h('div', '编辑'),
-      }),
-      h(ElButton, {
-        type: 'primary',
-        class: '!p-0',
-        text: true,
-        onClick: () => {
-          form.value.parentId = row.id
-          isAdd.value = true
-        },
-      }, {
-        default: () => h('div', '添加子节点'),
-      }),
-      h(ElButton, {
-        text: true,
-        class: '!p-0',
-        type: 'danger',
-        onClick: () => del(row),
-      }, {
-        default: () => h('div', '删除'),
-      }),
-    ]),
-  },
-]
-
-useTabReOpen(getList)
-</script>
-
-<template>
-  <ElCard>
-    <div>
-      <ElButton type="primary" plain @click="add">
-        新建菜单
-      </ElButton>
-    </div>
-    <!-- 节点列表 -->
-    <YoungTablePro
-      :table-data="tableData" :table-head="tableHead" :tree-props="{ children: 'children' }" row-key="id"
-      :expand-row-keys="[...expandKeys]" @expand-change="expandChange"
-    />
-    <!-- 添加 / 编辑 -->
-    <YoungDialog width="370px" :is-add="isAdd" :diff-form="form" :is-edit="isEdit" @sure="sure" @clear="clear">
-      <template #body>
-        <ElForm ref="formRef" :model="form" label-width="80px" :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
-          <ElFormItem label="上级目录">
-            <ElCascader
-              :model-value="form.parentId" :props="{
-                label: 'title',
-                value: 'id',
-                checkStrictly: true,
-                multiple: false,
-              }" :options="topMenuOption" :show-all-levels="false"
-              @update:model-value="(e: any) => form.parentId = e[e.length - 1]"
-            />
-          </ElFormItem>
-          <ElFormItem label="英文名称" prop="name" :rules="{ required: true, message: '请输入英文名', trigger: 'blur' }">
-            <ElInput v-model.trim="form.name" placeholder="请输入英文名" />
-          </ElFormItem>
-          <ElFormItem label="标题" prop="title" :rules="{ required: true, message: '请输入页面标题', trigger: 'blur' }">
-            <ElInput v-model.trim="form.title" placeholder="请输入页面标题" />
-          </ElFormItem>
-          <ElFormItem label="图标">
-            <ElSelect v-model="form.icon" class="select_icon" placeholder="请选择图标">
-              <template #prefix>
-                <div :class="form.icon" />
-              </template>
-              <ElOption v-for="(item, index) in MenuIconList" :key="`${index}sfjhaeoir`" :value="item.label">
-                <div :class="item.label" />
-              </ElOption>
-            </ElSelect>
-          </ElFormItem>
-          <ElFormItem label="排序">
-            <ElInputNumber v-model.number="form.sort" />
-          </ElFormItem>
-          <ElFormItem label="是否显示">
-            <ElRadioGroup v-model="form.visible">
-              <ElRadio :label="1">
-                显示
-              </ElRadio>
-              <ElRadio :label="0">
-                隐藏
-              </ElRadio>
-            </ElRadioGroup>
-          </ElFormItem>
-          <ElFormItem
-            label="路径" prop="component" :rules="form.parentId === 0 ? {}
-              : { message: '请输入合法的路径, eg: /path/page', trigger: 'blur', validator: (_: any, v: string) => v.trim() === '' || /\/(.*)\/(.*)/.test(v) }
-            "
-          >
-            <ElInput v-model.trim="form.component" />
-          </ElFormItem>
-        </ElForm>
-      </template>
-    </YoungDialog>
-  </ElCard>
-</template>
-
-<style lang="scss" scoped>
-:deep(.select_icon .el-input__inner) {
-  opacity: 0 !important;
-}
-</style>