@hbisty/qj-common 5.0.4 → 5.0.6

package/src/views/treeTemplate/treeTemplate.md

@@ -1,274 +1,274 @@
-
-####treeTemplate
->template都是基于element-ui模板进行封装的
-一、搜索栏 temInput
->**temInput**是一个Array，里面包含多个对象
->暂且支持类型：text、select、date、daterange、remoteSelect(下拉框的远程搜索)
-
-    {
-	    label:'标题',//可选参数
-	    type:'text',//类型 暂且支持text/select/data/daterange/autocomplete 类型同element一致
-		name:'name', //参数名称
-		value:'',//参数值，默认为空
-		placeholder:"请输入..." //可选参数，提示用语
-    }
-	
-	注意：
-	type == select
-	参数属性多一个options
-	type == daterange
-	参数属性name:"startDate,endDate"
-	type === textMore
-	表示多个
-	{
-          type: "textMore",
-          label: "价格区间",
-          children: [
-            {
-              name: "projectMinprice",
-              placeholder: "请输入最小价格",
-              value: ""
-            },
-            {
-              name: "projectMaxprice",
-              placeholder: "请输入最大价格",
-              value: ""
-            }
-          ]
-        },
-		type=== autocomplete //表示text可远程搜索
-		{
-          type: "autocomplete",
-          name: "classtreeName",
-          label: "搜索",
-          placeholder: "请输入产品编号",
-          restaurants: [
-            { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
-          ],
-          value: ""
-        },
-	
-	temInput的按钮操作
-	属性名称为btnArray:[]
-	{
-		type:'primary',//按钮类型，同element-ui的一致
-		id:'query',//操作的id  id的类型query/search,add
-		label:"搜索",
-		url:"",//搜索的url暂且是定义的全局
-	}
-	当id == 'add',表示需要新增模板
-	需要添加属性
-	template:{
-		type: "json", //json类型暂且只支持json类型的
-        label: "编辑标题",
-        formLabelWidth: "6rem", //长度根据标题长度来，一个字一个rem
-        html:[],//具体详见模板二 input
-	};
-	type === cascader
-	value:[],
-	{
-          type: "cascader",
-          name: "classtreeName",
-          label: "产品分类",
-          showAllLevels:false,//可选参数，判断是否是取最后一集
-          placeholder: "请选择产品分类",
-           props: {
-             value: "value",
-             label: "label",
-             children: "children"
-          },
-          value: [],
-    }
-	
-		
-
-
-
-
-例子:
-
-    temInput:[{
-	    label: "标题",//自定义 title=>label 
-	    type: "text",//类型，暂且只支持text/select/date/daterange/button
-	    name: "name",//参数名称
-		value: "",//值
-	    placeholder: "请输入"//默认提示语，可选参数
-	},
-	{
-	    label: "标题",//自定义
-	    type: "select",//select类型包含options对象，参数label和value
-	    name: "name",//参数名称
-		value: "",//值
-	    placeholder: "请输入"//默认提示语，可选参数
-	    props:{ //可选参数，正对select所需要的label和value
-		    label:'name',
-		    value:'code'
-	    },	    
-	    options:[
-		    {
-			    label:'',
-			    value:''
-		    }
-	    ]
-	},
-	{
-          type: "autocomplete",
-          name: "classtreeName",
-          label: "搜索",
-          placeholder: "请输入产品编号",
-          restaurants: [
-            { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
-          ],
-          value: ""
-    },
-    {
-      label: "标题",    
-      name: 'userPcode', //参数名称
-      type: 'remoteSelect',
-      placeholder: "请输入关键字",
-      value: '',
-      url: '/web/um/userserviceinfo/queryUserinfoservicePage.json',  // 远程搜索所需的url
-      searchParam: 'userinfoCompname',  //远程搜索带的参数名称，值为当前输入的值
-      props: {   //可选参数，正对select所需要的label和value
-        label: 'userinfoCompname',
-        value: 'userinfoCode'
-      }
-    },
-	{
-		btnArray:[ //按钮的对象数组-搜索
-		{
-			type:'primary',//按钮类型，和element-ui类型一致
-			id:'query',//id类型，query表示搜索，add-新增，del-删除 query-搜索 其他不确定类型抛出inputBtnClick（"整个按钮对象","索引值"）方法进行操作
-			label:"搜索",
-			url:''
-		},
-		{
-			type:"primary",
-			id:'add',
-			label:"新增",//当为新增的时候，需使用模板，url是写在模板里面的
-			template:{
-				type: "json", //json类型暂且只支持json类型的
-                title: "编辑标题",
-                formLabelWidth: "6rem", //长度根据标题长度来，一个字一个rem
-                html:[
-                {
-	                label: "名称",
-                    type: "text",//类型暂且只支持text/upload/textarea/select/date
-                    value: "",
-                    name: "brandName"
-                },
-                {
-                  label: "logo",
-                  showFileList: false, //false为单个图片.暂且只支持单个图片编辑
-                  type: "upload",
-                  value: "",
-                  name: "brandLogo"
-                },
-                {
-                  btnArray: [
-                      //id类型，query表示搜索，add-新增，confirm-确定(一般属于编辑里面的)，cancel-取消，del-删除 query-搜索 其他不确定类型抛出inputBtnClick（"整个按钮对象","索引值"）方法进行操作
-                      {
-                        label: "取消", value=>label
-                        id: "cancel"
-                      },
-                      {
-                        type: "primary",
-                        label: "确定",
-                        id: "add",
-                        url: "/web/rs/brand/saveBrand.json"
-                      }
-                    ]
-                },
-                ],
-                rules: {}//规则，和element一致
-			}
-		}
-		]
-	}]
-
-#####二、queryPara (查询所需的默认参数)
-
-     queryPara: {
-       classtreeParentcode: '-1'
-     },
-
-#####三、显示temTree
->**temTree**是一个对象，包含treeHeader（头部），filter（是否开启查询），treeBtn（右侧按钮），props，indent（tree层级缩进的宽度，默认16）
-例子:
-
-    temTree: {
-        treeHeader: [
-          {
-            name: '分类名称',
-            type: 'first',
-            width: '30%'   // 头部展示的宽度（支持px 和%）
-          },
-          {
-            name: '排序',
-            value: 'tenantCode',
-            width: '20%'
-          },
-          {
-            name: '排序',
-            value: 'tenantCode',
-            width: '20%'
-          },
-          {
-            name: '操作',
-            type: 'button'
-          }
-        ],
-        treeBtn: [
-          {
-            label: '添加子分类',
-            id: 'add',
-            level: 3    //在node的level >=3时不显示该按钮，不填默认都显示
-          },
-          {
-            label: '编辑',
-            id: 'edit'
-          },
-          {
-            label: '删除',
-            id: 'del', // 表示删除
-            type: "danger", //和element一致
-            promptTitle: "确定删除吗？", //提示内容，可选参数,不填则不给提示
-            url: '/web/rs/classtree/deleteClasstree.json', 
-            params: {   //删除带的参数
-              classtreeId: ""
-            },
-          }
-        ],
-        props: {
-          label: 'classtreeName', //指定节点标签为节点对象的某个属性值
-          children: 'childList'  //指定子树为节点对象的某个属性值
-        },
-        indent: 40   //相邻级节点间的水平缩进，单位为像素
-    },
-
-
-#####节点加载数据的方式nodeLoad 
- 
-    nodeLoad: {
-        lazy: true,   //是否懒加载，默认为false
-        id: 'classtreeCode',  //每个树节点用来作为唯一标识的属性，整棵树应该是唯一的（必填）
-        url: 'web/rs/classtree/queryClasstreePage.json',   //加载数据的url（必须）
-        params: [{   //懒加载的传入参数，name为传入的参数名称，value为在当前节点取的数据值
-          name: 'classtreeParentcode',
-          value: 'classtreeCode'
-        }]
-    } 
-
-#####参数
-| 参数 | 说明 | 类型 | 状态 |
-| :--: | :-------:| :--: | :---: |
-| temInput | 查询框 | Array | 可选 | 
-| queryPara | 获取tree数据的默认参数，<br/>无论是否是懒加载，第一次加载数据会带上该参数 | Object | 必填 | 
-| treeTable | table 数据显示 | Array | 可选 |
-| nodeLoad | 控制树节点的加载方式 | Object | 必填 |
-
-#####API
-| 事件名称 | 说明 | 回调参数 | 例子 |
-| :--------: | :--------:| :--: | :--: |
-|inputBtnClick| temInput 里面其他按钮操作 | (data, index)|-|
-|treeBtnClick| item为当前点击的按钮信息<br>val为当前点击的节点数据信息<br>node为当前点击的节点信息<br> | (item, val, node)|-|
+
+####treeTemplate
+>template都是基于element-ui模板进行封装的
+一、搜索栏 temInput
+>**temInput**是一个Array，里面包含多个对象
+>暂且支持类型：text、select、date、daterange、remoteSelect(下拉框的远程搜索)
+
+    {
+	    label:'标题',//可选参数
+	    type:'text',//类型 暂且支持text/select/data/daterange/autocomplete 类型同element一致
+		name:'name', //参数名称
+		value:'',//参数值，默认为空
+		placeholder:"请输入..." //可选参数，提示用语
+    }
+	
+	注意：
+	type == select
+	参数属性多一个options
+	type == daterange
+	参数属性name:"startDate,endDate"
+	type === textMore
+	表示多个
+	{
+          type: "textMore",
+          label: "价格区间",
+          children: [
+            {
+              name: "projectMinprice",
+              placeholder: "请输入最小价格",
+              value: ""
+            },
+            {
+              name: "projectMaxprice",
+              placeholder: "请输入最大价格",
+              value: ""
+            }
+          ]
+        },
+		type=== autocomplete //表示text可远程搜索
+		{
+          type: "autocomplete",
+          name: "classtreeName",
+          label: "搜索",
+          placeholder: "请输入产品编号",
+          restaurants: [
+            { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
+          ],
+          value: ""
+        },
+	
+	temInput的按钮操作
+	属性名称为btnArray:[]
+	{
+		type:'primary',//按钮类型，同element-ui的一致
+		id:'query',//操作的id  id的类型query/search,add
+		label:"搜索",
+		url:"",//搜索的url暂且是定义的全局
+	}
+	当id == 'add',表示需要新增模板
+	需要添加属性
+	template:{
+		type: "json", //json类型暂且只支持json类型的
+        label: "编辑标题",
+        formLabelWidth: "6rem", //长度根据标题长度来，一个字一个rem
+        html:[],//具体详见模板二 input
+	};
+	type === cascader
+	value:[],
+	{
+          type: "cascader",
+          name: "classtreeName",
+          label: "产品分类",
+          showAllLevels:false,//可选参数，判断是否是取最后一集
+          placeholder: "请选择产品分类",
+           props: {
+             value: "value",
+             label: "label",
+             children: "children"
+          },
+          value: [],
+    }
+	
+		
+
+
+
+
+例子:
+
+    temInput:[{
+	    label: "标题",//自定义 title=>label 
+	    type: "text",//类型，暂且只支持text/select/date/daterange/button
+	    name: "name",//参数名称
+		value: "",//值
+	    placeholder: "请输入"//默认提示语，可选参数
+	},
+	{
+	    label: "标题",//自定义
+	    type: "select",//select类型包含options对象，参数label和value
+	    name: "name",//参数名称
+		value: "",//值
+	    placeholder: "请输入"//默认提示语，可选参数
+	    props:{ //可选参数，正对select所需要的label和value
+		    label:'name',
+		    value:'code'
+	    },	    
+	    options:[
+		    {
+			    label:'',
+			    value:''
+		    }
+	    ]
+	},
+	{
+          type: "autocomplete",
+          name: "classtreeName",
+          label: "搜索",
+          placeholder: "请输入产品编号",
+          restaurants: [
+            { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
+          ],
+          value: ""
+    },
+    {
+      label: "标题",    
+      name: 'userPcode', //参数名称
+      type: 'remoteSelect',
+      placeholder: "请输入关键字",
+      value: '',
+      url: '/web/um/userserviceinfo/queryUserinfoservicePage.json',  // 远程搜索所需的url
+      searchParam: 'userinfoCompname',  //远程搜索带的参数名称，值为当前输入的值
+      props: {   //可选参数，正对select所需要的label和value
+        label: 'userinfoCompname',
+        value: 'userinfoCode'
+      }
+    },
+	{
+		btnArray:[ //按钮的对象数组-搜索
+		{
+			type:'primary',//按钮类型，和element-ui类型一致
+			id:'query',//id类型，query表示搜索，add-新增，del-删除 query-搜索 其他不确定类型抛出inputBtnClick（"整个按钮对象","索引值"）方法进行操作
+			label:"搜索",
+			url:''
+		},
+		{
+			type:"primary",
+			id:'add',
+			label:"新增",//当为新增的时候，需使用模板，url是写在模板里面的
+			template:{
+				type: "json", //json类型暂且只支持json类型的
+                title: "编辑标题",
+                formLabelWidth: "6rem", //长度根据标题长度来，一个字一个rem
+                html:[
+                {
+	                label: "名称",
+                    type: "text",//类型暂且只支持text/upload/textarea/select/date
+                    value: "",
+                    name: "brandName"
+                },
+                {
+                  label: "logo",
+                  showFileList: false, //false为单个图片.暂且只支持单个图片编辑
+                  type: "upload",
+                  value: "",
+                  name: "brandLogo"
+                },
+                {
+                  btnArray: [
+                      //id类型，query表示搜索，add-新增，confirm-确定(一般属于编辑里面的)，cancel-取消，del-删除 query-搜索 其他不确定类型抛出inputBtnClick（"整个按钮对象","索引值"）方法进行操作
+                      {
+                        label: "取消", value=>label
+                        id: "cancel"
+                      },
+                      {
+                        type: "primary",
+                        label: "确定",
+                        id: "add",
+                        url: "/web/rs/brand/saveBrand.json"
+                      }
+                    ]
+                },
+                ],
+                rules: {}//规则，和element一致
+			}
+		}
+		]
+	}]
+
+#####二、queryPara (查询所需的默认参数)
+
+     queryPara: {
+       classtreeParentcode: '-1'
+     },
+
+#####三、显示temTree
+>**temTree**是一个对象，包含treeHeader（头部），filter（是否开启查询），treeBtn（右侧按钮），props，indent（tree层级缩进的宽度，默认16）
+例子:
+
+    temTree: {
+        treeHeader: [
+          {
+            name: '分类名称',
+            type: 'first',
+            width: '30%'   // 头部展示的宽度（支持px 和%）
+          },
+          {
+            name: '排序',
+            value: 'tenantCode',
+            width: '20%'
+          },
+          {
+            name: '排序',
+            value: 'tenantCode',
+            width: '20%'
+          },
+          {
+            name: '操作',
+            type: 'button'
+          }
+        ],
+        treeBtn: [
+          {
+            label: '添加子分类',
+            id: 'add',
+            level: 3    //在node的level >=3时不显示该按钮，不填默认都显示
+          },
+          {
+            label: '编辑',
+            id: 'edit'
+          },
+          {
+            label: '删除',
+            id: 'del', // 表示删除
+            type: "danger", //和element一致
+            promptTitle: "确定删除吗？", //提示内容，可选参数,不填则不给提示
+            url: '/web/rs/classtree/deleteClasstree.json', 
+            params: {   //删除带的参数
+              classtreeId: ""
+            },
+          }
+        ],
+        props: {
+          label: 'classtreeName', //指定节点标签为节点对象的某个属性值
+          children: 'childList'  //指定子树为节点对象的某个属性值
+        },
+        indent: 40   //相邻级节点间的水平缩进，单位为像素
+    },
+
+
+#####节点加载数据的方式nodeLoad 
+ 
+    nodeLoad: {
+        lazy: true,   //是否懒加载，默认为false
+        id: 'classtreeCode',  //每个树节点用来作为唯一标识的属性，整棵树应该是唯一的（必填）
+        url: 'web/rs/classtree/queryClasstreePage.json',   //加载数据的url（必须）
+        params: [{   //懒加载的传入参数，name为传入的参数名称，value为在当前节点取的数据值
+          name: 'classtreeParentcode',
+          value: 'classtreeCode'
+        }]
+    } 
+
+#####参数
+| 参数 | 说明 | 类型 | 状态 |
+| :--: | :-------:| :--: | :---: |
+| temInput | 查询框 | Array | 可选 | 
+| queryPara | 获取tree数据的默认参数，<br/>无论是否是懒加载，第一次加载数据会带上该参数 | Object | 必填 | 
+| treeTable | table 数据显示 | Array | 可选 |
+| nodeLoad | 控制树节点的加载方式 | Object | 必填 |
+
+#####API
+| 事件名称 | 说明 | 回调参数 | 例子 |
+| :--------: | :--------:| :--: | :--: |
+|inputBtnClick| temInput 里面其他按钮操作 | (data, index)|-|
+|treeBtnClick| item为当前点击的按钮信息<br>val为当前点击的节点数据信息<br>node为当前点击的节点信息<br> | (item, val, node)|-|