# mu-web

**Repository Path**: yueqiqaq/mu-web

## Basic Information

- **Project Name**: mu-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-14
- **Last Updated**: 2025-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 组件介绍

### 组件名称：`MuTable`

#### 组件功能概述
`MuTable` 是一个自定义的业务表格组件，用于展示数据表格，提供条件筛选 UI 渲染、表格展示、分页功能，并支持额外参数的传入。

#### Props
| 属性名 | 类型 | 默认值 | 描述                                                           |
| ---- | ---- | ---- |--------------------------------------------------------------|
| `queryFilter` | `Array<query>` | `[]` | 条件筛选配置数组，每个元素包含筛选条件的相关信息，如 `name`、`label`、`type` 等，用于渲染筛选 UI。 |
|`queryConfig` | `QueryConfig` | `{type: 'drawer'}` | 条件筛选配置                                                       |
| `table` | `VxeTableProps` | 详细默认值见 `prop.ts` 文件 | 表格的配置项，包含表格的各种属性，如按钮配置、URL、自动加载、操作列显示等。                      |
| `pagination` | `Pagination` | `{ layout: 'total, sizes, prev, pager, next, jumper', pageSizes: [10, 20, 50, 100, 500], size: 'small' }` | 分页配置项，用于配置分页的布局、每页显示数量选项、分页器大小等。                             |
| `exParams` | `any` | `{}` | 额外的参数，会在加载表格数据时合并到请求参数中。                                     |

#### 类型定义

##### `query`
```typescript
interface query {
  name: string;
  label: string;
  placeholder?: string;
  props?: any;
  type: 'ElCascader' | 'ElCheckbox' | 'ElDatePicker' | 'ElInput' | 'ElInputNumber' | 'ElRadio' | 'ElSelect' | 'ElSwitch';
  options?: Array<Options>;
}
```

##### `Options`
```typescript
interface Options {
  label: string;
  value: string;
  props?: any;
}
```

##### `BtnAuth`
```typescript
interface BtnAuth {
  add?: string;
  edit?: string;
  detail?: string;
  delete?: string;
}
```

##### `operatorExBtn`
```typescript
interface operatorExBtn {
  name: string;
  label: string;
  auth?: string;
  icon?: string;
}
```

##### `VxeTableProps`
```typescript
interface VxeTableProps extends VxeGridProps {
  // 默认按钮
  defaultBtn?: Array<'add' | 'edit' | 'detail' | 'delete'> | BtnAuth;
  url?: string;
  // 自动加载
  autoLoad?: boolean;
  // 展示操作列 默认true
  operatorColumn?: boolean;
  operatorExBtn?: Array<operatorExBtn>;
}
```

##### `Pagination`
```typescript
interface Pagination {
  layout?: string;
  pageSizes?: Array<number>;
  size?: string;
}
```

### `QueryConfig`
```typescript
interface QueryConfig {
  // 查询栏展示类型，默认抽屉
  type?: 'default' | 'drawer'
}
```

#### Emits
| 事件名 | 参数 | 描述 |
| ---- | ---- | ---- |
| `add` | - | 点击新增按钮时触发 |
| `edit` | `row`（表格行数据） | 点击编辑按钮时触发，携带当前行数据 |
| `detail` | `row`（表格行数据） | 点击详情按钮时触发，携带当前行数据 |
| `delete` | `row`（表格行数据） | 点击删除按钮时触发，携带当前行数据 |
| `event` | `{ command, row }` | operatorExBtn额外操作列按钮事件  |

#### Exposes
| 方法名                  | 参数 | 返回值       | 描述              |
|----------------------| ---- |-----------|-----------------|
| `getRadioEvent`      | - | 单选框选中的记录  | 获取表格中单选框选中的记录   |
| `clearRadioRowEvent` | - | -         | 清空表格中单选框的选中状态   |
| `getSelectEvent`     | - | 复选框选中的记录数组 | 获取表格中复选框选中的记录数组 |
| `clearSelectEvent`   | - | -         | 清空表格中复选框的选中状态   |
| `load`               | - | -         | 加载表格数据          |

#### Slots
| 插槽名                | 描述                   |
|--------------------|----------------------|
| `exToolbarButtons` | 表格左上方插槽（位置于默认的新增按钮旁） |
| `tableUnit`             | 表格左下方插槽（默认展示单位：元）    |

