vue-super-crud 1.7.1

package/docs/guide/crud/tableEdit.md

@@ -0,0 +1,377 @@
+# 表格编辑
+
+表格编辑功能允许用户直接在表格中编辑数据，支持行编辑、单元格编辑和自由编辑等多种模式，以及多种触发方式。
+
+## 基础配置
+通过 editConfig 配置表格的编辑模式和触发方式。 </br>
+编辑模式下，默认渲染`input`组件，需要通过包裹一层 `form` 对象才能自定义配置编辑组件。
+
+```js
+options: {
+  editConfig: {
+    // 编辑模式：row(行编辑)、cell(单元格编辑)、free(自由编辑)、dialog(弹窗编辑)
+    mode: 'row',
+    // 触发方式：manual(手动)、click(单击)、dblclick(双击)
+    trigger: 'manual',
+    // 编辑按钮触发
+    edit: true,
+  },
+  renderColumns: [
+    {
+      prop: 'name',
+      label: '姓名',
+      form: { // 自定义编辑组件配置
+        comp: {
+          name: 'el-select',
+          options: [
+            {
+              label: '选项1',
+              value: '选项1',
+            }
+          ]
+        },
+      }
+    }
+  ]
+}
+```
+
+
+## 自由编辑
+
+### 全局自由编辑
+
+`mode: free` 自由编辑 </br>
+自由编辑模式下，所有可编辑的单元格始终处于编辑状态。
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-free slot="source"></crud-tableEdit-free>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/free.vue
+</common-code-format>
+</ClientOnly>
+
+### 单列自由编辑
+
+`isEdit` 设置单列自由编辑 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-freeColumn slot="source"></crud-tableEdit-freeColumn>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/freeColumn.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 行编辑
+
+### 手动触发 - 操作列
+
+通过操作列编辑按钮 `edit`触发编辑状态。
+
+```js
+editConfig: {
+  mode: "row",
+  trigger: "manual",
+  edit: {} // 操作列按钮配置
+}
+```
+
+#### 事件处理
+
+`@edit(done, scope)` 点击编辑触发，参数`done(params)`，可设置编辑后的行数据 </br>
+`@save(done, scope, unLoading)` 点击保存触发，参数`done(params)`，可设置保存后的行数据 </br>
+`@cancel(done, scope)` 点击取消触发 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-rowAction slot="source"></crud-tableEdit-rowAction>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/rowAction.vue
+</common-code-format>
+</ClientOnly>
+
+### 手动触发 - 批量编辑
+
+通过批量编辑按钮 `batch` 触发编辑状态。
+
+```js
+editConfig: {
+  mode: "row",
+  trigger: "manual",
+  batch: {
+    isSelect: true, // 是否批量编辑选中项，搭配selection使用
+  } // 批量操作按钮配置
+}
+```
+
+#### 事件处理
+
+`@batchEdit(done, rows)` 点击批量编辑触发，参数`done(rows)`，可传递需要编辑的行，默认编辑所有行 </br>
+`@batchSave(done, rows)` 点击批量保存触发，参数`done(rows)`，可传递需要保存的行，默认保存所有编辑行 </br>
+`@batchCancel(done, rows)` 点击批量取消触发，参数`done(rows)`，可传递需要取消的行，默认取消所有编辑行 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-rowBatch slot="source"></crud-tableEdit-rowBatch>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/rowBatch.vue
+</common-code-format>
+</ClientOnly>
+
+### 手动触发 - 调用方法
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-methods slot="source"></crud-tableEdit-methods>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/methods.vue
+</common-code-format>
+</ClientOnly>
+
+
+### 单击触发
+
+点击行时触发编辑状态。
+
+```js
+editConfig: {
+  mode: "row",
+  trigger: "click",
+}
+```
+
+#### 事件处理
+
+`@edit(done, scope)` 点击编辑触发，参数`done(params)`，可设置编辑后的行数据 </br>
+`@save(done, scope, unLoading)` 点击保存触发，参数`done(params)`，可设置保存后的行数据 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-rowClick slot="source"></crud-tableEdit-rowClick>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/rowClick.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 单元格编辑
+
+单元格编辑模式下，点击或双击单元格时，只有该单元格进入编辑状态
+
+```js
+editConfig: {
+  mode: "cell",
+}
+```
+
+#### 事件处理
+
+`@edit(done, scope, column)` 点击编辑触发，参数`done(params)`，可设置编辑后的数据 </br>
+`@save(done, value, scope, column, unLoading)` 点击保存触发，参数`done(params)`，可设置保存后的数据 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-cellEdit slot="source"></crud-tableEdit-cellEdit>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/cellEdit.vue
+</common-code-format>
+</ClientOnly>
+
+## 控制编辑状态
+
+`isRowEdit` 控制行编辑状态 </br>
+`isEdit` 控制列与单元格编辑状态
+
+```js
+options: {
+  editConfig: {
+    isRowEdit: (row) => { //控制行编辑状态
+      return row.id % 2 === 0;
+    }
+  }
+  renderColumns: [
+    {
+      prop: 'name',
+      label: '姓名',
+      isEdit: (row) => { //控制单元格编辑状态
+        return row.id % 2 === 0;
+      }
+    }
+  ]
+}
+```
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-controlEdit slot="source"></crud-tableEdit-controlEdit>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/controlEdit.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 新增删除操作
+
+### 基本配置
+
+```js
+editConfig: {
+  mode: 'row',
+  trigger: 'manual',
+  rowEdit: {
+    hasPermi: ['xx'] // 可以用于设置按钮权限等
+  },
+  // 底部新增行按钮配置
+  lastAdd: {
+    type: 'last', // first(第一行新增)、last(最后一行新增)
+  },
+  // 新增行按钮配置
+  rowAdd: {
+    type: 'first', // first(第一行新增)、last(最后一行新增)
+  },
+  // 批量删除按钮配置
+  batchDelete: {
+    confirm: (rows) => `是否删除序号为${rows.map(row => row.$index + 1).join(',')}的数据？`, // 删除提示
+  },
+  // 删除按钮配置
+  delete: {
+    confirm: (scope) => `是否删除序号为${scope.$index + 1}的数据？`, // 删除提示
+  },
+},
+```
+
+### 事件处理
+
+`@add` 点击新增触发，参数`done(params)`，可设置新增的行数据 </br>
+`@delete` 点击删除触发 </br>
+`@batchDelete` 点击批量删除触发 </br>
+
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-addDeleteBtn slot="source"></crud-tableEdit-addDeleteBtn>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/addDeleteBtn.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 弹窗编辑
+
+### 基本配置
+
+```js
+options: {
+  editConfig: {
+    mode: 'dialog',
+    // 编辑按钮配置
+    edit: {},
+    // 新增按钮配置
+    add: {
+      type: 'first', // first(第一行新增)、last(最后一行新增)
+    },
+    // 查看按钮配置
+    view: {},
+  },
+  dialog: {}, // 自定义弹窗配置
+  formOptions: {}, // 自定义表单配置
+}
+```
+
+### 事件处理
+
+`@add` 点击新增触发 </br>
+`@edit` 点击编辑触发 </br>
+`@save` 点击保存触发 </br>
+`@view` 点击查看触发 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-tableEdit-dialog slot="source"></crud-tableEdit-dialog>
+  
+<<< @/docs/.vuepress/components/crud/tableEdit/dialog.vue
+</common-code-format>
+</ClientOnly>
+
+
+## API
+
+### editConfig 配置
+
+| 参数        | 说明                             | 类型                    | 可选值                |
+| ----------- | -------------------------------- | ----------------------- | --------------------- |
+| mode        | 编辑模式                         | string                  | free,cell,row,dialog  |
+| trigger     | 触发方式                         | string                  | manual,click,dblclick |
+| edit        | 编辑按钮配置                     | object                  | -                     |
+| batch       | 批量操作按钮配置，仅限`row`模式  | object                  | -                     |
+| add         | 新增按钮配置                     | object                  | -                     |
+| lastAdd     | 底部新增行按钮配置               | object                  | -                     |
+| batchDelete | 批量删除按钮配置                 | object                  | -                     |
+| delete      | 删除按钮配置                     | object                  | -                     |
+| view        | 查看按钮配置，仅限`dialog`模式   | object                  | -                     |
+| isRowEdit   | 控制行是否可编辑                 | function({row, $index}) | -                     |
+| autofocus   | 是否自动聚焦，支持字符串(prop)   | boolean/string          | true                  |
+| exclusive   | 行编辑是否互斥(同时只能编辑一行) | boolean                 | false                 |
+
+### Column 配置
+
+| 参数              | 说明                 | 类型                            | 默认值            |
+| ----------------- | -------------------- | ------------------------------- | ----------------- |
+| isEdit            | 是否可编辑           | boolean/function({row, $index}) | false             |
+| add               | 仅自定义新增组件     | boolean/Object                  | 默认继承form配置  |
+| edit              | 仅自定义编辑组件     | boolean/Object                  | 默认继承form配置  |
+| form              | 自定义编辑、新增组件 | boolean/Object                  | -                 |
+| form.prop         | 编辑字段             | boolean/Object                  | 默认继承列的prop  |
+| form.comp         | 编辑组件             | object                          | el-input          |
+| form.render       | 编辑组件渲染函数     | function                        | -                 |
+| form.validateProp | 编辑组件验证字段     | string                          | 默认继承form.prop |
+
+### slots
+
+| 插槽名        | 说明                 | 默认值       |
+| ------------- | -------------------- | ------------ |
+| `{prop}-form` | 自定义编辑、新增组件 | -            |
+| `{prop}-add`  | 仅自定义新增组件     | 默认继承form |
+| `{prop}-edit` | 仅自定义编辑组件     | 默认继承form |
+
+
+### Events
+
+
+| 事件名            | 说明                              | 参数                            |
+| ----------------- | --------------------------------- | ------------------------------- |
+| @add              | 点击新增按钮时                    | done(params), scope             |
+| @edit             | 点击编辑按钮时                    | done(params), scope             |
+| @save             | 点击保存按钮时                    | done(params), scope, unLoading  |
+| @cancel           | 点击取消按钮时                    | done(params), scope             |
+| @delete           | 点击删除按钮时                    | done, scope, unLoading          |
+| @view             | 点击查看按钮时，仅限`dialog`模式  | done, scope                     |
+| @batchEdit        | 点击批量编辑按钮时，仅限`row`模式 | done(rows), rows                |
+| @batchSave        | 点击批量保存按钮时，仅限`row`模式 | done(rows), rows, unLoading     |
+| @batchCancel      | 点击批量取消按钮时，仅限`row`模式 | done(rows)                      |
+| @batchDelete      | 点击批量删除按钮时，仅限`row`模式 | done, rows, unLoading           |
+| @editStatusChange | 编辑状态变化时触发                | {mode, rowKey, row, prop, type} |
+
+### Methods
+
+| 方法名         | 说明                                     | 参数                                                        | 返回值 |
+| -------------- | ---------------------------------------- | ----------------------------------------------------------- | ------ |
+| setRowEdit     | 设置行编辑状态                           | (rows: object/array, options: {type: string, prop: string}) | -      |
+| setBatchEdit   | 批量设置行编辑状态，不传rows则设置所有行 | (type: string, rows: object/array)                          | -      |
+| setCellEdit    | 设置单元格编辑状态                       | (row: object, prop: string)                                 | -      |
+| addRow         | 新增表格行                               | (params: object, type: first/last)                          | -      |
+| clearAllEdit   | 清除所有编辑状态                         | -                                                           | -      |
+| getEditingRows | 获取所有编辑状态的行                     | -                                                           | array  |
+
+### options 快捷配置
+
+| 参数         | 说明                    | 类型                    | 默认值 |
+| ------------ | ----------------------- | ----------------------- | ------ |
+| freeEdit     | 启用自由编辑模式        | boolean                 | false  |
+| cellEdit     | 启用单元格编辑模式      | boolean                 | false  |
+| rowEdit      | 启用行编辑模式          | boolean                 | false  |
+| batchEdit    | 启用批量编辑模式        | boolean                 | false  |
+| batchRowEdit | 启用行编辑+批量编辑模式 | boolean                 | false  |
+| isRowEdit    | 控制行是否可编辑的函数  | function({row, $index}) | -      |

