vue-super-crud 1.7.1

package/docs/guide/dict/baseUse.md

@@ -0,0 +1,174 @@
+# 基本使用
+
+## 使用字典+增强方法
+
+默认字典与全局字典无需注册，直接使用即可 <br>
+
+<ClientOnly>
+<common-code-format>
+  <dict-baseUse slot="source"></dict-baseUse>
+  
+<<< @/docs/.vuepress/components/dict/baseUse.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 字典联动
+
+<ClientOnly>
+<common-code-format>
+  <dict-DictLinkage slot="source"></dict-DictLinkage>
+  
+<<< @/docs/.vuepress/components/dict/DictLinkage.vue
+</common-code-format>
+</ClientOnly>
+
+## 局部字典+联动
+
+字典数据不共用，需要配合现有组件使用，`local` 设置局部字典 <br>
+
+<ClientOnly>
+<common-code-format>
+  <dict-localDict slot="source"></dict-localDict>
+  
+<<< @/docs/.vuepress/components/dict/localDict.vue
+</common-code-format>
+</ClientOnly>
+
+## 字典配合组件使用
+
+<ClientOnly>
+<common-code-format>
+  <dict-component slot="source"></dict-component>
+  
+<<< @/docs/.vuepress/components/dict/component.vue
+</common-code-format>
+</ClientOnly>
+
+## 全局注册
+
+```javascript
+import superCrud from "src";
+
+Vue.use(superCrud, {
+  // 默认字典配置项
+  dict: {
+    request: (key) => request({
+      url: '/dict/type/' + key,
+      method: 'get'
+    }),
+    value: "value",
+    label: "label",
+    color: "color",
+    children: "children",
+  },
+  // 注册全局字典模板
+  template: {
+    dicts: {
+      userStatus: {
+        request: () => request('/api/user/status'),
+        transform: (data) => {
+          return data.map(item => ({
+            label: item.name,
+            value: item.id
+          }))
+        }
+      },
+      userList: {
+        request: () => request('/api/user/list'),
+      }
+    }
+  },
+});
+```
+
+全局注册的字典直接使用即可, 会通过 `$scDict[key]` 自动获取字典数据 <br>
+
+`key` 为字典的注册名称：
+- 匹配到名为key的`全局字典模板`
+- 如果匹配不到名为key的`全局字典模板`，会自动将key作为`默认字典`请求函数的`参数`
+
+```vue
+<template>
+  <div>
+    {{ $scDict.userStatus }}
+  </div>
+</template>
+<script>
+export default {
+  async created() {
+    await this.$scDict.sys_normal_disable.wait();
+    console.log(this.$scDict.sys_normal_disable);
+  },
+};
+</script>
+```
+
+## 字典注册
+```javascript
+// 方式一：直接传入请求函数
+this.$scDict.register('userStatus', request('/api/user/status'))
+
+// 方式二：传入配置对象
+this.$scDict.register('userList', {
+  request: () => request('/api/user/list'),
+  immediate: true,
+  transform: (data) => {
+    return data.map(item => ({
+      label: item.name,
+      value: item.id
+    }))
+  }
+})
+
+// 方式三：本地静态数据
+this.$scDict.register('gender', {
+  options: [
+    { label: '男', value: 1 },
+    { label: '女', value: 2 }
+  ]
+})
+
+// 批量注册
+this.$scDict.registerBatch({
+  gender: {
+    options: [
+      { label: '男', value: 1 },
+      { label: '女', value: 2 }
+    ]
+  },
+  userStatus: () => request('/api/user/status'),
+  userList: () => request('/api/user/list'),
+})
+```
+
+## 动态参数
+
+```javascript
+// 参数为函数形式时监听响应式数据变化
+this.$scDict.register('cityList', {
+  request: (params) => request('/api/cities', params),
+  params: () => ({
+    provinceId: this.selectedProvince
+  }),
+  immediate: true  // 会立即执行 params 函数并请求数据
+})
+
+// 手动传入参数
+this.$scDict.get('cityList', { provinceId: 1 })
+```
+
+## 自定义增强方法
+
+```javascript
+this.$scDict.register('countries', {
+  request: mockApi.getProvinces,
+  enhanceDict: {
+    customFindLabel: (value, key, dictData, meta) =>
+      dictData.find((item) => item.value === value)?.label,
+  },
+});
+
+// 使用
+this.$scDict.countries.customFindLabel(1)
+```

