# robot-qiankun-common

**Repository Path**: robotchange/robot-qiankun-common

## Basic Information

- **Project Name**: robot-qiankun-common
- **Description**: vue3（script-setup）+typescript公共组件、插件仓库
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-13
- **Last Updated**: 2022-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# robot-qiankun-common

## 介绍
vue3+TS公共组件仓库

## 使用说明
```
在项目根目录下运行如下指令，将公共仓库拉取到项目中
git subtree add --prefix=公共模块存放路径 https://gitee.com/robotchange/robot-qiankun-common.git master --squash
git subtree pull --prefix=公共模块存放路径 https://gitee.com/robotchange/robot-qiankun-common.git master --squash
// --prefix=公共模块存放路径   示例
假如需要将公共模块存放在main项目中的src/common-lib则--prefix取值如下：
--prefix=src/common-lib
// 应用内修改公共代码库进行提交（不建议）
git subtree push --prefix=公共模块存放路径 https://gitee.com/robotchange/robot-qiankun-common.git master --squash
```

## 项目结构
```
robot-qiankun-common                
├── assets
│   ├── fonts
│   ├── images
├── components                           // 组件库
│   ├── breadCrumb                       // 面包削
│   ├── code                             // 代码编辑器
│   ├── configPage                       // 配置列表组件
│   ├── confirm                          // 弹框提示组件
│   ├── detail                           // 详情组件
│   ├── echarts                          // 图表 
│   ├── form                             // 提交表单
│   ├── formSearch                       // 搜索表单
│   ├── headerBar                        // 头部
│   ├── icon                             // 图标                    
│   ├── importExcel                      // excel
│   ├── layout                           // 页面布局
│   ├── loading                          // 全局加载        
│   ├── markDown                         // markdown编辑器
│   ├── message                          // 消息提示
│   ├── navMenu                          // 左侧导航栏
│   ├── pagination                       // 分页
│   ├── table                            // 表格                     
│   ├── textButton                       // 操作栏文字按钮                     
│   ├── toolBar                          // 工具条
├── directive                            
│   ├── permission.ts                    // 权限控制
├── hooks                            
│   ├── onMountedOrActivated.ts 
│   ├── useWindowSizeFn.ts
├── plugins                              // 第三方插件库封装
│   ├── axios                            
│   ├───── errorConfig.ts                // 错误码提示配置
│   ├───── index.ts                     
│   ├───── lruCache.ts                   // lru缓存
│   ├───── type.d.ts                     
│   ├── excel                           
│   ├───── export2Excel.ts               // 导出excel
│   ├───── type.ts                       
│   ├── store                            
│   ├───── index.ts                      
│   ├───── initStore.ts                  
│   ├───── persistedstate.ts             // vuex持久化插件
│   ├───── type.ts                       
│   ├── vueRouter                        // vue-router封装
│   ├───── index.ts                      
│   ├───── type.ts                      
├── styles                               
│   ├── ant-design-theme.less            // ant-design样式  
│   ├── ovveride.css                     // 统一全局样式  
│   ├── transition.less                  // 页面切换动画  
│   ├── variable.less                    // 全局less样式变量  
├── types                                // 类型文件
│   ├── index.ts                         
├── utils                                // 工具类
│   ├── chart.ts                                                                     
│   ├── common.ts                                                                    
│   ├── formValidate.ts                                                             
│   ├── index.ts                                                                     
│   ├── object.ts                                                                    
│   ├── print.ts                                                                     
│   ├── regex.ts                                                                     
│   ├── theme.ts                                                                   
│   ├── throttle.ts                                                                  
│   ├── typeof.ts                                                                    
│   ├── vueInstance.ts                                                              
├── README.md                                                 
```

## 通用组件使用说明
###  列表相关
![avatar](./source/列表.png)

![avatar](./source/table.png)

![avatar](./source/操作栏详情.png)

使用方式（以菜单管理页面为例子），包含如下组件：
```
v-content-layout
v-search-item
v-table
v-text-button
v-pagination
```