package/docs/guide/crud/validate.md

@@ -0,0 +1,158 @@
+# 表格校验
+
+表格组件支持表单校验功能,包括必填校验、正则校验和自定义校验规则。同时提供了错误提示和错误状态管理。
+
+## 基础用法
+
+通过配置列的 `required` 属性来启用必填校验。支持布尔值和对象两种配置方式:
+
+```js
+renderColumns: [
+  {
+    prop: "name",
+    label: "姓名", 
+    required: true // 简单配置
+  },
+  {
+    prop: "age",
+    label: "年龄",
+    required: { // 详细配置 
+      message: "年龄不能为空",
+      trigger: "blur"
+    }
+  }
+]
+```
+
+<ClientOnly>
+<common-code-format>
+  <crud-validate-base slot="source"></crud-validate-base>
+  
+<<< @/docs/.vuepress/components/crud/validate/base.vue
+</common-code-format>
+</ClientOnly>
+
+## 正则校验
+
+通过配置列的 `rules` 属性来添加正则校验规则。支持内置正则模板和自定义正则对象:
+
+```js
+renderColumns: [
+  {
+    prop: "phone",
+    label: "手机号",
+    rules: ["integer"] // 使用内置正则或预设规则
+  },
+  {
+    prop: "email", 
+    label: "邮箱",
+    rules: [{ // 自定义正则
+      regular: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+      message: "请输入正确的邮箱格式"
+    }]
+  }
+]
+```
+
+<ClientOnly>
+<common-code-format>
+  <crud-validate-regulars slot="source"></crud-validate-regulars>
+  
+<<< @/docs/.vuepress/components/crud/validate/regulars.vue
+</common-code-format>
+</ClientOnly>
+
+## 自定义校验
+
+通过配置 `rules` 的 validator 函数来自定义校验规则。支持获取 `scope` 参数:
+
+```js
+renderColumns: [
+  {
+    prop: "age",
+    label: "年龄", 
+    rules: [{
+      validator: (rule, value, callback, scope) => {
+        if (value < 18) {
+          callback(new Error("年龄不能小于18岁"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "change"
+    }]
+  },
+  {
+    prop: "age",
+    label: "年龄", 
+    rules: (scope)=>[{
+      validator: (rule, value, callback) => {
+        if (value < 18) {
+          callback(new Error("年龄不能小于18岁"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "change"
+    }]
+  }
+]
+```
+
+<ClientOnly>
+<common-code-format>
+  <crud-validate-custom slot="source"></crud-validate-custom>
+  
+<<< @/docs/.vuepress/components/crud/validate/custom.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 树级校验
+
+<ClientOnly>
+<common-code-format>
+  <crud-validate-tree slot="source"></crud-validate-tree>
+  
+<<< @/docs/.vuepress/components/crud/validate/tree.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 联动校验
+
+通过方法 `validateField` 函数来精确控制每个校验单元格。
+
+<ClientOnly>
+<common-code-format>
+  <crud-validate-relation slot="source"></crud-validate-relation>
+  
+<<< @/docs/.vuepress/components/crud/validate/relation.vue
+</common-code-format>
+</ClientOnly>
+
+## API
+
+### Column 配置
+
+| 参数     | 说明     | 类型                         | 默认值 |
+| -------- | -------- | ---------------------------- | ------ |
+| required | 是否必填 | boolean/object               | false  |
+| rules    | 校验规则 | string/array/function(scope) | -      |
+
+### 实例方法
+
+| 方法名        | 说明         | 参数                          | 返回值  |
+| ------------- | ------------ | ----------------------------- | ------- |
+| validate      | 校验整个表格 | callback(可选)                | Promise |
+| validateField | 校验指定行   | options: {index/id/row, prop} | Promise |
+| clearValidate | 清除校验     | -                             | -       |
+
+### validateField Options
+
+| 参数  | 说明         | 类型          |
+| ----- | ------------ | ------------- |
+| index | 行索引       | number        |
+| id    | 行ID         | string/number |
+| row   | 行数据对象   | object        |
+| prop  | 校验的字段名 | string        |