package/docs/guide/dict/component.md

@@ -0,0 +1,88 @@
+# 字典组件
+## 展示组件
+### DateFormat 日期格式化
+用于格式化日期时间的展示。
+
+| 参数        | 说明                                     | 类型   | 默认值              |
+| ----------- | ---------------------------------------- | ------ | ------------------- |
+| value       | 日期时间值，支持long、string、date等格式 | any    | -                   |
+| valueFormat | 输入格式化，不传则由dayjs自动转化        | string | -                   |
+| format      | 输出格式化                               | string | YYYY-MM-DD HH:mm:ss |
+### ValueFormat 值格式化
+用于将值格式化为标签形式展示。
+
+| 参数        | 说明                                                   | 类型         | 默认值                                      |
+| ----------- | ------------------------------------------------------ | ------------ | ------------------------------------------- |
+| value       | 需要格式化的值，多选支持'1,2,3'或[1,2,3]               | string/array | -                                           |
+| multiple    | 是否多选                                               | boolean      | true                                        |
+| separator   | 多选值的分隔符                                         | string       | ,                                           |
+| color       | 标签颜色，支持auto/primary/success/warning/danger/info | string       | -                                           |
+| effect      | 标签主题                                               | string       | -                                           |
+| autoColors  | 自动颜色列表                                           | array        | ['primary', 'success', 'warning', 'danger'] |
+| autoEffects | 自动主题列表                                           | array        | ['light', 'plain']                          |
+| scope       | 其他组件传入的参数                                     | object       | -                                           |
+| props       | 配置选项                                               | object       | {value:'value', label:'label'}              |
+### CascadeFormat 级联数据格式化
+用于格式化级联数据的展示。
+
+| 参数      | 说明                                                            | 类型         | 默认值                         |
+| --------- | --------------------------------------------------------------- | ------------ | ------------------------------ |
+| value     | 级联值，单选时支持'1,2,3'或[1,2,3]，多选时支持[[1,2,3],[4,5,6]] | string/array | -                              |
+| separator | 值的分隔符                                                      | string       | ,                              |
+| multiple  | 是否多选                                                        | boolean      | false                          |
+| scope     | 其他组件传入的参数                                              | object       | -                              |
+| options   | 可选项数据源                                                    | array        | -                              |
+| props     | 配置选项                                                        | object       | {value:'value', label:'label'} |
+## 表单组件
+
+`el-select`,`el-cascader`,`el-checkbox-group`,`el-radio-group`,`el-switch`组件在使用`comp`进行组件渲染时已默认映射为封装的字典组件
+
+### Select 选择器
+基于el-select的字典选择器。
+
+| 参数      | 说明                             | 类型                        | 默认值                         |
+| --------- | -------------------------------- | --------------------------- | ------------------------------ |
+| value     | 选中值，多选支持'1,2,3'或[1,2,3] | number/string/boolean/array | -                              |
+| separator | 多选值的分隔符                   | string                      | ,                              |
+| multiple  | 是否多选                         | boolean                     | false                          |
+| scope     | 其他组件传入的参数               | object                      | -                              |
+| options   | 可选项数据源                     | array                       | -                              |
+| props     | 配置选项                         | object                      | {value:'value', label:'label'} |
+### Switch 开关
+基于el-switch的字典开关。
+
+| 参数    | 说明               | 类型   | 默认值                         |
+| ------- | ------------------ | ------ | ------------------------------ |
+| value   | 开关值             | any    | -                              |
+| scope   | 其他组件传入的参数 | object | -                              |
+| options | 可选项数据源       | array  | -                              |
+| props   | 配置选项           | object | {value:'value', label:'label'} |
+### Radio 单选框
+基于el-radio-group的字典单选框。
+
+| 参数    | 说明                                        | 类型   | 默认值                         |
+| ------- | ------------------------------------------- | ------ | ------------------------------ |
+| value   | 选中值                                      | any    | -                              |
+| type    | 单选框类型，可选值:el-radio/el-radio-button | string | el-radio                       |
+| scope   | 其他组件传入的参数                          | object | -                              |
+| options | 可选项数据源                                | array  | -                              |
+| props   | 配置选项                                    | object | {value:'value', label:'label'} |
+### Checkbox 复选框
+基于el-checkbox-group的字典复选框。
+
+| 参数      | 说明                                              | 类型                        | 默认值                         |
+| --------- | ------------------------------------------------- | --------------------------- | ------------------------------ |
+| value     | 选中值，多选支持'1,2,3'或[1,2,3]                  | number/string/boolean/array | -                              |
+| separator | 值的分隔符                                        | string                      | ,                              |
+| type      | 复选框类型，可选值:el-checkbox/el-checkbox-button | string                      | el-checkbox                    |
+| scope     | 其他组件传入的参数                                | object                      | -                              |
+| options   | 可选项数据源                                      | array                       | -                              |
+| props     | 配置选项                                          | object                      | {value:'value', label:'label'} |
+### Cascade 级联选择器
+基于el-cascader的字典级联选择器。
+
+| 参数    | 说明                             | 类型   | 默认值 |
+| ------- | -------------------------------- | ------ | ------ |
+| value   | 选中值，多选支持'1,2,3'或[1,2,3] | array  | []     |
+| scope   | 其他组件传入的参数               | object | -      |
+| options | 可选项数据源                     | array  | -      |

