# Vue3+TS

**Repository Path**: ya_yi/vue3_project

## Basic Information

- **Project Name**: Vue3+TS
- **Description**: 基于Vue3+TS+Less+Ant Design Vue构建的后台管理系统，并使用Ant Design Vue封装了极大减少繁琐Dom操作并保持高度灵活的Table、Form组件等
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-05
- **Last Updated**: 2025-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-add-route-layout

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


### YiTable使用说明

YiTable接收的属性:
url?: '表格数据url',
initWhere?: '初始化请求参数',
dataSource?: '表格静态数据,提供url则根据接口获取数据',
columns: '列配置',
bordered?: 'boolean', 是否有边框
showPagination?: 'boolean',是否开启分页器
rowSelection?: 'boolean',列表项是否可选择
scroll?: '{ x: '', y: ''}',表格是否可滚动 
showSearch?: 'boolean', //column配置了 searchConfig 之后需要传true才显示搜索框


YiTable暴露的方法:
onRowSelectionChange: (selectedRowKeys:(string | number)[], selectedRows:any[])=>{} //选中项发生变化时的回调
onRowSelectionSelect: (record:any, selected:boolean, selectedRows:any[])=>{} //手动选择/取消选择某列的回调
onRowSelectionAll: (selected:boolean, selectedRows:any[], changeRows:any[])=>{} //手动选择/取消选择所有列的回调
onSearChange: (name:string, value:any, options:any[]) =>{} //表头查询参数改变时的回调函数,返回当前dataIndex、查询参数、下拉选项options(非select类型时为空组)
onPaginationChange: (page:number, pageSize:number) =>{} //分页器改变时的回调函数,返回当前页码、每页显示条数
onSearch: (where: object)=>void //查询按钮点击时的回调函数,返回当前查询参数
onReset: (where: object)=>void //重置按钮点击时的回调函数,返回当前查询参数


YiTable暴露的属性/方法,可通过ref进行控制:
where: '表头查询参数绑定的对象',
reload: '表格重装方法',
columns: '表格列配置',
dataSource: '表格静态数据',
customPagination: '自定义分页器',


columns: {
    contentScroll?: boolean | {
        height: 'number' //设置内容区域的高度
    } //'内容超出滚动展示',
    ellipsis?: '内容超出显示省略号',
    searchConfig?: '开启表头查询配置' //参考：表头查询配置共有的属性,
    onClick?: '给当前项添加点击事件', //参考：给当前项添加点击事件1,2
    tags?: 'tag标签展示' //参考：tag标签展示方式1,2
    copy?: '当前项添加点击复制',参考：当前项添加点击复制1,2
    mapImage?: '图片展示 接受boolean或对象类型', //如果为单张图片直接展示,list或者逗号分割的长字符url将以对话框展示,参考: mapImage展示方式1,2
    openUploadSingleImage: { //开启上传单张图片功能
      isReload?: 'boolean', //上传或者删除图片成功后是否自动刷新页面,默认自动刷新,设置false则不刷新通过YiTable暴露的reload方法刷新页面
      title?: 'string', //点击删除图片icon时候的提示信息,默认'确定要删除吗？'
      width?: 'number', //展示的图片的宽度 默认54px
      height?: 'number', //展示的图片的高度 默认32px
      beforeUpload?: '(file: any, index: number) => boolean' //上传前的回调函数,返回boolean值
      remove?: '(row: any, index: number) => Promise.resolve(true)' //点击删除图片时的回调,自动刷新(isReload)情况下需要返回Promise.resolve(true)
      customRequest: '(file: any,row:any, index: number) =>  Promise.resolve(true)'  //开始上传时的回调函数,自动刷新(isReload)情况下需要返回Promise.resolve(true)
    }
    openUploadFile?: '开启文件上传' //用法与actionConfig中openUploadFile配置一样,
    actionConfig: [ //操作列按钮配置
       {
         title: '标题',
         color?: '文字颜色',
         popconfirm?: '气泡确认框',
         hide: '是否隐藏', //(record?: any,index?:number) => boolean 接收返回当前行,当前索引参数,需要返回boolean值 true显示false隐藏
         onClick: '点击事件' //(record?: any,index?:number) => {} 接收到当前行,当前索引参数
         openUploadFile?: { //开启文件上传
            uploadType?:'上传类型', //不传默认为file上传组件，'image'为图片上传组件,
            maxCount?: '最大上传数量', //默认为20
            disabled?: '是否禁用',
            directory?: '是否支持文件夹上传',
            width?: '弹窗大小',
            multiple?: '是否多选',//默认false,
            title?: '弹窗标题',
            dataIndex: '数据索引',
            beforeUpload?: '(file: any) => any', //上传文件之前的钩子函数可用于限制用户上传的图片格式和大小,需要返回boolean值
            remove?: '(file: any, row: any, index:number) => any', // 点击移除文件时的回调
            customRequest?: '(file: any, row: any, index:number) => any', // 自定义上传方法,参数返回文件对象及当前行数据
         }
       },
       {},
       ...
    ],
},