package/docs/guide/dialog/baseUse.md

@@ -0,0 +1,81 @@
+# 基本使用
+
+## 基本使用
+
+`title` 标题、`width` 宽度 。详情参考element-ui弹窗组件配置[element-ui](https://element.eleme.cn/#/zh-CN/component/dialog)  </br>
+`show()` 打开弹窗 </br>
+弹窗渲染方式依旧为通用的 `render函数`，`component配置`</br>
+
+<ClientOnly>
+<common-code-format>
+  <dialog-baseUse-base slot="source"></dialog-baseUse-base>
+  
+<<< @/docs/.vuepress/components/dialog/baseUse/base.vue
+</common-code-format>
+</ClientOnly>
+
+## 通过实例控制弹窗
+
+`hide()` 手动关闭弹窗 </br>
+`loading` 控制loading
+
+<ClientOnly>
+<common-code-format>
+  <dialog-baseUse-control slot="source"></dialog-baseUse-control>
+  
+<<< @/docs/.vuepress/components/dialog/baseUse/control.vue
+</common-code-format>
+</ClientOnly>
+
+<!-- ## v-insertSlot插入插槽渲染弹窗
+
+`v-insertSlot` 获取模板，插入弹窗实例</br>
+
+<ClientOnly>
+<common-code-format>
+  <dialog-baseUse-insertSlot slot="source"></dialog-baseUse-insertSlot>
+  
+<<< @/docs/.vuepress/components/dialog/baseUse/insertSlot.vue
+</common-code-format>
+</ClientOnly> -->
+
+
+## 确认，取消关闭前方法
+
+`confirm` 确认之前、`cancel` 取消之前</br>
+
+<ClientOnly>
+<common-code-format>
+  <dialog-baseUse-beforeConfirm slot="source"></dialog-baseUse-beforeConfirm>
+  
+<<< @/docs/.vuepress/components/dialog/baseUse/beforeConfirm.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 自定义底部按钮
+
+`footer` 自定义底部按钮</br>
+`footer.align` 底部对齐方式</br>
+`footer` 为`false`时或 `footer.hidden` 为`true` 隐藏底部
+
+<ClientOnly>
+<common-code-format>
+  <dialog-baseUse-footer slot="source"></dialog-baseUse-footer>
+  
+<<< @/docs/.vuepress/components/dialog/baseUse/footer.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 抽屉式弹窗
+
+`drawer` 抽屉式弹窗, 详情参考element-ui抽屉组件配置[element-ui](https://element.eleme.cn/#/zh-CN/component/drawer)
+
+<ClientOnly>
+<common-code-format>
+  <dialog-baseUse-drawer slot="source"></dialog-baseUse-drawer>
+  
+<<< @/docs/.vuepress/components/dialog/baseUse/drawer.vue
+</common-code-format>
+</ClientOnly>