hlq-cli 1.0.0

package/templates/src/components/tree/index.vue

@@ -0,0 +1,222 @@
+<template>
+  <el-input
+    v-model="filterText"
+    style="max-width: 240px; width: 100%; margin-bottom: 12px"
+    v-if="hasSearch"
+    placeholder="请输入"
+  />
+  <div
+    ref="treeBox"
+    :style="`height: calc(100% - ${hasSearch ? 44 : 0}px);width: 100%;`"
+  >
+    <el-tree-v2
+      ref="treeRef"
+      style="height: 100%"
+      class="filter-tree"
+      :data="state.treeData"
+      :props="treeProps"
+      :current-node-key="
+        props.selectKey || (state.selectData && state.selectData.id)
+      "
+      :filter-method="filterNode"
+      :show-checkbox="selectType === 'checkbox'"
+      :highlight-current="selectType === 'radio'"
+      @current-change="nodeClick"
+      @node-expand="nodeExpand"
+      :expand-on-click-node="false"
+      :height="height"
+      :item-size="46"
+      :check-strictly="checkStrictly"
+    >
+      <template #default="{ node, data }">
+        <slot v-if="customLabel" :node="node" :data="data"></slot>
+        <div v-else class="ellipsis">
+          <span :title="node.label"> {{ node.label }} </span>
+        </div>
+        <div class="option">
+          <template v-if="!data.isLeaf && props.options?.includes('add')">
+            <Icon name="icon-line_plus" @click="addClick(data)"></Icon>
+          </template>
+          <template v-else>
+            <Icon
+              v-if="props.options?.includes('edit')"
+              name="icon-line_edit"
+              @click="editClick(data)"
+            ></Icon>
+            <el-popconfirm
+              title="确定要删除吗?"
+              @confirm="delClick(data)"
+              v-if="props.options?.includes('del')"
+            >
+              <template #reference>
+                <Icon name="icon-line_delete"></Icon>
+              </template>
+            </el-popconfirm>
+          </template>
+        </div>
+      </template>
+    </el-tree-v2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import Icon from '@/components/icon/index.vue'
+type optionsType = 'add' | 'edit' | 'del'
+
+interface Props {
+  treeData: Tree[]
+  children?: string
+  label?: string
+  nodeKey?: string // key
+  disabled?: string
+  isLeaf?: string
+  selectType?: 'checkbox' | 'radio' | ''
+  data?: Data // 全局数据data
+  params?: any
+  dataCode?: string // 全局数据code
+  selectKey?: string | number
+  options?: optionsType[]
+  checkedKey?: string[] | number[] // 默认勾选的节点
+  checkStrictly?: boolean // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+  customLabel?: boolean
+  isLazy?: boolean
+  hasSearch?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  children: 'children',
+  disabled: 'disabled',
+  isLeaf: 'isLeaf',
+  selectType: 'radio',
+  params: {},
+  nodeKey: 'id',
+  checkStrictly: false,
+  isLazy: false,
+  hasSearch: true,
+})
+const treeProps = computed(() => {
+  return {
+    children: props.children,
+    label: props.label || state.label || 'label',
+    disabled: props.disabled,
+    isLeaf: props.isLeaf,
+    value: props.nodeKey,
+  }
+})
+interface Tree {
+  [key: string]: any
+}
+const state = reactive({
+  treeData: [] as Tree[],
+  selectData: {} as Tree,
+  label: 'label',
+  value: 'value',
+  defaultExpandAll: true,
+  oldparams: null,
+  params: {} as Data,
+  lazyData: {} as Tree,
+  monitor: [],
+})
+const filterText = ref('')
+const treeRef = ref()
+let parentFilter: string[] = []
+watch(filterText, (val) => {
+  parentFilter = []
+  treeRef.value!.filter(val)
+})
+const treeBox = ref()
+const height = computed(() => {
+  if (treeBox.value) {
+    const inputHeight = 40
+    return treeBox.value.offsetHeight - inputHeight
+  }
+})
+// 默认展开两层
+const defaultExpandedKey = computed(() => {
+  const list: any = []
+  state.treeData.forEach((item: Tree) => {
+    list.push(item[props.nodeKey || 'id'])
+    if (item.children && item.children.length > 0) {
+      item.children.forEach((item2: Data) => {
+        list.push(item2[props.nodeKey || 'id'])
+      })
+    }
+  })
+  nextTick(() => {
+    if (treeRef.value) {
+      treeRef.value!.setExpandedKeys(list)
+    }
+  })
+  return list
+})
+const filterNode = (value: string, data: Tree) => {
+  if (!value) return true
+  if (
+    (data[props.label || state.label || 'label'].includes(value) ||
+      parentFilter.includes(data[props.nodeKey || 'id'])) &&
+    data.children
+  ) {
+    data.children.map((item: Tree) => {
+      parentFilter.push(item[props.nodeKey || 'id'])
+    })
+  }
+
+  if (!state.defaultExpandAll) {
+    if (data.children && data.children.length > 0) {
+      let flag = false
+      data.children.forEach((item: Tree) => {
+        if (filterNode(value, item)) flag = true
+      })
+
+      return flag
+    }
+  }
+  return (
+    data[props.label || state.label || 'label'].includes(value) ||
+    parentFilter.includes(data[props.nodeKey || 'id'])
+  )
+}
+const emits = defineEmits(['nodeClick', 'addClick', 'editClick', 'delClick'])
+const nodeClick = (data: Tree) => {
+  emits('nodeClick', data)
+  state.selectData = data
+}
+// 新增
+const addClick = (data: Tree) => {
+  emits('addClick', data)
+}
+// 编辑
+const editClick = (data: Tree) => {
+  emits('editClick', data)
+}
+// 删除
+const delClick = (data: Tree) => {
+  emits('delClick', data)
+}
+watch(
+  () => props.treeData,
+  () => {
+    state.treeData = props.treeData
+  },
+  {
+    deep: true,
+  },
+)
+watch(
+  () => props.checkedKey,
+  () => {
+    if (props.checkedKey && treeRef.value) {
+      nextTick(() => {
+        treeRef.value.setCheckedKeys(props.checkedKey)
+      })
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+onMounted(() => {
+  defaultExpandedKey()
+})
+</script>

package/templates/src/components/tree/lazyTree.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-input
+    v-model="filterText"
+    style="width: 240px; margin-bottom: 12px"
+    placeholder="请输入"
+  />
+  <el-tree
+    ref="treeRef"
+    class="filter-tree"
+    :props="treeProps"
+    lazy
+    :load="loadNode"
+    @current-change="nodeClick"
+    :filter-node-method="filterNode"
+    :show-checkbox="selectType === 'checkbox'"
+    :highlight-current="selectType === 'radio'"
+    :nodeKey="nodeKey || state.value"
+    :check-on-click-leaf="true"
+    :expand-on-click-node="false"
+    :current-node-key="state.clickData?.[nodeKey || state.value]"
+  >
+    <template #default="{ node, data }">
+      <slot :node="node" :data="data"></slot>
+    </template>
+  </el-tree>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+interface Props {
+  children?: string
+  label?: string
+  nodeKey?: string // key
+  disabled?: string
+  isLeaf?: string
+  selectType?: 'checkbox' | 'radio' | ''
+  actionMethod?: string
+  loadMethod: (node: any) => Promise<Data[]>
+}
+const props = withDefaults(defineProps<Props>(), {
+  children: 'children',
+  disabled: 'disabled',
+  isLeaf: 'isLeaf',
+  selectType: 'radio',
+})
+const treeProps = computed(() => {
+  return {
+    children: props.children,
+    label: props.label || state.label || 'label',
+    disabled: props.disabled,
+    isLeaf: props.isLeaf,
+  }
+})
+const state = reactive({
+  clickData: {} as Data,
+  label: 'label',
+  value: 'value',
+  defaultExpandAll: true,
+  params: null,
+})
+const filterText = ref('')
+const treeRef = ref()
+let parentFilter: string[] = []
+watch(filterText, (val) => {
+  parentFilter = []
+  treeRef.value!.filter(val)
+})
+const filterNode = (value: string, data: Data) => {
+  if (!value) return true
+  if (
+    (data[props.label || state.label || 'label'].includes(value) ||
+      parentFilter.includes(data[props.nodeKey || 'id'])) &&
+    data.children
+  ) {
+    data.children.map((item: Data) => {
+      parentFilter.push(item[props.nodeKey || 'id'])
+    })
+  }
+
+  if (!state.defaultExpandAll) {
+    if (data.children && data.children.length > 0) {
+      let flag = false
+      data.children.forEach((item: Data) => {
+        if (filterNode(value, item)) flag = true
+      })
+
+      return flag
+    }
+  }
+  return (
+    data[props.label || state.label || 'label'].includes(value) ||
+    parentFilter.includes(data[props.nodeKey || 'id'])
+  )
+}
+const emits = defineEmits(['nodeClick'])
+const nodeClick = (data: Data) => {
+  emits('nodeClick', data)
+  state.clickData = data
+}
+let resolveFun: any
+const loadNode = async (node: any, resolve: (data: Data[]) => void) => {
+  const list = await props.loadMethod(node)
+  if (node.level === 0 && !resolveFun) {
+    resolveFun = resolve
+  }
+  return resolve(list)
+}
+const reloadTree = () => {
+  const tree = treeRef.value
+  tree.store.root.setData([])
+  loadNode({ level: 0 }, resolveFun)
+}
+const setCurrentKey = (key?: string) => {
+  const tree = treeRef.value
+  tree.setCurrentKey(key || null)
+}
+// 重新渲染指定节点下的子节点
+const reloadNodeChildren = async (nodeKey: string) => {
+  const tree = treeRef.value
+  if (tree) {
+    // 找到指定节点
+    const node = tree.getNode(nodeKey)
+    if (node) {
+      // 清空节点的子节点数据
+      node.childNodes = []
+      node.loaded = false
+      // 重新加载子节点
+      await loadNode(node, (data) => {
+        node.doCreateChildren(data)
+      })
+    }
+  }
+}
+defineExpose({ reloadTree, setCurrentKey, reloadNodeChildren })
+onMounted(() => {})
+</script>

package/templates/src/data.d.ts

@@ -0,0 +1,4 @@
+// 无法指定的对象
+interface Data {
+  [key: string]: any
+}

package/templates/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import '/public/font/iconfont.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+const app = createApp(App)
+
+import { usePermissionStore } from './store/permission.ts'
+const store = usePermissionStore()
+store.setRouterList()
+import router from './router'
+app
+  .use(router)
+  .use(ElementPlus, {
+    locale: zhCn,
+  })
+  .mount('#app')

package/templates/src/router/index.ts

@@ -0,0 +1,60 @@
+import { createWebHistory, createRouter } from 'vue-router'
+import Login from '../views/login/index.vue'
+import Layout from '../components/layout/index.vue'
+import { usePermissionStore } from '../store/permission.ts'
+import { useUserStore } from '../store/user'
+import { isEmpty } from 'lodash'
+
+const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: Login,
+  },
+  {
+    path: '/',
+    name: 'layout',
+    component: Layout,
+    children: [
+      {
+        path: '/table',
+        name: 'table',
+        component: () => import('../views/templete/table.vue'),
+        meta: {
+          title: '表格',
+        },
+      },
+    ],
+  },
+  {
+    path: '',
+    redirect: '/login',
+  },
+]
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach((to, from, next) => {
+  const store = useUserStore()
+  const permissionStore = usePermissionStore()
+  permissionStore.setRouterList()
+
+  // if (to.path === '/login') {
+  //   store.clear()
+  //   next()
+  // } else if (isEmpty(to.matched)) {
+  //   store.clear()
+  //   next('/login')
+  // } else {
+  //   const token = store.token
+  //   if (token) {
+  //     next()
+  //   } else {
+  //     next('/login')
+  //   }
+  // }
+  next()
+})
+export default router

package/templates/src/store/menuInterface.ts

@@ -0,0 +1,10 @@
+// 菜单
+interface menuItem {
+  menuPath: string // 路由
+  menuCode: string // 路由名称
+  menuName: string // 标题
+  menuFile?: string // 组件路径
+  icon?: string // 图标
+  children?: Array<menuItem> // 子菜单
+  menuIndex?: number // 菜单排序
+}

package/templates/src/store/permission.ts

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia'
+import router from '@/router'
+import { type RouteRecordRaw } from 'vue-router'
+import { type menuItem } from './menuInterface'
+const modules = import.meta.glob('@/views/**/*.vue')
+const initRouteList = (item: menuItem) => {
+  const route: RouteRecordRaw = {
+    path: item.menuPath,
+    name: item.menuCode,
+    meta: {
+      title: item.menuName,
+      code: item.menuFile,
+      path: item.menuPath,
+    },
+    children: [],
+  }
+  route.component = modules[`/src/views${item.menuFile}`]
+  let children: Array<RouteRecordRaw> = []
+  if (item.children && item.children.length > 0) {
+    item.children = item.children.sort(
+      (a: menuItem, b: menuItem) => (a.menuIndex || 99) - (b.menuIndex || 99),
+    )
+    item.children.forEach((i: menuItem) => {
+      children.push(initRouteList(i))
+    })
+    route.children = children
+  } else {
+    delete item.children
+  }
+  return route
+}
+
+export const usePermissionStore = defineStore('permission', {
+  state: () => ({
+    menuList: [] as Array<menuItem>,
+    currentRole: '',
+  }),
+  getters: {},
+  actions: {
+    setMenuList(menuList: Array<menuItem>) {
+      this.menuList = menuList.filter((item: menuItem) => item.menuPath)
+    },
+    setRouterList() {
+      this.menuList
+        .sort(
+          (a: menuItem, b: menuItem) =>
+            (a.menuIndex || 99) - (b.menuIndex || 99),
+        )
+        .forEach((item: menuItem) => {
+          if (initRouteList(item).path) {
+            router.addRoute('layout', initRouteList(item))
+          }
+        })
+    },
+    clear() {
+      this.menuList = []
+    },
+  },
+})

package/templates/src/store/user.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { decode } from '@/utils/token'
+
+const getOtherMessage = (token: string) => {
+  const tokenData: any = decode(token)
+  return tokenData
+}
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    token: '',
+    otherMessage: {} as Data,
+  }),
+  getters: {},
+  actions: {
+    setToken(token: string) {
+      this.token = token
+      this.otherMessage = getOtherMessage(token)
+    },
+    clear() {
+      this.token = ''
+      this.otherMessage = {}
+    },
+  },
+})

