1. 快速开始

# 安装 需要依赖 antdv 与其图标库
npm i zqmc-antdv
# main.ts 引入样式
import 'zqmc-antdv/dist/zqmc-antdv.css'

2. 组件

2.1 zqmc-tag 组件

示例代码

<template>
  <zqmc-tag :value="tagValue" :options="options" />
</template>

<script setup lang="ts">
import { ZqmcTag } from 'zqmc-antdv'

const tagValue = '1'
const options = [
  { value: '0', label: '正常', color: 'success' },
  { value: '1', label: '停用', color: 'warning' },
]
</script>

参数

| 参数 | 说明 | 类型 | 默认值 | | ------- | ---------- | -------- | ------------------------------------------------------------------------------------------------- | | value | 值 | string | '1' | | options | 取值的数组 | 对象数组 | [{ value: '0', label: '正常', color: 'success' },{ value: '1', label: '停用', color: 'warning' }] |

2.2 zqmc-edit-tree 可编辑树组件

示例代码

<template>
  <zqmc-edit-tree
    :treeData="treeData"
    :field-names="{ key: 'id', title: 'label', children: 'children' }"
    @onRowClick="onRowClick"
  />
</template>
<script setup lang="ts">
import { ZqmcEditTree } from 'zqmc-antdv'

const treeData = [
  { id: 1, parentId: 0, label: 'test' },
  { id: 2, parentId: 0, label: 'test2' },
  { id: 3, parentId: 0, label: 'test3' },
  { id: 4, parentId: 1, label: 'test11' },
]

const onRowClick = () => {}
</script>

参数

| 参数 | 说明 | 类型 | 默认值 | | ------------------ | ----------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | tree-data | 源数据 | 数组对象 | [] | | tree-key | 树的 ID 及 上级ID | 对象 | { id: string, parentId: string } | | field-names | 字段替换 | 对象 | {key: 'value',title: 'label',children: 'children'} | | searchValue | 过滤字段,外部需设置输入框过滤 | string | '' | | btns | 鼠标悬浮的按钮组 | 数组对象 | [{ color: '', title: '新增', icon: 'file-add-outlined' },{ color: '', title: '修改', icon: 'form-outlined' },{ color: 'danger', title: '删除', icon: 'delete-outlined' },] | | v-model:modelValue | 选中的数据 | 对象 | 无 |

事件

| 事件 | 说明 | 参数 | | ------------- | ---------------------------------------------- | -------- | | @on-row-click | 行点击以及操作按钮事件,title参数为空则是行点击 | function |

暴露的属性

| 属性 | 说明 | | ------------ | -------------------------- | | expandHandle | 暴露的属性，全部展开与折叠 | | checkedRow | 选中的行 |

2.3 zqmc-btns组件

示例代码

<template>
  <zqmc-btns :btns="btns" @onClick="onClick" />
</template>
<script setup lang="ts">
import { ZqmcBtns } from 'zqmc-antdv'

const btns = [
  {
    label: '新增', // 文字
    type: 'primary', // 按钮类型
    // ghost: false, //幽灵按钮，背景透明
    icon: 'plus-outlined', //
  },
  {
    label: '删除', // 文字
    type: 'default', // 按钮类型
    // ghost: false, //幽灵按钮，背景透明
    icon: 'delete-outlined', //
    disabled: true,
  },
]

const onClick = (title) => {}
</script>

参数

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | | btns | 按钮配置项 | 数组对象 | [{label: '新增',type: 'primary',icon: 'plus-outlined', },{label: '删除',type: 'default',icon: 'delete-outlined', disabled: true}] |

类型定义

export interface IZqmcBtn {
  label: string | string[] // 文字 数组状态下是两个icon，切换状态不同icon,仅支持一个，且在一级。
  type?: string // 按钮类型
  ghost?: boolean //幽灵按钮，背景透明
  icon?: string | string[] // 按钮图标
  disabled?: boolean
  isGroup?: boolean // 是否是分组按钮
  children?: IZqmcBtn[] // 分组情况下子按钮
}
export interface IZqmcBtnsProps {
  btns?: IZqmcBtn[]
}

插槽

<slot #other></slot>

2.4 zqmc-search组件

示例代码

<template>
  <zqmc-search :form-config="formConfig" @onFinish="onFinish" />
</template>
<script setup lang="ts">
import { ZqmcSearch } from 'zqmc-antdv'

const formConfig = computed(() => {
  return [
    { label: '用户名', name: 'userName', type: 'input' },
    {
      label: '状态',
      name: 'status',
      type: 'select',
      option: dictStore.dict.sys_data_status,
    },
  ]
})

const onFinish = async (form: any, callback: () => void) => {
  try {
    console.log(form)
    callback()
  } catch {
    callback()
  }
}
</script>

参数

| 参数 | 说明 | 类型 | 默认值 | | ----------- | ------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------- | | form-config | 查询表单配置 | 数组对象 | [{label:'用户名',name:'userName',type:'input',},{label:'状态',name:'status',type:'select',option:dictStore.dict.sys_data_status}] |

事件

| 事件 | 说明 | 参数 | | --------- | ------------------------- | ------------------------------------------------- | | @onFinish | 查询事件(回调关闭loading) | (form: any, callback: () => void) => {callback()} |

暴露属性

| 属性 | 说明 | | ---- | -------------------- | | form | 暴露的属性，表单数据 |

2.5 zqmc-table组件

示例代码

<template>
    <zqmc-table :table-data="tableData" :table-columns="tableColumns"
                        @table-row-action="tableRowAction"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ZqmcTable } from '../../lib';


// 表格属性
const tableData = ref<any[]>([{
    id: 1,
    userName: 'test',
    nickName: '男',
  }])