#### 示例用法
```vue
<template>
  <MuTable
    v-bind="tableProps"
    @add="handleAdd"
    @edit="handleEdit"
    @detail="handleDetail"
    @delete="handleDelete"
  />
</template>

<script setup lang="ts">
import MuTable from '@/components/MuTable/MuTable.vue'
import type { IProps } from '@/components/MuTable/prop.ts'
import { useTemplateRef, onMounted } from 'vue'

const tableRef = useTemplateRef<InstanceType<typeof MuTable>>('tableRef')
onMounted(() => {
  tableRef.value?.load()
})
const tableProps = reactive<IProps>({
  queryFilter: [
    { name: 'name', label: '名称', type: 'ElInput' },
    { name: 'title', label: '标题', type: 'ElInput' },
    { name: 'deptName', label: '部门', type: 'ElInput' },
    { name: 'content', label: '内容', type: 'ElInput' },
    { name: 'pickDate', label: '选择日期', type: 'ElDatePicker', props: { type: 'daterange' } },
    { name: 'cascader', label: '级联选择', type: 'ElCascader', props: { options: [{ value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake' }] }] }] } },
    { name: 'switch', label: '开关', type: 'ElSwitch' },
    { name: 'radio', label: '单选', type: 'ElRadio', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
    { name: 'checkbox', label: '多选', type: 'ElCheckbox', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
    { name: 'selectObj', label: '选择', type: 'ElSelect', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
  ],
  table: {
    id: 'testTable',
    size: 'small',
    url: '/api/test-list',
    columns: [
      { type:'seq', width: 70 },
      { field: 'name', title: '名称', width: 400  },
      { field: 'code', title: '编码', width: 200 },
      { field: 'deptName', title: '部门名称', width: 200 },
      { field: 'ts', title: '测试', width: 200, slots: { default: 'ts' } },
      { field: 'enabled', title: '是否启用', width: 155 },
    ],
    operatorExBtn: [
      { name: 'apply', label: '申请', icon: 'clarity:contract-line', auth: 'myApply' },
      { name: 'submit', label: '提交', icon: 'mdi:hand-coin-outline', auth: 'mySubmit' },
    ]
  }
})

const handleAdd = () => {
  // 处理新增事件
}

const handleEdit = (row) => {
  // 处理编辑事件
}

const handleDetail = (row) => {
  // 处理详情事件
}

const handleDelete = (row) => {
  // 处理删除事件
}
</script>
```

以上文档详细介绍了 `MuTable` 组件的使用方法和相关配置，包括 `props`、`emits` 和 `exposes` 等内容。


### 组件名称： Modal.vue

#### 简介
本组件是对 Element Plus 的弹窗组件 `el-dialog` 进行的二次封装，提供了更便捷的使用方式和一些额外的功能，如全屏切换等。

#### Props
| 属性名 | 类型 | 默认值 | 描述 |
| ---- | ---- | ---- | ---- |
| bodyMaxHeight | `number` | `60` | 弹窗体最大高度，单位为 `vh` |

#### Slots
- `default`：弹窗主体内容插槽。
- `footer`：弹窗底部内容插槽。

#### 方法
- `open()`：打开弹窗。
- `close()`：关闭弹窗。

#### 事件
- `register`：当组件挂载时，会触发 `register` 事件，传递当前组件实例。

#### 参数
- `callback`：可选，类型为 `Function`。当调用 `openModal` 时，会执行该回调函数，并传递 `openModal` 的参数。

#### 返回值
- `openModal(data)`：打开弹窗的方法，`data` 为传递给回调函数的数据。
- `closeModal()`：关闭弹窗的方法。
- `registerModal(instance)`：注册弹窗实例的方法，通常用于内部使用，在 `Modal.vue` 组件中会自动调用。

#### 注意事项
- 在使用 `Dialog.vue` 和 `Dialog2.vue` 等组件时，需要通过 `ref` 来获取组件实例，并调用 `openModal` 方法来打开弹窗。
- `useModal` 钩子函数的 `callback` 参数可以用于在打开弹窗时执行一些自定义逻辑，如显示消息提示等。

#### 组件使用示例
```vue
<template>
  <modal title="测试弹窗" @register="registerModal">
    <div v-for="i in 30" :key="i">{{ i }}</div>
    <template #footer>
      <el-button class="mr-8px" @click="closeModal">取消</el-button>
      <el-dropdown split-button type="primary">
        保存
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>保存并提交</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </modal>
</template>

<script setup lang="ts">
import { modal, useModal } from '@/components/Modal/index.ts'
import { ElMessage } from 'element-plus'

const { openModal, registerModal, closeModal } = useModal((data: any) => {
  ElMessage({
    type: 'info',
    message: data
  })
})
defineExpose({ openModal })
</script>
```

```vue
<script setup lang="ts">
import { ref } from 'vue'
import Dialog from './Dialog.vue'
import Dialog2 from './Dialog2.vue'

const dialogRef = ref()
const dialog2Ref = ref()

const openModal = () => {
  dialogRef.value.openModal('1111')
}

const openModal2 = () => {
  dialog2Ref.value.openModal('aaaa')
}
</script>

<template>
  <div>
    <el-button @click="openModal">打开弹窗</el-button>
    <el-button @click="openModal2">打开弹窗</el-button>
    <Dialog ref="dialogRef"/>
    <Dialog2 ref="dialog2Ref"/>
  </div>
</template>
```