package/docs/guide/dict/config.md

@@ -0,0 +1,44 @@
+# 配置文档
+
+## 基础配置项
+
+| 配置项       | 类型            | 默认值   | 说明                                       |
+| ------------ | --------------- | -------- | ------------------------------------------ |
+| request      | Function        | -        | 字典数据请求函数(返回Promise)              |
+| label        | String          | label    | 标签字段名                                 |
+| value        | String          | value    | 值字段名                                   |
+| color        | String          | color    | 颜色字段名                                 |
+| children     | String          | children | 子节点字段名                               |
+| params       | Object/Function | -        | 请求参数，支持函数形式监听响应式数据变化   |
+| immediate    | Boolean         | false    | 是否立即加载，默认为懒加载，即使用时才加载 |
+| cache        | Boolean         | true     | 是否启用缓存                               |
+| dataPath     | String          | data     | 字典数组的路径                             |
+| transform    | Function        | -        | 数据转换函数                               |
+| otherPath    | String/Array    | -        | 需要额外获取的数据路径                     |
+| debounceTime | Number          | 300      | 防抖时间（毫秒）                           |
+| enhanceDict  | Object          | -        | 自定义增强方法                             |
+| local        | Boolean         | false    | 是否启用局部字典，组件配置使用时，才有效   |
+
+## 字典方法
+
+| 方法名        | 说明                                              | 参数          |
+| ------------- | ------------------------------------------------- | ------------- |
+| register      | 注册字典                                          | (key, config) |
+| registerBatch | 批量注册字典                                      | (config)      |
+| get           | 获取字典                                          | (key, params) |
+| clear         | 清空字典，不传参数则清空所有字典                  | (key)         |
+| wait          | 等待字典加载完成 ，不传参数则等待所有字典加载完成 | (key)         |
+
+## 字典数据增强方法
+
+每个字典数组都会被自动注入以下方法：
+
+| 方法名           | 说明                        | 返回值  |
+| ---------------- | --------------------------- | ------- |
+| findLabel(value) | 根据值查找对应的标签        | String  |
+| toMap()          | 将字典转换为值-标签映射对象 | Object  |
+| values()         | 获取所有值的数组            | Array   |
+| labels()         | 获取所有标签的数组          | Array   |
+| getOption(value) | 根据值获取完整选项          | Object  |
+| wait()           | 等待字典加载完成            | Promise |
+| ready            | 字典是否加载完成的变量      | Boolean |