```
<template>
  <div>
    <v-content-layout v-model:searchForm="searchForm" @search="search" @reset="getList">
      <!-- 搜索条件 --> 
      <template #searchFold>
        <v-search-item label="名称">
          <a-input v-model:value="searchForm.name" placeholder="请输入菜单名称" />
        </v-search-item>
        <v-search-item label="路径">
          <a-input v-model:value="searchForm.path" placeholder="请输入应用路径" />
        </v-search-item>
      </template>
      <!-- 操作按钮 -->  
      <template #handleBtn>
        <a-button type="primary" @click="addApp">添加一级菜单</a-button>
      </template>
      <!-- 表格 -->
      <template v-slot:table="{ height }">
        <v-table :height="height" :pagination="false" :listData="listData" :columns="tableColumns">
          <template v-slot:operation="{ record }">
            <v-text-button @click="addSubMenu(record)">添加子菜单</v-text-button>
            <v-text-button v-if="!record.redirect" @click="addPageBtn(record)">添加关联按钮</v-text-button>
            <v-text-button @click="editMenu(record)">编辑</v-text-button>
            <v-text-button @click="deleteMenu(record)">删除</v-text-button>
          </template>
        </v-table>
      </template>
      <!-- 分页 -->  
      <template #pagination>
        <v-pagination
          :total="total"
          v-model:current="searchForm.currentNum"
          v-model:pageSize="searchForm.pageSize"
          @change="getList"
          @showSizeChange="getList"
        ></v-pagination>
      </template>
    </v-content-layout>

    <!--  弹框组件  -->
    <add
      v-if="addVisible"
      v-model:visible="addVisible"
      :init-form="editForm"
      :model="model"
      @close="getList"
    ></add>

    <!--  关联按钮组件  -->
    <relate-btn
      v-if="relateVisible"
      v-model:visible="relateVisible"
      :init-form="editForm"
      :model="model"
    ></relate-btn>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'system-menuTree'
  }
</script>
<script lang="ts" setup>
import { tableColumns } from './config'
import { ref, reactive, onMounted } from 'vue'
import add from './add.vue'
import relateBtn from './relateBtn.vue'
import useCurrentInstance from 'lib-utils/vueInstance'

const { proxy } = useCurrentInstance()

let total = ref(0)
let addVisible = ref(false)
let relateVisible = ref(false)
let editForm = ref(null)
let model = ref('add')
let listData = ref([])

const searchForm = reactive({
  currentNum: 1,
  pageSize: 10,
  name: '',
  path: ''
})

onMounted(() => {
  getList()
})

const getList = () => {
  proxy.$http.get(proxy.$api.menu.listTree, searchForm).then(res => {
    listData.value = res
    total.value = res.length
  }).catch(() => {
  })
}

const search = () => {
  getList()
}

const addApp = () => {
  model.value = 'add'
  editForm.value = null
  addVisible.value = true
}

const addSubMenu = (record:any) => {
  model.value = 'add'
  editForm.value = record
  addVisible.value = true
}

const addPageBtn = (record:any) => {
  editForm.value = record
  relateVisible.value = true
}

const editMenu = (record:any) => {
  model.value = 'edit'
  editForm.value = record
  addVisible.value = true
}

let ids:any = []
const deleteMenu = (record:any) => {
  ids = []
  proxy.$vConfirm({
    content: '是否确认删除!'
  }).then(() => {
    proxy.$http.post(proxy.$api.menu.delete, {
      ids: getMenuIds([record])
    }).then(() => {
      getList()
    }).catch(() => { })
  }).catch(() => { })
}

const getMenuIds = (menus:any) => {
  for (let i = 0; i < menus.length; i++) {
    ids.push(menus[i].id)
    if (menus[i].children && menus[i].children.length) {
      getMenuIds(menus[i].children)
    }
  }
  return ids
}
</script>

<style lang="less" scoped>
</style>
```
#### v-content-layout组件
slot

slot名称 | 介绍 
---- | ----
searchFold | 显示的搜索内容 
searchUnfold | 点击展开才显示的搜索内容 
handleBtn | 操作按钮 
table | 表格 
pagination | 分页 

方法

名称 | 介绍 
---- | ----
search | 触发搜索的方法 
reset | 重置搜索内容 

属性

名称 | 介绍 
---- | ----
searchForm | 搜索form表单 
tableHeight | 表格内容高度，用于设置v-table的实际高度 

#### v-search-item组件
属性

名称 | 介绍 
---- | ----
label | 搜索框标签名称 

#### v-table组件
属性名称 | 介绍  | 类型
---- | ---- | ----
height | 表格高度 | string
listData | 列表数据 | Array
selectColumns | 表格属性配置 | Array（详情参见selectColumns）

selectColumns属性说明（基础属性参照ant-design-vue的a-table）
```
{
    title: '是否可用',
    dataIndex: 'enabled',
    customRender: (row) => { // 自定义渲染内容
      if (row.record.enabled) {
        return '是'
      } else {
        return '否'
      }
    }
  },
  {
    title: '操作栏',
    key: 'operation',
    align: 'center',
    fixed: 'right',
    slots: { // 自定义slot名称
      customRender: 'operation'
    },
    width: '160px'
  }
```
#### v-text-button组件
slot