mapImage展示方式1
mapImage: 'boolean' // true开启图片展示,不能自定义弹窗标题与弹窗大小
mapImage展示方式2
mapImage: {
    width?: 'number', //图片宽 默认54
    height?: 'number' //图片高 默认32
    title?: 'string',//设置弹窗标题
    modalWidth?: 'number',//设置弹窗大小 默认486
}


当前项添加点击复制1
copy: 'boolean' // true开启复制
当前项添加点击复制2
copy: {
    tooltip?: '提示信息',
    size?: '文字大小', 
    color?: '文字颜色',
}

// 给当前项添加点击事件1
onClick: (record?: any,name?:string,index?:number) => {}
// 给当前项添加点击事件2
onClick: {
    tooltip?: '提示信息',
    color?: '文字颜色',
    size?: '文字大小', 
    span?: '固定展示文字内容',
    click: (record?: any,name?:string,index?:number) => {},
}

tag标签展示方式1
tags: [
    {
        title: '标题', //匹配展示文字
        color?: '#1890FF', //匹配展示文字颜色
        dataIndex: '0', //匹配的数据索引
    },
    {},
    ...
],
tag标签展示方式2
tags: {
    title?: '标题', //固定展示文字，不提供则根据dataIndex项进行展示
    color?: '#1890FF', //tag颜色颜色
}

<!-- 表头查询配置共有的属性 -->
searchConfig: {
    searchType: '查询类型(input|textarea|number|select|date-picker|range-picker)',
    size?: '大小',
    disabled?: '是否禁用',
    allowClear?:'是否可清除',
    placeholder?: '提示信息',
},

searchConfig: {
    searchType: '查询类型(textarea)',
    autosize?: '自适应内容高度',
    showCount?: '是否展示字数',
    maxlength?: '最大长度',
    rows?: '多行文本框高度',
},

searchConfig: {
    searchType: '查询类型(number)',
    formatter?: (value) => {}, //格式化数字,
    parser?: (value) => {}, //指定从formatter里转换回数字的方式，和formatter搭配使用
    step?: '每次改变步数，可以为小数',
    min?: '最小值',
    max?: '最大值',
},

searchConfig: {
    searchType: '查询类型(select)',
    options?: '下拉内容选项',
    requestConfig?: { //url配置
     url: '请求url',
     method?: '请求方式 默认get',
     extraParams?: '额外参数',
     placement: '浮层预设位置', // bottomLeft | bottomRight | topLeft | topRight
     labelValueKeys?: { // 展示和传参字段配置
       label: '展示字段',
       value: '传参字段'
     },
    },
},

searchConfig: {
    searchType: '查询类型(date-picker)',
    placement?: '浮层预设位置', // bottomLeft | bottomRight | topLeft | topRight
    status?: '设置校验状态', //'error' | 'warning'
    picker?: '设置选择器类型', // 'week|month|quarter|year'
    bordered?: '是否有边框',
    disabledDate?: '不可选择的日期', //(currentDate: dayjs) => boolean
    disabledDateTime?: '不可选择的时间', //():void 参考:https://www.antdv.com/components/date-picker-cn
    format?: '展示的日期格式', // 默认YYYY-MM-DD
    valueFormat?: '可选，绑定值的格式',// 默认YYYY-MM-DD
    showTime?: '增加时间选择功能', //boolean类型, true时valueFormat增加HH:mm:ss
    renderExtraFooter?: '在面板中添加额外的页脚',
},

searchConfig: {
    searchType: '查询类型(range-picker)',
    searchFields: ['开始日期','结束日期'], //不传时默认使用['startDate','endDate']
    placement?: '浮层预设位置', // bottomLeft | bottomRight | topLeft | topRight
    status?: '设置校验状态', //'error' | 'warning'
    picker?: '设置选择器类型', // 'week|month|quarter|year'
    bordered?: '是否有边框',
    disabledDate?: '不可选择的日期', //(currentDate: dayjs) => boolean
    format?: '展示的日期格式', // 默认YYYY-MM-DD
    valueFormat?: '可选，绑定值的格式',// 默认YYYY-MM-DD
    showTime?: '增加时间选择功能', //boolean类型, true时valueFormat增加HH:mm:ss
    renderExtraFooter?: '在面板中添加额外的页脚',
},