package/docs/guide/form/baseUse.md

@@ -0,0 +1,142 @@
+# 基本使用
+
+##  基本使用
+
+`v-model="data"` 绑定的表单值`data`可以不用声明属性`name`,`gender`来绑定响应式，组件内部会自动进行响应式处理</br>
+`action` 配置表单按钮
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-base slot="source"></form-baseUse-base>
+  
+<<< @/docs/.vuepress/components/form/baseUse/base.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 布局
+
+`layout` 布局类型默认`grid`</br>
+`layout` 布局类型如果为 `el-row`，则参考element-ui的布局设置</br>
+### 设置 columns 固定每行列数
+`columns` 表单列数，`columnGap` 列间距， `rowGap` 行间距 </br>
+`renderColumns`项中，`widthSize` 占据列数，`heightSize` 占据行数</br>
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-gridLayout slot="source"></form-baseUse-gridLayout>
+  
+<<< @/docs/.vuepress/components/form/baseUse/gridLayout.vue
+</common-code-format>
+</ClientOnly>
+
+### 设置 columnWidth 固定每列宽度,不固定数量
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-inlineLayout slot="source"></form-baseUse-inlineLayout>
+  
+<<< @/docs/.vuepress/components/form/baseUse/inlineLayout.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 提示
+
+`renderColumns`项中，`tooltip` 提示文本，`tooltipRender` 提示渲染函数</br>
+`#[prop]-tooltip` 提示插槽 </br>
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-tooltip slot="source"></form-baseUse-tooltip>
+  
+<<< @/docs/.vuepress/components/form/baseUse/tooltip.vue
+</common-code-format>
+</ClientOnly>
+
+
+## label
+
+`renderColumns`项中，`label` label文本，`labelRender` label渲染函数 </br>
+`#[prop]-label` label插槽 </br>
+`hiddenLabel` 隐藏label，在`renderColumns`项中配置单个隐藏 </br>
+`labelOverTip` label超出隐藏，在`renderColumns`项中配置单个超出隐藏 </br>
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-label slot="source"></form-baseUse-label>
+  
+<<< @/docs/.vuepress/components/form/baseUse/label.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 校验
+
+`renderColumns`项中，`required` 必填，`rules` 匹配规则模板和自定义规则</br>
+详情参考[crud-校验](/guide/crud/validate.html#基本使用)
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-validate slot="source"></form-baseUse-validate>
+  
+<<< @/docs/.vuepress/components/form/baseUse/validate.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 显示/隐藏
+
+`renderColumns`项中，`hidden` 隐藏，`show` 显示</br>
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-hidden slot="source"></form-baseUse-hidden>
+  
+<<< @/docs/.vuepress/components/form/baseUse/hidden.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 分组
+
+`type: group` 设置分组</br>
+`renderColumns`项中，`children` 配置表单项 </br>
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-group slot="source"></form-baseUse-group>
+  
+<<< @/docs/.vuepress/components/form/baseUse/group.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 数据格式化
+
+当后端接口数据格式与前端不一致时，可以使用`formatData`进行数据格式化</br>
+`formatData.input` 将外部后端接口的数据格式转化成内部表单所需的格式</br>
+`formatData.output` 将内部表单的数据格式反转回原来的格式</br>
+`formatData` 接收字符串时则匹配预设的全局格式化模板</br>
+`formatData.getFormatValue = true` 可获取格式化后的值，默认绑定在 `scope.row[$ + prop]` 上，如果配置`getFormatValue`为字符串则绑定在 `scope.row[getFormatValue]` 上
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-dataFormat slot="source"></form-baseUse-dataFormat>
+  
+<<< @/docs/.vuepress/components/form/baseUse/dataFormat.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 深度绑定
+
+`deepProp` 绑定的对象数据是双向的，改变任意一个，另外一个也会改变
+
+<ClientOnly>
+<common-code-format>
+  <form-baseUse-deep slot="source"></form-baseUse-deep>
+  
+<<< @/docs/.vuepress/components/form/baseUse/deep.vue
+</common-code-format>
+</ClientOnly>

package/docs/guide/form/detail.md

@@ -0,0 +1,38 @@
+# 详情模式
+
+`detail` 配置表单为详情模式 </br>
+renderColumn项中，`detail` 自定义详情渲染组件
+
+<ClientOnly>
+<common-code-format>
+  <form-detail-base slot="source"></form-detail-base>
+  
+<<< @/docs/.vuepress/components/form/detail/base.vue
+</common-code-format>
+</ClientOnly>
+
+
+##  带边框
+
+`border` 配置表单为详情带边框模式
+
+<ClientOnly>
+<common-code-format>
+  <form-detail-border slot="source"></form-detail-border>
+  
+<<< @/docs/.vuepress/components/form/detail/border.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 单个详情
+
+renderColumn项中，`isDetail` 配置单个详情模式
+
+<ClientOnly>
+<common-code-format>
+  <form-detail-singleDetail slot="source"></form-detail-singleDetail>
+  
+<<< @/docs/.vuepress/components/form/detail/singleDetail.vue
+</common-code-format>
+</ClientOnly>

package/docs/guide/formatData/baseUse.md

@@ -0,0 +1,98 @@
+# 基本使用
+
+## 概述
+
+数据格式化（formatData）用于解决组件所需数据格式与业务数据格式不一致的问题。它提供了两个核心功能：
+- `input`: 将业务数据转换为组件所需格式
+- `output`: 将组件数据转换回业务所需格式
+
+## 示例
+
+<ClientOnly>
+<common-code-format>
+  <formatData-baseUse slot="source"></formatData-baseUse>
+  
+<<< @/docs/.vuepress/components/formatData/baseUse.vue
+</common-code-format>
+</ClientOnly>
+
+## 预设格式化模板
+
+`formatData` 直接指定预设模板的名称：
+
+```javascript
+{
+  label: "省市区",
+  prop: "province",
+  formatData: {
+    type: "multiPropToArr",
+    multiProp: ["province", "city", "district"] // 绑定的多字段参数
+  }
+}
+```
+
+## 自定义当前列的格式化函数
+
+```javascript
+{
+  label: "自定义",
+  prop: "custom",
+  formatData: {
+    input: (value) => value.join(","),
+    output: (value) => value.split(","),
+  }
+}
+```
+
+## 格式化值的存储
+
+如果需要同时保留原始值和格式化后的值，可以通过 `formatValue` 配置存储位置：
+
+```javascript
+{
+  label: "金额",
+  prop: "amount",
+  formatData: {
+    formatValue: true, // 格式化后的值会存储在 row.$amount
+    // 或
+    formatValue: "formattedAmount" // 格式化后的值会存储在 row.formattedAmount
+  }
+}
+```
+
+## 全局注册格式化模板
+
+`item` 即为当前列配置，可以获取到传入的配置信息 prop、label、formatData配置 等
+
+```javascript
+import superCrud from "src";
+
+Vue.use(superCrud, {
+  template: {
+    formatData: {
+      "custom": (item) => {
+        const { prop, label, formatData } = item;
+        return {
+          input: (value) => value.join(","),
+          output: (value) => value.split(","),
+        }
+      }
+    }
+  },
+});
+```
+
+## 在render或插槽渲染中使用
+
+在render或插槽渲染中使用时，需要使用 `$value` 对象来获取和设置值。
+
+```javascript
+{
+  label: "自定义",
+  prop: "custom",
+  formatData: "strToArr",
+  render: (h, { $value }) => {
+    return <el-input value={$value.get} onInput={(v)=>$value.set(v)} />;
+  }
+}
+```