package/templates/src/utils/axios/http.ts

@@ -0,0 +1,99 @@
+import { request } from './index'
+
+export interface HttpServiceConfig {
+  baseURL?: string
+  timeout?: number
+  headers?: Record<string, string>
+  preserveLongIntegers?: boolean
+  auto?: boolean
+  custom?: boolean
+}
+
+export class HttpService {
+  private baseURL: string
+  private timeout: number
+  private headers: Record<string, string>
+  private preserveLongIntegers: boolean
+  private auto: boolean
+  private custom: boolean
+
+  constructor(config: HttpServiceConfig = {}) {
+    this.baseURL = config.baseURL || ''
+    this.timeout = config.timeout || 10000
+    this.headers = config.headers || {}
+    this.preserveLongIntegers = config.preserveLongIntegers || false
+    this.auto = config.auto || false
+    this.custom = config.custom || false
+  }
+
+  /**
+   * API 调用
+   * @param {string} url
+   * @param {string} method
+   * @param {Data | Data[]} data
+   * @returns {Promise<Response>}
+   */
+  api = (
+    url: string,
+    method?: string,
+    data?: Data | Data[],
+  ): Promise<Response> => {
+    const parameter: Record<string, unknown> = {
+      url: url,
+      method: method || 'get',
+      data: {},
+      params: {},
+    }
+    if (method === 'get' || method === 'postParams') {
+      parameter.params = data || {}
+      if (method === 'postParams') {
+        parameter.method = 'post'
+      }
+    } else {
+      parameter.data = data || {}
+    }
+    return request(parameter as any)
+  }
+
+  /**
+   * 文件下载
+   * @param {string} url
+   * @param {string} fileName
+   * @param {any} data
+   */
+  async download(url: string, fileName?: string, data?: any) {
+    try {
+      const response: any = await this.api(url, 'get', data)
+      this.triggerDownload(response, fileName)
+    } catch (error) {
+      console.error('File download failed:', error)
+    }
+  }
+
+  /**
+   * POST 文件下载
+   */
+  async downloadPost(url: string, fileName?: string, data?: Data) {
+    try {
+      const response: any = await this.api(url, 'post', data || {})
+      this.triggerDownload(response, fileName)
+    } catch (error) {
+      console.error('File download failed:', error)
+    }
+  }
+
+  private triggerDownload(response: Blob, fileName?: string) {
+    const blob = new Blob([response])
+    const downloadUrl = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    link.download = fileName || 'template.xlsx'
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    window.URL.revokeObjectURL(downloadUrl)
+  }
+}
+
+// 默认实例（保持向后兼容）
+export const httpService = new HttpService()