backend-management-ui 1.1.2 → 1.1.4

package/README.md

@@ -0,0 +1,178 @@
+# backend-management-ui
+
+一个基于 ElementUI 封装的 Vue2 后台管理组件库，简化后台开发中表格、表单、弹窗、按钮组、虚拟下拉框等高频组件的使用。
+
+## 特性
+- 基于ElementUI的二次封装，无缝兼容ElementUI原有功能
+- 简化配置：表格/表单/按钮组通过配置快速生成，无需重复写模板
+- 高频场景覆盖：表格/表单/按钮组/虚拟下拉框等
+- 兼容 Vue2.6.x + ElementUI 2.15.x，无额外依赖。
+
+## 安装
+npm 安装
+
+`npm install backend-management-ui --save`
+
+yarn 安装
+
+`yarn add backend-management-ui`
+
+## 快速上手
+全局引入
+``` markdown
+``` js
+// main.js
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import BackendManagementUI from 'backend-management-ui'
+
+Vue.use(ElementUI)
+Vue.use(BackendManagementUI) // 全局注册所有组件
+```
+
+按需引入
+```markdown
+```js
+// main.js
+import Vue from 'vue'
+import { UiTable, UiForm } from 'backend-management-ui'
+// 全局注册单个组件
+Vue.component('UiTable', UiTable)
+
+// 组件内
+import { UiTable, UiForm } from 'backend-management-ui'
+export default {
+  components: {
+    UiTable,
+    UiForm
+  }
+}
+```
+
+## 组件示例和文档
+
+### ui-form 表单
+使用el-form进行的二次封装
+
+基本用法
+
+#### 典型表单
+![alt text](image.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>
+```
+
+#### 典型展示表单
+![alt text](image-1.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;