slot名称 | 介绍 
---- | ----
default | button名称 
#### v-pagenation组件
```
属性同a-pagenation
```

### 弹框及详情
![avatar](./source/弹框详情.png)
包含组件
```
v-dialog-layout
v-config-detail
```
```
<template>
  <v-dialog-layout v-model:visible="visible" width="800px" @cancel="cancel">
    <v-config-detail
      label-width="70px"
      model="dialog"
      :detail-config="detailConfig"
      :detail-data="detailData"
    ></v-config-detail>
    <template #footer>
      <a-button @click="cancel">取消</a-button>
    </template>
  </v-dialog-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { detailConfig } from './config'

const props = withDefaults(defineProps<{ visible: boolean }>(), {
  visible: false
})
const emit = defineEmits(['update:visible'])

const detailData = ref({})
detailData.value = {
  test: '90909',
  imgList: ['http://doc.zwjrobot.com/doc/assets/img/page-1.8b880e10.png',
    'http://doc.zwjrobot.com/doc/assets/img/page-1.8b880e10.png',
    'http://doc.zwjrobot.com/doc/assets/img/page-1.8b880e10.png'],
  img: 'http://doc.zwjrobot.com/doc/assets/img/page-1.8b880e10.png'
}
const cancel = () => {
  emit('update:visible', false)
}
</script>

// detailConfig内容如下
export const detailConfig = [
  [{ label: '测试', key: 'test' }, { label: '测试', key: 'test' }, {
    label: '测试', key: 'test', func: () => {
      return '00000'
    }
  }
  ],
  [{ label: '测试', key: 'test' }, { label: '测试', key: 'test' }],
  [{ label: '测试', key: 'test' }, { label: '测试', key: 'test' }, { label: '测试', key: 'test' }],
  [
    { label: '图片', key: 'img', detailType: 'image' },
    { label: '图片', key: 'img', detailType: 'image' }
  ],
  [
    { label: '图片集合', key: 'imgList', detailType: 'imageList' }
  ]
]
```
#### v-dialog-layout组件
slot

slot名称 | 介绍 
---- | ----
default | 弹框内容
footer | 弹框底部内容

属性名称 | 介绍  | 类型
---- | ---- | ----
visible | 弹框是否显示 | boolean
width | 弹框宽度 | string

事件名称 | 介绍 
---- | ---- 
confirm | 点击弹框确认按钮事件
cancel | 点击弹框取消按钮事件
#### v-config-detail组件
常用属性如下所示：
```
export type detailType = 'text' | 'image' | 'imageList' | 'slot' | 'file'
export interface detailConfigType {
    detailType: detailType,
    key: string,                             // 对应detailData中的字段名称
    slotName?: string,                       // 插槽名称（通过插槽自定义显示内容）
    label?: string,                          // 标签名称
    func: (key: string, data: any) => string // 自定义显示内容
}

export interface configDetailType {
    detailConfig: Array<detailConfigType[]>,    // 详情配置
    detailData: any                             // 详情数据
    labelWidth: string                          // 标签宽度
    labelStyle?: Partial<CSSStyleDeclaration>,
    model: string
}

export interface detailItemType {
    label?: string,                 // 标签名称
    text?: string,                  // 文本内容
    labelWidth?: string,            // 标签宽度
    span?: number,                  // 标签宽度所占百分比
    imgUrl?: string,                // 图片url
    imgUrlList?: string[],          // 图片列表urls
    detailType: detailType,         // 类型
    labelStyle?: Partial<CSSStyleDeclaration>,   // 自定义样式
}
```

### 全屏组件
![avatar](./source/全屏详情.png)

注意：其余组件请参照组件内部传参