/**
 * 表格列配置
 */
const tableColumns = [
    {
        title: '用户编号',
        dataIndex: 'id',
        key: 'id',
        sorter: (a: any, b: any) => b?.id - a?.id,
        defaultSortOrder: ['descend'],
    },
    { title: '用户名', dataIndex: 'userName', key: 'userName' },
    { title: '昵称', dataIndex: 'nickName', key: 'nickName' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    { title: '电话', dataIndex: 'phone', key: 'phone' },
    {
        title: '用户状态', dataIndex: 'status', key: 'status', type: 'tag', options: [
            { value: '0', label: '启用', color: 'success' },
            { value: '1', label: '停用', color: 'error' }
        ]
    },
    {
        title: '备注', dataIndex: 'remark', key: 'remark'
    },
    {
        title: '操作', dataIndex: 'action', key: 'action', option: [
            {
                label: '修改', // 文字
                type: 'default',// 按钮类型
                // ghost: false, //幽灵按钮，背景透明
                icon: 'edit-outlined', //
            },
            {
                label: '分配角色', // 文字
                type: 'default',// 按钮类型
                // ghost: false, //幽灵按钮，背景透明
                icon: 'database-outlined', //
            },
            {
                label: '重置密码', // 文字
                type: 'default',// 按钮类型
                // ghost: false, //幽灵按钮，背景透明
                icon: 'retweet-outlined', //
            },
        ]
    },
]


// table 行点击事件
const tableRowAction = async (label: string, row: any) => {
    console.log(label,row);
}

</script>

<style lang="scss" scoped>

</style>

参数

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ---------- | --------------------------------------------- | ------ | | table-data | 表格数据 | 数组对象 | [] | | table-columns | 表格配置项 | {type,options,options,...antdv的column配置项} | |

• options 是tag的配置,option 是按钮配置

事件

| 事件 | 说明 | 参数 | | ----------------- | ---------------------- | -------------------- | | @table-row-action | 行内操作区按钮点击事件 | (title:string) => {} |

暴露属性

| 属性 | 说明 | | --------------- | ------ | | selectedRowKeys | 选中行 |

2.5 zqmc-pagination组件

示例代码

<template>
    <zqmc-pagination ref="zqmcPaginationRef" :total="total" @on-query-list="onQueryList"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ZqmcPagination } from '../../lib';

const zqmcPaginationRef = ref<any>(null)

const total = ref(1000)

const onQueryList = () => {
    console.log(zqmcPaginationRef.value.pageInfo)
}
</script>

<style scoped>

</style>

参数

| 参数 | 说明 | 类型 | 默认值 | | ----- | ------ | ------ | ------ | | total | 总行数 | number | 0 |

事件

| 事件 | 说明 | 参数 | | -------------- | ------------ | -------- | | @on-query-list | 切换分页事件 | () => {} |

暴露属性

| 属性 | 说明 | | -------- | -------- | | pageInfo | 分页信息 |

• 备注: 国际化使用默认，项目中antdv需配置

2.5 zqmc-editor组件

示例代码

<template>
    <zqmc-editor v-model="content"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ZqmcEditor } from '../../lib';

const content = ref<string>('hello')
</script>

参数

| 参数 | 说明 | 类型 | 默认值 | | ------- | ---- | ------ | ------ | | v-model | 内容 | string | 0 |

2.5 zqmc-dialog组件

示例代码

<template>
    <a-button @click="clickBtn">打开dialog</a-button>
    <zqmc-dialog ref="zqmcDialogRef" :form-config="dialogFormConfig" :rules="dialogFormRules"
        @handle-dialog-ok="handleDialogOk"/>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { ZqmcDialog } from '../../lib';
import type { RuleObject } from 'ant-design-vue/es/form';

const zqmcDialogRef = ref<any>(null)

const dialogFormConfig = computed(() => {
    return [
        { label: 'id', name: 'id', type: 'input', hidden: true },
        { label: '用户账号', name: 'userName', type: 'input', },
        {
            label: '部门', name: 'deptId', type: 'tree', option: [],
            replaceFields: { children: 'children', label: 'deptName', key: 'id', value: 'id' }
        },
        { label: '用户昵称', name: 'nickName', type: 'input', },
        { label: '密码', name: 'password', type: 'input', },
        { label: '手机号码', name: 'phone', type: 'input', },
        { label: '用户邮箱', name: 'email', type: 'input', },
        {
            label: '状态', name: 'status', type: 'select', option: [
                { value: '0', label: '启用' },
                { value: '1', label: '停用' }
            ]
        },
        { label: '用户性别', name: 'sex', type: 'select', option: [{ value: '0', label: '男' }, { value: '1', label: '女' }] },
        { label: '显示顺序', name: 'order', type: 'number', },
        { label: '备注', name: 'remark', type: 'area', alone: true },
    ]
})

const dialogFormRules: Record<string, RuleObject[]>  = {
    userName: [
        { type: 'string',required: true, message: '用户名不能为空', trigger: 'blur' },
        { type: 'string',min: 3, max: 18, message: '用户名长度为3-18', trigger: 'blur' },
    ], 
}

const handleDialogOk =  async (title: string, form: any, callBack: (status: boolean) => void) => {
    console.log(title,form)

    // 关闭dialog
    callBack(true)

}

const clickBtn = () => {
    zqmcDialogRef.value.open('test',{})
}
</script>

<style scoped>

</style>

参数

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | ------------ | -------- | ----------------------------- | | form-config | 表单内容配置 | 数组对象 | 0 | | rules | 表单校验规则 | | | | @handle-dialog-ok | 表单提交事件 | | (title,form,callback) => void |