feat: 优化文档、优化Demo，强化日期范围组件功能。

JackySoft · Sep 14, 2023 · 5515542 · 5515542
1 parent e59bc6d
commit 5515542
Show file tree

Hide file tree

Showing 15 changed files with 537 additions and 581 deletions.
diff --git a/docs/FormType.md b/docs/FormType.md
@@ -55,15 +55,17 @@
     data() {
       return {
         queryForm: {
-          status: 1,
-          type: 1,
+          name: '',
+          age: 0,
         },
         form: [
           {
             type: 'text',
-            model: 'user_name',
-            label: '用户名称',
+            model: 'name',
+            label: '名称',
             placeholder: '请输入用户名称',
+            // 控制组件宽度
+            width: '150px',
             /**
              * 所有组件自定义事件，可做异步操作，修改其它表单值
              * val 当前输入值
@@ -75,6 +77,17 @@
               values.type = 0;
             },
           },
+          {
+            type: 'text',
+            model: 'age',
+            label: '年龄',
+            width: '150px',
+            // 控制组件是否显示
+            show(values) {
+              if (values.name) return true;
+              return false;
+            },
+          },
         ],
       };
     },
@@ -108,18 +121,23 @@
             multiple: true, // 支持多选
             filterable: true, //支持输入过滤
             clearable: true,
-            change: this.getSelectList, // 自定义事件，回调接口
+            // 如果下拉框的值是动态的，可以使用fetchOptions获取，必须返回promise
+            fetchOptions: async () => {
+              return [
+                { name: '全部', id: 0 },
+                { name: '已注销', id: 1 },
+                { name: '老用户', id: 2 },
+                { name: '新用户', id: 3 },
+              ];
+            },
             // 字段映射，用来处理接口返回字段，避免前端去循环处理一次。
             field: {
               label: 'name',
               value: 'id',
             },
-            options: [
-              { name: '全部', id: 0 },
-              { name: '已注销', id: 1 },
-              { name: '老用户', id: 2 },
-              { name: '新用户', id: 3 },
-            ],
+            options: [],
+            // 如果想要修改其它表单值，可以通过change事件来处理
+            change: this.getSelectList,
           },
         ],
       };
@@ -141,57 +159,19 @@
 
 :::
 
-> field 为字段映射，下拉框默认使用 label 和 value 渲染，如果接口返回的不是 label 和 value，可以使用 field 进行转换，非常便捷。
+### 属性介绍
 
-:::demo
-
-```html
-<search-form :json.sync="form" :model.sync="queryForm" />
+| 参数       | 说明     | 类型    | 可选值     |            默认值             |
+| :--------- | :------- | :------ | :--------- | :---------------------------: |
+| filterable | 是否过滤 | Boolean | true/false |             true              |
+| clearable  | 是否清楚 | Boolean | true/false |             true              |
+| field      | 结构映射 | Object  | 无         | {label:'label',value:'value'} |
 
-<script>
-  export default {
-    data() {
-      return {
-        queryForm: {
-          userStatus: 1,
-        },
-        form: [
-          {
-            type: 'select',
-            model: 'userStatus',
-            label: '用户状态',
-            filterable: true,
-            // 字段映射
-            field: {
-              label: 'name',
-              value: 'id',
-            },
-            options: [],
-            // 如果下拉是动态的，可以使用此方式直接获取
-            fetchOptions: async () => {
-              return [
-                {
-                  name: '在职',
-                  id: 0,
-                },
-                {
-                  name: '离职',
-                  id: 1,
-                },
-              ];
-            },
-          },
-        ],
-      };
-    },
-  };
-</script>
-```
+> field 为字段映射，下拉框默认使用 label 和 value 渲染，如果接口返回的不是 label 和 value，可以使用 field 进行转换，非常便捷。
 
-:::
+> 如果要获取 SearchForm 中的下拉值，可以使用 this.form.$userStatus.options 或者 this.form[0].options。
 
-> 下拉框动态赋值可以使用 fetchOptions 函数直接调用接口进行返回，或者使用 this.form[0].options 动态赋值，还支持通过$拼接字段的方式快捷赋值。
-> 注意：rocket-form跟search-form结构不太一致，所以rocket-form中使用this.json.formList.$userStatus.options 的方式赋值或者取值。
+> 如果要获取 RocketForm 中的下拉值，可以使用 this.json.formList.$userStatus.options 或者 this.json.formList[0].options。因为两个组件的结构不一样。
 
 ## Date 组件
 
@@ -227,15 +207,7 @@
             type: 'datetime',
             label: '注册时间',
             model: 'register_datetime',
-            shortcuts: true,
-          },
-          {
-            type: 'datetimerange',
-            label: '时间范围',
-            model: 'register_datetime_range',
-            // 对于日期范围控件来说，一般接口需要拆分为两个字段，通过export可以很方便的实现字段拆分
-            export: ['startTime', 'endTime'],
-            shortcuts: true,
+            shortcuts: true, //显示快捷键
           },
         ],
       };
@@ -244,6 +216,8 @@
 </script>
 ```
 
+> 这里有一个非常实用的功能：日期范围默认赋值以后，组件会自动分解成两个字段，重置的时候，还能还原回去。
+
 :::
 
 ### type = date/daterange/datetime/datetimerange
@@ -291,7 +265,7 @@
 
 :::
 
-### type = checkbox
+### 属性介绍
 
 | 参数           | 说明     | 类型   | 可选值   | 默认值 |
 | :------------- | :------- | :----- | :------- | :----: | --- |
@@ -430,75 +404,6 @@
 
 :::
 
-> 用法同 ElementUI
-
-## type = select
-
-> `filterable` 和 `clearable` 默认为 true，增加字段转换
-
-field
-
-:::demo
-
-```html
-<search-form :json="form" :model.sync="queryForm" />
-<script>
-  export default {
-    data() {
-      return {
-        queryForm: {},
-        form: [
-          {
-            type: 'select',
-            model: 'user_status',
-            label: '用户状态',
-            change: this.getSelectList, // 自定义事件，回调接口
-            options: [
-              { label: '全部', value: 0 },
-              { label: '已注销', value: 1 },
-              { label: '老用户', value: 2 },
-              { label: '新用户', value: 3 },
-            ],
-          },
-          {
-            type: 'select',
-            model: 'order_status',
-            label: '订单状态',
-            options: [],
-          },
-        ],
-      };
-    },
-    methods: {
-      /**
-       * change回调
-       * @param {val} 当前值
-       * @param {values} 当前所有值
-       * @param {model} 当前model
-       */
-      getSelectList(val, values, model) {
-        // 可直接清空对应表单
-        values['order_status'] = '';
-        // 可直接对表单进行赋值，也可调用接口动态赋值
-        this.form[1].options = [
-          { label: '全部', value: 0 },
-          { label: '完成', value: 2 },
-          { label: '取消', value: 3 },
-        ];
-      },
-    },
-  };
-</script>
-```
-
-:::
-
-| 参数       | 说明     | 类型    | 可选值     |            默认值             |
-| :--------- | :------- | :------ | :--------- | :---------------------------: |
-| filterable | 是否过滤 | Boolean | true/false |             true              |
-| clearable  | 是否清楚 | Boolean | true/false |             true              |
-| field      | 结构映射 | Object  | 无         | {label:'label',value:'value'} |
-
 ## TimeSelect
 
 :::demo

diff --git a/docs/README.md b/docs/README.md
@@ -1,14 +1,22 @@
-# 介绍
+## 插件介绍
 
 Rocket 是一款面向 PC 端中后台的表单渲染组件解决方案。
 
 对于 PC 后台，有大量简单重复页面，为了更高效开发，我们基于 JSON 配置的方式动态生成 UI，包含查询表单、表格、动态表单、页面详情等；
 
+## 包含组件
+
 Rocket 包含四个组件：SearchForm、RocketForm、RocketTable、RocketDesc
 
-SearchForm：通过 json 快速构建查询表单，内置查询和重置按钮。
-RocketForm：增强版 form 表单，主要用于非查询表单，比如弹框内嵌表单、复杂页面表单、支持表单嵌套表格、表单联动、表单异步调用等。
-RocketTable：基于 json 快速构建表格功能，内置工具条等功能。
-RocketDesc：基于 json 快速构建页面详情信息，支持详情一键切换到编辑模式。
+1. SearchForm
+   通过 json 快速构建查询表单，内置查询和重置按钮。
+
+2. RocketForm
+   增强版 form 表单，主要用于非查询表单，比如弹框内嵌表单、复杂页面表单、支持表单嵌套表格、表单联动、表单异步调用等。
+
+3. RocketTable
+   基于 json 快速构建表格功能，内置工具条等功能。
+
+4. RocketDesc：基于 json 快速构建页面详情信息，支持详情一键切换到编辑模式。
 
 > 强调：rocket-render 一直在更新中，对应的组件文档可能更新不及时，大家可以通过 Release 文档查看每个版本更新内容。
diff --git a/docs/Release.md b/docs/Release.md
@@ -1,5 +1,13 @@
 # 版本说明
 
+## v2.3.9
+
+1. SearchForm 中的组件，增加 show 函数来控制是否展示。
+2. 优化文档，修复语法有问题的地方。
+3. 优化 Demo，修复报错的页面。
+4. RocketTable 组件中，操作栏按钮支持 permission 函数调用，以前是 boolean 类型。
+5. 修复日期范围、时间范围组件，如果设置了 export，在重置的时候，会自动删除该解构出来的字段，同时默认给日期范围组件赋值的时候，组件内部会自动解构。
+
 ## v2.3.6
 
 - 删除 SearchForm 组件的 grid 布局，因为不太实用、并且计算繁琐。

diff --git a/docs/RocketTable.md b/docs/RocketTable.md
@@ -55,10 +55,15 @@
             {
               type: 'primary',
               text: '新增',
+
+              permission: true,
             },
             {
               type: 'danger',
               text: '删除',
+              permission: () => {
+                return true;
+              },
             },
           ],
           columns: [
@@ -133,6 +138,7 @@
               width: '200px',
               fixed: 'right',
               list: [
+                // 根据status的值来显示不同的按钮名称
                 {
                   prop: 'status',
                   val: {
@@ -142,11 +148,12 @@
                       color: 'danger',
                     },
                   },
+                  // 控制按钮是否显示，默认使用boolean控制
                   permission: true,
                 },
                 {
                   text: '编辑',
-                  // 支持函数的形式判断是否显示
+                  // 也支持函数的形式判断是否显示
                   permission: (row) => {
                     return row.status == 1;
                   },
@@ -200,21 +207,28 @@
       },
       // 表格上操作按钮
       handleOperate({ text, index }) {
+        /**
+         * 支持两种方式：
+         * 1. 根据索引判断点击的是哪个按钮。
+         * 2. 根据文本判断点击的是哪个按钮。
+         */
         if (index === 0) {
-          this.$message.success('你点击第一个操作按钮');
-        } else if (index === 1) {
-          this.$message.success('你点击了第二个操作按钮');
+          this.$message.success('你点击新增操作按钮');
+        }
+        if (text === '删除') {
+          this.$message.success('你点击了删除操作按钮');
         }
       },
-      // action为点击的按钮索引，row为当前行的数据
+      // 表格中，列的操作按钮：index为点击的按钮索引，row为当前行的数据
       handleAction({ index, text, row }) {
-        // 也可以根据text的按钮文本来判断，因为索引不太可靠，有时候，删除一个按钮以后，索引会发生变化。
-        if (index === 0) {
-          this.$message.success('你选择了第一个按钮');
-        } else if (index === 1) {
-          this.$message.success('你选择了第二个按钮');
-        } else {
-          this.$message.success('你选择了第三个按钮');
+        // 方式一：根据文本判断
+        if (text === '禁用') this.$message.success(`你点击了表格中${text}按钮`);
+        // 方式二：根据索引判断，但是有一个弊端，如果列表按钮顺序发生变化，会导致索引错乱。
+        if (index === 1) {
+          this.$message.success('你点击了编辑按钮');
+        }
+        if (index === 2) {
+          this.$message.success('你点击了删除按钮');
         }
         console.log(row);
       },

diff --git a/docs/guide.md b/docs/guide.md
@@ -13,12 +13,28 @@ yarn add rocket-render -S
 import RocketRender from 'rocket-render';
 // 导入样式
 import 'rocket-render/lib/rocket-render.css';
+// 默认安装
 Vue.use(RocketRender);
+// 或者使用自定义属性，以下的值都是系统默认值，如果你的业务不同，可以配置下面的全局变量进行修改。
+Vue.use(RocketRender, {
+  size: 'small',
+  empty: '-',
+  inline: 'flex',
+  toolbar: true,
+  align: 'center',
+  stripe: true,
+  border: true,
+  pager: true,
+  pageSize: 20,
+  emptyText: '暂无数据',
+});
 ```
 
-3. 页面应用
+> 插件支持自定义属性，建议默认即可，我们已经给大家调好，如果确实想改，就通过自定义属性的方式进行修改。
 
-> 为了页面的美观，建议外层加一个容器。search-form 默认没有任何背景色和边距。
+3.  页面应用
+
+> search-form 自带背景色和内填充，如果你有特殊需要，可以添加 class 进行覆盖，另外建议给 model 添加 sync 修饰符。
 
 ```html
 <template>