auto-vue-manual 0.0.21 → 0.0.25

package/README.md

@@ -1,8 +1,56 @@
 # 自用组件库
 
-## ProTable / ProTableSummary 属性说明
+## 安装
 
-### ColumnProps 列配置说明
+```bash
+npm install auto-vue-manual
+```
+
+## 使用
+
+```js
+import AutoVueManual from "auto-vue-manual";
+import type { InstallOptions } from 'auto-vue-manual';
+import 'auto-vue-manual/dist/index.css';
+
+import request from "@/global/request";
+import { Translate } from "@/languages/index";
+
+const options: InstallOptions = {
+  request,
+  translate: Translate
+}
+
+const app = createApp(App);
+app.use(AutoVueManual, options);
+app.mount('#app');
+```
+
+## 目录
+
+#### Table
+[ProTable/ProTableSummary](#protable--protablesummary)  
+[ProTableList](#protablelist)  
+
+#### Modal 
+[BasicDialog](#basicdialog)  
+[BasicDrawer](#basicdrawer)  
+[FormDialog](#formdialog)  
+[TableDialog](#tabledialog)  
+
+#### Upload
+[UploadAvatar](#uploadavatar)  
+[UploadImage](#uploadimage)  
+[UploadImages](#uploadimages) 
+
+
+# Document
+
+## Table
+
+### ProTable / ProTableSummary
+
+#### ColumnProps
 
 | 属性名 | 类型 | 说明 | 默认值 |
 | ------ | ---- | ---- | ------ |
@@ -15,12 +63,13 @@
 | **search** | `{ defaultValue }`  | 搜索项配置, defaultValue可以设置默认的init-param  | - |
 | **headerRender** | `(scope: HeaderRenderScope<T>) => VNode`  | 自定义表头内容渲染（tsx语法） | - |
 | **render** | `(scope: RenderScope<T>) => VNode string`  | 自定义单元格内容渲染（tsx语法），Basic和list的scope略有不同，请注意 | - |
+| **props** | `{ api?: string, activeValue?: any, inactiveValue?: any, refresh?: boolean }`  | type = switch 时，props 配置 (TODO 更新其他type) | - |
 
-### Props 参数说明
+#### Props 参数说明
 
 | 属性名 | 类型 | 说明 | 默认值 |
 | ------ | ---- | ---- | ------ |
-| **columns** | `ColumnProps[]`  | 必填，列配置项  | - |
+| **columns** | [`ColumnProps[]`](#columnprops)  | 必填，列配置项  | - |
 | **data** | `any[]`  | 静态 table data 数据，若存在则不会使用 request url 返回的 data | - |
 | **url** | `string`  | 实际请求接口 | - |
 | **auto-search** | `boolean`  | 是否自动执行请求 api | true |
@@ -39,14 +88,15 @@
 | **sum-text** | `string`  | 汇总文本，仅 ProTableSummary 有效 | Total |
 | **sum-text-format** | `string`  | 汇总文本格式，仅 ProTableSummary 有效 | * |
 
-### Event 事件说明
+#### Event 事件说明
 
 | 事件名 | 说明 | 参数 |
 | ------ | ---- | ---- |
-| **@row-click** | 行点击事件，已排除 status / operation 列 | `({ row: any, column: any }) => void` |
-| **@row-dblclick** | 行双击事件，已排除 status / operation 列 | `({ row: any, column: any }) => void` |
+| **@row-click** | 行点击事件，已排除 status / operation 列 | `(row: any, column: any) => void` |
+| **@row-dblclick** | 行双击事件，已排除 status / operation 列 | `(row: any, column: any) => void` |
+| **@switch-change** | 开关切换事件 | `(value, scope, column) => void` |
 
-### Expose 暴露方法说明
+#### Expose 暴露方法说明
 
 | 方法名 | 说明 | 参数 |
 | ------ | ---- | ---- |
@@ -54,7 +104,7 @@
 | **@reset** | 重置事件 | `() => void` |
 | **@getTableList** | 获取表格数据，不更新搜索参数及分页参数 | `() => void` |
 
-### 示例代码
+#### 示例代码
 
 ```vue
 <template>
@@ -84,10 +134,12 @@ import { ProTable } from "auto-vue-manual";
 
 const proTableRef = ref<InstanceType<typeof ProTable>>();
 const columns: ColumnProps[] = [
-  { prop: "code", label: "代号", width: 100 },
+  { label: "index", type: 'index' },
+  { prop: "code", label: "代号", width: 100, type: 'tag' },
   { prop: "logo", label: "标志", width: 100 },
-  { prop: "status", label: "状态", width: 100, search: { defaultValue: 1 }  },
+  { prop: "status", label: "状态", width: 100, type: 'switch', props: { activeValue: 1, inactiveValue: 2, api: '/league/change_status', refresh: true }  },
   { prop: "name", label: "名称", width: 0, align: "right", 
+    search: { defaultValue: "League" },
     headerRender: ({ column }: HeaderRenderScope<any>) => {
       return (<span>headerRender: {column.label}</span>)
     },
@@ -117,22 +169,26 @@ const onRowDblclick = (row: any, column: any, event: any) => {
 </script>
 ```
 
-## ProTableList 属性说明
+## ProTableList
 
-### Props 参数说明
-与 ProTable 相同，但多了 `row-key` 属性，用于指定行数据的唯一标识。
+#### Props 参数说明
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **row-key** | `string`  | 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ） | id |
+
+其余同 [ProTable](#protable--protablesummary)
 
-### Event 事件说明
+#### Event 事件说明
 
 | 事件名 | 说明 | 参数 |
 | ------ | ---- | ---- |
 | **@row-click** | 行点击事件，未排除 status / operation 列，需添加 e.stopPropagation() 阻止事件冒泡 | `({ row: any, column: any }) => void` |
 | **@row-dblclick** | 行双击事件，未排除 status / operation 列，需添加 e.stopPropagation() 阻止事件冒泡 | `({ row: any, column: any }) => void` |
 
-### Expose 暴露方法说明
+#### Expose 暴露方法说明
 与 ProTable 相同。
 
-### 示例代码
+#### 示例代码
 
 ```vue
 <template>
@@ -153,16 +209,16 @@ import ProTableList from "auto-vue-manual";
 
 const proTableRef = ref<InstanceType<typeof ProTableList>>();
 const columns: ColumnProps[] = [
-  { prop: "label", label: "Label", width: 100 }, 
-  { prop: "key", label: "Key", width: 100 }, 
+  { label: "index", type: 'index' },
+  { prop: "label", label: "Label", width: 100, type: 'tag' }, 
+  { prop: "key", label: "Key", width: 100, type: 'copy' }, 
   { prop: "value", label: "Value", width: 200, headerRender: (scope: HeaderRenderScope<any>) => {
-    console.log('headerRender', scope)
     return (
       <span>HeaderRender: {scope.column.label}</span>
     )
   }}, 
+  { prop: "status", label: "Status", width: 100, type: 'switch', props: { activeValue: 1, inactiveValue: 2, api: '/league/change_status', refresh: true }  },
   { prop: "action", label: "Action", width: 60, align: "center", render: (scope: RenderScope<any>) => {
-    console.log('render', scope)
     return (
       <el-button type="primary" size="small" link icon={Plus} onClick={(e: Event) => {
         e.stopPropagation();
@@ -192,4 +248,235 @@ const onRowDblclick = (row: RowEventHandlerParams) => {
   console.log("onRowDblclick", row);
 };
 </script>
-```
+```
+
+## Modal
+
+### BasicDialog
+
+#### Props 参数说明
+
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **visible** | `boolean`  | 是否显示 | false |
+| **show-close** | `boolean`  | 是否显示关闭按钮 | true |
+| **title** | `string`  | 标题 | Title |
+| **width** | `string`  | 宽度 | 520px |
+| **top** | `string`  | 顶部距离 | 15vh |
+| **dialog-props** | `object`  | 对话框属性 | {} |
+
+#### Event 事件说明
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| **@closed** | 关闭事件 | - |
+| **@submit** | 确定事件 | - |
+
+#### 示例代码
+
+```vue
+<template>
+  <BasicDialog ref="basicDialogRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" @submit="onSubmit" />
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import BasicDialog from "auto-vue-manual";
+
+const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
+const visible = ref(false);
+
+const onClosed = () => {
+  console.log("onClosed");
+};
+const onSubmit = () => {
+  console.log("onSubmit");
+};
+</script>
+```
+
+## BasicDrawer
+
+#### Props 参数说明
+
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **visible** | `boolean`  | 是否显示 | false |
+| **show-close** | `boolean`  | 是否显示关闭按钮 | true |
+| **title** | `string`  | 标题 | Title |
+| **width** | `string`  | 宽度 | 520px |
+| **dialog-props** | `object`  | 对话框属性 | {} |
+
+#### Event 事件说明
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| **@closed** | 关闭事件 | - |
+
+#### 示例代码
+
+```vue
+<template>
+  <BasicDrawer ref="basicDrawerRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" />
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import BasicDrawer from "auto-vue-manual";
+
+const basicDrawerRef = ref<InstanceType<typeof BasicDrawer>>();
+const visible = ref(false);
+
+const onClosed = () => {
+  console.log("onClosed");
+};
+</script>
+```
+
+## FormDialog
+
+#### Props 参数说明
+
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **executing** | `boolean`  | 是否执行中 | false |
+| **footer** | `boolean`  | 是否显示底部 | true |
+| **btn-size** | `string`  | 按钮大小 | default |
+| **ok-text** | `string`  | 确定按钮文本 | base.submit |
+| **cancel-text** | `string`  | 取消按钮文本 | base.cancel |
+
+其余同 [BasicDialog](#basicdialog)
+
+#### Event 事件说明
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| **@closed** | 关闭事件 | - |
+| **@submit** | 确定事件 | - |
+| **@before-close** | 关闭前事件 | - |
+
+#### 示例代码
+
+```vue
+<template>
+  <FormDialog ref="formDialogRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" @submit="onSubmit" @before-close="onBeforeClose" />
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import FormDialog from "auto-vue-manual";
+
+const formDialogRef = ref<InstanceType<typeof FormDialog>>();
+const visible = ref(false);
+
+const onClosed = () => {
+  console.log("onClosed");
+};
+const onSubmit = () => {
+  console.log("onSubmit");
+};
+const onBeforeClose = () => {
+  console.log("onBeforeClose");
+};
+</script>
+``` 
+
+## TableDialog
+
+#### Props 参数说明
+
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **requesting** | `boolean`  | 是否请求中 | false |
+
+其余同 [BasicDialog](#basicdialog)
+
+#### Event 事件说明
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| **@closed** | 关闭事件 | - |
+
+#### 示例代码
+
+```vue
+<template>
+  <TableDialog ref="tableDialogRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" />
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import TableDialog from "auto-vue-manual";
+
+const tableDialogRef = ref<InstanceType<typeof TableDialog>>();
+const visible = ref(false);
+
+const onClosed = () => {
+  console.log("onClosed");
+};
+</script> 
+```
+
+## Upload
+
+### UploadAvatar
+
+#### Props 参数说明
+
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **url** | `string`  | 上传地址 | - |
+| **avatar** | `string`  | 头像地址 |  - |
+| **text** | `string`  | 上传提示 | - |
+| **path** | `string`  | 保存路径 | - |
+| **preview** | `boolean`  | 是否显示预览 | false |
+| **disabled** | `boolean`  | 是否禁用 | false |
+| **size** | `number`  | 大小（KB） | 5120 |
+
+### UploadImage
+
+#### Props 参数说明
+
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **image** | `string`  | 图片地址 | - |
+
+其余同 [UploadAvatar](#uploadavatar)
+
+#### 示例代码
+
+```vue
+<template>
+  <UploadAvatar ref="uploadAvatarRef" url="/upload/image" :avatar="avatar" text="上传头像" path="/avatar" preview :size="1024" />
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import UploadAvatar from "auto-vue-manual";
+
+const uploadAvatarRef = ref<InstanceType<typeof UploadAvatar>>();
+const avatar = ref("");
+</script>
+```
+
+### UploadImages
+
+#### Props 参数说明
+
+| 属性名 | 类型 | 说明 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| **images** | `FileList[]`  | 图片地址 | - |
+| **limit** | `number`  | 限制数量 | 10 |
+
+其余同 [UploadAvatar](#uploadavatar)
+
+#### 示例代码
+
+```vue
+<template>
+  <UploadImages ref="uploadImagesRef" url="/upload/image" :images="images" text="上传图片" path="/image" preview :size="1024" />
+</template>
+<script setup lang="ts">
+import type { FileList } from "auto-vue-manual";
+
+import { ref } from "vue";
+import UploadImages from "auto-vue-manual";
+
+const uploadImagesRef = ref<InstanceType<typeof UploadImages>>();
+const images = ref<FileList[]>([]);
+</script>