backend-management-ui 1.1.3 → 1.1.5

package/README.md

@@ -10,9 +10,11 @@
 
 ## 安装
 npm 安装
+
 `npm install backend-management-ui --save`
 
-### yarn 安装
+yarn 安装
+
 `yarn add backend-management-ui`
 
 ## 快速上手
@@ -49,6 +51,128 @@ export default {
 ```
 
 ## 组件示例和文档
-1、ui-form
 
+### ui-form 表单
+使用el-form进行的二次封装
+
+基本用法
+
+#### 典型编辑型表单
+![典型编辑型表单效果图](https://gitee.com/vladimir-adolf/backend-management/blob/master/src/assets/form-edit.png "组件展示")
+``` markdown
+``` js
+    <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" ></ui-form>
+    <script>
+        export default {
+            data() {
+                return {
+                    searchForm: {
+                        orderNo: null,
+                        status: null
+                    },
+                    formConfig: [
+                        {
+                            label: '订单号',
+                            prop: 'orderNo',
+                            component: 'el-input'
+                        },
+                        {
+                            label: '状态',
+                            prop: 'status',
+                            component: 'el-select',
+                            options: [
+                                {label: '成功', value: 0},
+                                {label: '失败', value: 1}
+                            ]
+                        }
+                    ]
+                }
+            }
+        }
+    </script>
+```
+
+#### 典型展示表单
+![典型展示型表单效果图](https://gitee.com/vladimir-adolf/backend-management/blob/master/src/assets/form-view.png "组件展示")
+``` markdown
+``` js
+    <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" :showOperateBtn="false">
+    <template #item-orderNo="{ item, model, index }">
+        <span>{{ model.orderNo }}</span>
+    </template>
+    <template #item-status="{ model }">
+        <span>{{ model.orderNo }}</span>
+    </template>
+    </ui-form>
+    <script>
+        export default {
+            data() {
+                return {
+                    searchForm: {
+                        orderNo: "订单好xx",
+                        status: "成功"
+                    },
+                    formConfig: [
+                        {
+                            label: '订单号',
+                            prop: 'orderNo',
+                        },
+                        {
+                            label: '状态',
+                            prop: 'status',
+                        }
+                    ]
+                }
+            }
+        }
+    </script>
+```
+
+#### 下拉类型接口获取数据
+
+``` markdown
+``` js
+    // 或者 :apiMapConfig="{ status: statusApi }"
+    <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" ></ui-form>
+    import { statusApi } from "@/api/status"
+    <script>
+        export default {
+            data() {
+                return {
+                    searchForm: {
+                        orderNo: null,
+                        status: null
+                    },
+                    formConfig: [
+                        {
+                            label: '订单号',
+                            prop: 'orderNo',
+                            component: 'el-input'
+                        },
+                        {
+                            label: '状态',
+                            prop: 'status',
+                            component: 'el-select',
+                            api: statusApi,
+                            {/* 或者 */}
+                            {/* api: {
+                                url: statusApi,
+                                params: {
+                                    page: 1,
+                                    pageSize: 10,
+                                }
+                            } */}
+                        }
+                    ]
+                }
+            }
+        }
+    </script>
+```
+
+#### props
 
+| 参数      | 说明        | 类型      | 可选值  | 默认值     |
+| --------- | ----------- | -------- | ------ | --------- |
+| formRef  | form的实例   | string   | -      | formRef    |
+| model    | 表单数据对象  | object   | -      | {}         |

package/backend-management-ui.common.js

@@ -4386,7 +4386,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/elementConfig/ui-form/index.vue?vue&type=template&id=00f21375
+;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/elementConfig/ui-form/index.vue?vue&type=template&id=14a78aef
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -4444,7 +4444,7 @@ var render = function render() {
         return _vm.resetForm();
       }
     }
-  }, [_vm._v("重置")]), _c('el-button', {
+  }, [_vm._v(_vm._s(_vm.resetText))]), _c('el-button', {
     attrs: {
       "type": "primary"
     },
@@ -4453,7 +4453,7 @@ var render = function render() {
         return _vm.$emit('search');
       }
     }
-  }, [_vm._v("搜索")])] : _vm._e(), _vm._t("customBtn")], 2) : _vm._e()], 2);
+  }, [_vm._v(_vm._s(_vm.searchText))])] : _vm._e(), _vm._t("customBtn")], 2) : _vm._e()], 2);
 };
 var staticRenderFns = [];
 
@@ -4509,6 +4509,14 @@ const componentMap = {
       type: Boolean,
       default: true
     },
+    resetText: {
+      type: String,
+      default: '重置'
+    },
+    searchText: {
+      type: String,
+      default: '搜索'
+    },
     apiMapConfig: {
       // { [prop]: [api] } 或 {[prop]: {url: [api], params: [params]}}
       type: Object,
@@ -4555,8 +4563,7 @@ const componentMap = {
       if (componentName === "virtual-select") {
         return {
           ...baseAttrs,
-          options: item.options || [],
-          listClass: "111w"
+          options: item.options || []
         };
       }
       return baseAttrs;