vue-super-crud 1.7.1 → 1.7.4

package/docs/guide/dict/baseUse.md

@@ -1,174 +0,0 @@
-# 基本使用
-
-## 使用字典+增强方法
-
-默认字典与全局字典无需注册，直接使用即可 <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

@@ -1,88 +0,0 @@
-# 字典组件
-## 展示组件
-### 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

@@ -1,44 +0,0 @@
-# 配置文档
-
-## 基础配置项
-
-| 配置项       | 类型            | 默认值   | 说明                                       |
-| ------------ | --------------- | -------- | ------------------------------------------ |
-| 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

@@ -1,142 +0,0 @@
-# 基本使用
-
-##  基本使用
-
-`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

@@ -1,38 +0,0 @@
-# 详情模式
-
-`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

@@ -1,98 +0,0 @@
-# 基本使用
-
-## 概述
-
-数据格式化（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)} />;
-  }
-}
-```