## 插件使用
### axios
#### 使用说明
```
1 初始化HttpRequest类
const httpRequest = new HttpRequest({初始化参数HttpConfig})
1.1 初始化参数介绍
HttpConfig {
    baseURL?: string,                         // 请求的基础url
    timeout?: number,                         // 超时时间
    proxyUrl?: string,                        // 开发或者测试环境的代理url地址
    token?: tokenFunction | string | null,    // token鉴权参数获取
    successCode?: Array<string>,              // 请求成功的状态码，例如['SYS200']
    noAuthCode?: Array<string>,               // 请求无权限状态码，例如['SYS401', 'SYS402'],
    notAuthUrls?: Array<string>,              // 白名单url，避开前端token鉴权，例如['url1']
    callBackNoAuth?: voidFunction | null,     // 接口请求无权限的回调自定义处理
    callBackError?: voidFunction | null,      // 请求错误的回调自定义处理
    startLoading: voidFunction | null,        // 开启请求加载
    closeLoading?: voidFunction | null        // 关闭请求加载
}
2 调用httpRequest.baseRequest(请求方式,请求地址,请求参数)
3 前端自定义错误显示的配置（plugins/axios/errorConfig.ts）
在实际的业务场景中，存在需要前端自定义接口错误是否弹框显示及显示内容，为了实现axios统一处理，
可以在errorConfig进行配置，方式如下
201时提示自定义的message内容，且会执行action中的动作，例如页面跳转等等
{
    '201': {
        message: '自定义错误提示',
        action: () => {
            // 执行的操作
        }
    }
}
```
#### 使用示例
```
import HttpRequest from 'lib-plugins/axios';
import store from '../store'
import router from '../router'
const httpRequest = new HttpRequest({
    proxyUrl: process.env.VUE_APP_PROXY_URL,
    baseURL: process.env.VUE_APP_BASE_URL,
    token: () => {
        return store.state.common.token ? store.state.common.token : ''
    },
    notAuthUrls: [],
    callBackNoAuth: () => {
        router.push('/login')
    },
    startLoading: () => {
        store.commit('setCommonStore', {
            showPageLoading: true
        })
    },
    closeLoading: () => {
        store.commit('setCommonStore', {
            showPageLoading: false
        })
    },
    callBackError: null
})

export const get = (url: string, params?: any) => {
    return httpRequest.baseRequest('GET', url, params)
}

export const post = (url: string, params?: any) => {
    return httpRequest.baseRequest('POST', url, params)
}

export const postForm = (url: string, params?: any) => {
    return httpRequest.baseRequest('POST', url, params, true)
}

export default httpRequest
```
### vueRouter
#### 使用说明
```
1 初始化vueRouter
const router = new baseVueRouter(routerConfig).initRouter()
routerConfig {
    token?: tokenFunction | null,                // token鉴权参数
    constantRouter?: Array<RouteRecordRaw>,      // 基础路由（无需动态注册）
    whiteListRouter?: Array<RouteRecordRaw>,     // 白名单路由（无需登录即可访问）
    noAuthPath?: string,                         // 无权限路由守卫的跳转地址
    errorPath?: string,                          // 路由匹配错误的跳转地址
    loginRedirectRouter?: string,                // 无权限的登录地址
    dynamicRouters?: Array<RouteRecordRaw>,      // 动态路由
    callBackBreadCrumb?: any,                    // 路由守卫中自定义面包屑处理
    callBackLogin?: voidFunction | null,         // 进入登录守卫时的自定义处理方法
    callBackNoAuth?: voidFunction | null,        // 无权限进入页面的自定义处理方法（noAuthPath为空时生效）
    callBackError?: voidFunction | null,         // 路由匹配错误的自定义处理方法
    callBackBeforeEach: anyFunction | null,      // 同vue-router的beforeEach钩子
    callBackAfterEach: voidFunction | null       // 同vue-router的afterEach钩子
}
export default router
2 在main.ts中注入即可

```

#### 使用示例
```
const router = new baseVueRouter({
  token: () => {
    return store.state.common.token
  },
  constantRouter: [],
  whiteListRouter: routes,
  noAuthPath: '',
  errorPath: '',
  loginRedirectRouter: '',
  dynamicRouters: undefined,
  callBackLogin: null,
  callBackNoAuth: (to, from, next) => {
    // 如果没有权限，跳转登录页面
    next('/login')
  },
  callBackError: null,
  callBackBeforeEach: (to, from, next) => {
    console.log('主应用注册路由')
    return registerRoutes()
  },
  callBackBreadCrumb: (to, from, next) => {
    const breadCrumbs = [{
      name: to.meta.appName,
      path: ''
    }]
    const matched = to.matched
    for (let i = 0; i < matched.length; i++) {
      breadCrumbs.push({
        name: matched[i].meta.title,
        path: matched[i].path
      })
    }
    store.commit('setCommonStore', {
      breadCrumbs: breadCrumbs
    })
  },
  callBackAfterEach: null
}).initRouter()

export default router
```
### store
```
1 初始化方式
const store = initVuex<mainStates>({
  ...initState
})
```