|
|
@@ -87,4 +87,101 @@ Vue.use(DrawFlow);
|
|
|
| data | 拓展属性，用以存储业务相关内容 | object | -- | {} |
|
|
|
| pids | 流程图生成过程中生成属性，指明此节点父节点数组 | Array<'string'> | -- | -- |
|
|
|
|
|
|
+# SelectBox 树状选择组件
|
|
|
+## 废话不多说 先贴图
|
|
|
+[这里是git地址 ](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/selectBoxCom/)
|
|
|
+
|
|
|
+ ### 树状选择效果图
|
|
|
+<img src="./selectBox.jpg"/>
|
|
|
+
|
|
|
+ ### 列表多选效果图
|
|
|
+<img src="./selectList.jpg" />
|
|
|
+
|
|
|
+## 开始废话
|
|
|
+### 开发背景
|
|
|
+#### 众所周知，大部分企业的管理后台的开发离不开权限管理，一般来说，我们会分析各种权限把他们量化为资源，然后分配到各个角色/部门中，然后再给用户赋予各种角色或者挂载到各个部门。 如果权限设计的足够复杂，第三方UI常用的穿梭框等组件就不能完美的满足我们的需求，进而需要开发人员去根据需求，寻找多个组件组合使用。 但是，里面的业务逻辑万变不离其宗。 接下来 介绍一下笔者写的这款树状选择组件。
|
|
|
+#### 简单来说组件分为左右两个模块 左侧为选择树（例如 部门-角色树 用户-权限树）或者多选列表。 右侧为已选数据。 点击保存 会返回三个数据，依次为 本次修改新增的数组ID 本次修改删除的数组ID 以及 所选择的所有数据ID集合
|
|
|
+
|
|
|
+最后给我的老东家打个广告，金现代企业股份有限公司做的项目真的不错，在里面带的一年里，成长很多。在此感恩
|
|
|
+## 接下来是组件的使用文档
|
|
|
+
|
|
|
+# selectBox
|
|
|
+
|
|
|
+### 使用方法
|
|
|
+
|
|
|
+```javascript
|
|
|
+ // 首先把组件从git上down下来 然后引用到项目里，在项目里use一下
|
|
|
+ import selectBox from "@/components/selectBox";
|
|
|
+ Vue.use(selectBox);
|
|
|
+```
|
|
|
+### Attributes
|
|
|
+| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
|
|
+|------------------|---------------------------------------------------------------------------------------|-----------------|----------|---------------|--------------|
|
|
|
+| allNode | 所有的节点数据 | Array[TreeNode] | true | -- | [] |
|
|
|
+| checkedNode | 已选择的节点Id集合 | Array[String] | true | -- | [] |
|
|
|
+| defaultProps | 配置选项，具体看下表 | Object | false | -- | -- |
|
|
|
+| listStyle | 右侧展示方式类型 | String | false | 'tree'/'list' | 'tree' |
|
|
|
+| boxDialogVisible | 是否展示弹出框 | Boolean | true | true/false | false |
|
|
|
+| iconConfig | 图标配置（里面有必填属性，起名不准确，之后会改，是一个依赖项） | iconConfig | true | -- | iconConfig |
|
|
|
+| title | 对话框标题 | String | true | -- | "权限控制" |
|
|
|
+| rightKey | 右侧列表显示所对应数据里面key的属性（本来默与左侧显示一样，但确实有不一样的场景，就很蛋疼） | String | false | -- | "name" |
|
|
|
+| searchConfig | 搜索框配 见下表置 | Object | false | -- | searchConfig |
|
|
|
+| indep | 树状图时叶子节点改变时，是否不与父节点产生关联 | Boolean | false | true/false | false |
|
|
|
+### Events
|
|
|
+
|
|
|
+| 事件名称 | 说明 | 回调参数
|
|
|
+|------|------|------|
|
|
|
+| close | 当组件关闭时触发 | null
|
|
|
+| save | 点击保存时触发 | 返回三个参数(addList,deleteList,checkedNode)，依次为:本次修改后应该新增的Id数组，本次修改后应该删除的Id数组，本次修改后所有选中的数据集合
|
|
|
+
|
|
|
+### props
|
|
|
+| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
|
|
+|----------|-------------------------------------------------------|-------------------------------|----------|--------|------------|
|
|
|
+| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | true | -- | 'id' |
|
|
|
+| children | 指定子树为节点对象的某个属性值 | string | true | -- | 'children' |
|
|
|
+| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) | true | -- | -- |
|
|
|
+| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) | true | -- | -- |
|
|
|
+### TreeNode
|
|
|
+| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
|
|
+|------|--------------------------------------------------------------------------------|--------|----------|--------|--------|
|
|
|
+| id | 默认的节点唯一标识，如果需要更改 请参照element-ui的tree组件的props属性，或者看上表 | String | true | -- | -- |
|
|
|
+| name | 左侧展示值，如果需要更改 请参照element-ui的tree组件的props属性，或者看上表 | String | true | -- | -- |
|
|
|
+| type | 节点类型，用来过滤父级节点 | String | true | -- | -- |
|
|
|
+| pid | 父节点ID，如果是根节点请设置为null | String | true | -- | -- |
|
|
|
+
|
|
|
+### iconConfig
|
|
|
+| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
|
|
+|--------------|----------------------------|--------|----------|--------|---------------------------------------------|
|
|
|
+| parentType | 左侧为树状图时父节点图标配置 | Object | true | -- | {key:'pre',icon:'el-icon-tree-rGroup'} |
|
|
|
+| childrenType | 左侧为树状图时子节点图标配置 | Object | true | -- | {key:'permission',icon:'el-icon-tree-role'} |
|
|
|
+<h4> 在这里解释一下，组件里会根据父节点配置的key的值，与节点数据里面的type做对比，从而过滤掉选中的父节点。<h4/>
|
|
|
+<h4> 因为很多业务场景下，右侧的列表只希望展示选中的子节点，<h4/>
|
|
|
+<h4> 如果需要展示选中的父级节点，可以把parentType里面的key设置为空<h4/>
|
|
|
+
|
|
|
+### searchConfig
|
|
|
+| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
|
|
+|-------|-----------------------------------------------------|---------|----------|------------|----------|
|
|
|
+| title | 其实就是placeholder啦~ | String | false | -- | '请输入' |
|
|
|
+| http | 这是你项目中搜索所调用的接口，接受一个默认参数（params） | Promise | true | -- | -- |
|
|
|
+| show | 是否显示搜索框,如果是false，其他的都可以不传 | Boolean | false | true/false | true |
|
|
|
+| key | 搜索时用到的关键词 | String | true | -- | 'name' |
|
|
|
+```javaScript
|
|
|
+// 可能比较难理解，在这里演示一下 searchConfig，在项目里有demo 可以拉下来看一下
|
|
|
+/**
|
|
|
+ * 例如你的调用查询接口为 this.$axios ，且this.$axios接受一个参数
|
|
|
+ 参数形式为
|
|
|
+ @params : data:{params:{key:value}}
|
|
|
+ @key ： searchConfig所配置的key
|
|
|
+*/
|
|
|
+const getData = params => {
|
|
|
+ this.$axios(params).then(res=>{
|
|
|
+
|
|
|
+ })
|
|
|
+};
|
|
|
+let searchConfig = {
|
|
|
+ http:this.getData,
|
|
|
+ key:'name'
|
|
|
+}
|
|
|
+
|
|
|
+```
|
|
|
|
xiaoyang