qj-happy-common-zhongjian 1.0.27

package/src/views/templates/templateReadme.md

@@ -0,0 +1,620 @@
+
+####templateReadme
+>template都是基于element-ui模板进行封装的
+一、搜索栏 temInput
+>**temInput**是一个Array，里面包含多个对象
+>暂且支持类型：text、select、date、daterange
+11111
+
+    {
+	    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: ""
+        },
+	{
+		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一致
+			}
+		}
+		]
+	}]
+
+#####二、显示temTab
+
+    temTab: {
+        tabPane: [
+          {
+            label: "操作一",
+            name: "参数",
+            value: ""
+          }
+        ]
+      },
+
+#####三、显示temTable
+>**temTable**是一个对象，包含selection，tableHead，()tableData,可选)，tableBtn，tabBtnWidth（操作的宽度）
+>**tableBtn**:
+
+    temTable: {
+	    selection: {
+			state: true,
+			params: [] //单选的参数
+        }, //表示有单选，可选参数
+        tableHead:[
+        {
+	       prop: "brandName", //基础参数
+		     label: "品牌名称"，//基础参数
+		     splicing: ["brandLogo","contractInmoney", "goodsNum"], //参数可选，表示需要拼接
+         imgType: 0 //当表示有图片的时候，显示，值表示图片的位置 可选参数,
+         renderTemp: this.renderContent  // 可选参数  自定义表格展示的方法 (优先级最高,会覆盖其他参数)
+        },
+        {
+	       prop: "brandName", //基础参数
+		   label: "品牌名称"，//基础参数
+		   splicing: ["brandLogo","contractInmoney", "goodsNum"], //参数可选，表示需要拼接
+        },
+        {
+	       prop: "brandName", //基础参数
+		   label: "品牌名称"，//基础参数
+           pair: [//表示需要键值对显示的
+              {
+                key: "用户名",
+                prop: "memberBname"
+              },
+              {
+                key: "收件人",
+                prop: "goodsReceiptMem"
+              },
+              {
+                key: "手机号",
+                prop: "goodsReceiptPhone"
+              }
+           ], //需要以键值对显示，//可选参数
+           width:150,//可选参数 
+        }，
+        {
+            prop: "gmtCreate", 
+            label: "下单时间",
+            template: "format"//日期类型，做转换
+          },
+          {
+            prop: "dataState",
+            label: "订单状态",
+            template: { //特殊类型转换的
+              "-1": "已取消",
+              "0": "审核",
+              "1": "待付款",
+              "2": "待发货",
+              "3": "已发货",
+              "4": "已完成",
+              "5": "交易成功"
+            }
+          },
+          {props:['']} //表示为数组，多个数据无缝拼接，例如省市区地址
+		],
+		//tableData: [],优化已删除
+		tableBtn:[
+		{
+			label: "查看详情", name=>label
+            state: true, //不可与stateType同时出现
+            dataState: "1", //判断是否显示
+            stateType:{ --已取消 //不可与state，dataState同时出现 用的是‘或’，当有一个为true，那就显示 
+				name: 'userType',
+				data: [0,1]
+			},//根据类型数据判断是否显示，name为类型，data是类型显示的类型数据的状态，data数据为空则都不显示，参数不存在则不考虑
+            id: "see", //表示查看详情
+            type:"primary",//和element一致
+            template: {
+              type: "json", //表示json类型//可选,
+              title: "查看详情",
+              html: [
+              {
+	              type:'img',//可选参数，表示有图片
+	              title:'标题内容',
+	              con:"内容" //图片的url
+              },
+              {
+                  label: "注册时间",
+                  name: "gmtCreate",
+                  type: "text",
+                  value: "",
+                  template: "foramte"
+                },
+              {
+                  label: "商家类型",
+                  name: "userinfoType",
+                  type: "text",
+                  value: "",
+                  template: {
+                    "1": "个人",
+                    "2": "公司"
+                  }
+                },
+                { //查看需要根据状态值是否显示，添加state一系列
+                  label: "公司名称",
+                  name: "userinfoCompname",
+                  type: "text",
+                  value: "",
+                  state: "2",
+                  stateName: "userinfoType",
+                  stateValue: ""
+                }
+              ]              
+              
+            }
+		},
+		{
+            dropdown: true, // 可选参数，表示在此后面的按钮是需要折叠的
+            dropdowMenu: [
+              {
+                label: "取消订单",
+                dataState: "1", //判断是否显示
+                id: "cancel", //表示查看详情,需要自定义
+                type: "danger", //和element一致
+                prompt：false,//可选参数，为false不显示提示框
+                promptTitle: "是否确定付款！", //提示内荣，可选参数,不填则不给提示
+                params: {
+                  contractId: ""
+                },
+                url: "/web/oc/contract/offlinePayContractState.json",
+              },
+              {
+                label: "修改状态",
+                state: true, //可选参数表示全部都显示
+                id: "modify", //表示查看详情,需要自定义
+                type: "primary" //和element一致
+              }
+            ]
+          }
+		 {
+            label: "查看", name=>label
+            state: true,
+            id: "see", //表示查看
+            //color: "",可选
+            template: {
+              type: "json", //表示json类型//可选,
+              labelWidth: 100,
+              title: "查看商家详情"
+              html:[
+	              {
+                  label: "站点名称",
+                  type: "text", //现在支持text/select/img
+                  name: "tginfoName",
+                  value: ""
+                },
+                {
+                  label: "产品",
+                  type: "select",
+                  name: "proappCode",
+                  template: {
+                    "001": "设计师A",
+                    "002": "设计师B",
+                    "003": "设计师C"
+                  },
+                  value: ""
+                },
+                {
+                  label: "热门关键词",
+                  type: "text",
+                  name: "tginfoKey",
+                  value: ""
+                },
+                {
+                  label: "主域名",
+                  type: "text",
+                  name: "tginfoCompanyurl",
+                  value: ""
+                },
+                {
+                  label: "二级域名",
+                  type: "text",
+                  name: "tginfoExchangeurl",
+                  value: ""
+                },
+                {
+                  label: "模板",
+                  type: "select",
+                  name: "mmodulCode",
+                  template: {
+                    "1": "设计师A",
+                    "2": "设计师B",
+                    "3": "设计师C"
+                  },
+                  value: ""
+                },
+                {
+                  label: "商城LOGO",
+                  type: "img",
+                  name: "tginfoLogo",
+                  value: ""
+                }
+              ]
+            }
+          },
+          {
+            label: "启用",
+            state: false,
+            params: {
+              //单单只对停用启用有效
+              oldDataState: "0",
+              dataState: "2",
+              tginfoId: "" //为空则会从当前这行table数据中获取
+            },
+            dataState: "-1", //状态参数
+            id: "start" 
+          },
+          {
+            label: "停用",
+            state: false,
+            params: {   // 此为应传入的参数
+              //单单只对停用启用有效,需要传的参数
+              oldDataState: "0",
+              dataState: "2",
+              goodsIdStr: ""   // 会从当前这行tabel数据中获取这个字段，如果是某个字段设置了别名，就会用到paramProps
+            },
+            paramProps: {  
+              goodsIdStr: 'goodsId'  // 和params里面对应，设置的别名，会从当前这行数据中获取goodsId，作为goodsIdStr传输
+            },
+            dataState: "0", //状态 参数 dataState存在，state为false
+            id: "stop", //自定义的
+          },
+		{
+			label: "编辑", //暂且只支持表单类型
+            state: true,
+            id: "edit", //和编辑
+            renderTemp: this.renderBtn,  // 可选参数  自定义表格按钮展示的方法 (优先级最高,会覆盖其他参数)
+            template: {
+              type: "json", //json类型
+              title: "编辑品牌",
+              formLabelWidth: "6rem", //长度根据标题长度来，一个字一个rem
+              html: [
+                {
+                  label: "名称",
+                  type: "text",
+                  value: "",
+                  name: "brandName"
+                },
+                {
+                  label: "logo",
+                  showFileList: false, //false为单个图片.暂且只支持单个图片编辑
+                  type: "upload",
+                  value: "",
+                  name: "brandLogo"
+                }
+              ],
+              rules: {}
+            }
+		}
+		]    
+	  }
+      ···
+    methods： {
+      renderContent(h, item) {  // item为当前这一行的数据  语法为jsx
+        return (
+         <div>
+           <span >{item.contractInmoney}/{item.contractInmoney}({item.contractInmoney})</span>
+            <span >{parseTime(item.gmtCreate)}</span>
+         </div>
+        )
+      },
+      renderBtn(h, item, val) {  // item为当前这一行的数据  语法为jsx
+        return (
+         <div>
+           <span >{item.contractInmoney}/{item.contractInmoney}({item.contractInmoney})</span>
+            <span >{parseTime(item.gmtCreate)}</span>
+         </div>
+        )
+      },
+    }
+
+
+
+#####分页
+
+    temPage:{ //基于element-ui的
+		currentPage: 1,
+        pageSizes: [10, 20, 30, 40],
+        pageSize: 10,
+        total: 1
+    }
+##### url
+
+    url:'/web/rs/goodsFile/uploadGoodsFile.json',//数据查询url
+
+#####参数
+| 参数 | 说明 | 类型 | 状态 |
+| :--------: | :-----:| :--: | :--: |
+| temInput | 查询框 | Array | 可选 | 
+| temTab | tab切换框 | Object | 可选 | 
+| temTable | table 数据显示 | Array | 可选 |
+| url | 数据查询url | String | 可选 |
+| temPage | 数据分页 | Object | 可选 | 
+
+#####API
+| 事件名称 | 说明 | 回调参数 | 例子 |
+| :--------: | :-----:| :--: | :--: |
+|inputBtnClick| temInput 里面其他按钮操作 | (data, index)|
+| getData（已删除） | 列表数据返回的接口 |  (data)   | getData(data) { //获取数据this.temTable.tableData =data;}|
+|tableBtnClick| table 表格里面其他按钮事件 | (data,item, index)| item.id ==="",根据id来执行事件 |
+| handleSelectionChange | table 多选按钮 | handleSelectionChange(val) | 
+| selChange| select 改变时触发 | selChange(val,item)，val为code值,item为操作json | 
+| handleSelect | input搜索 | handleSelect(data)|
+| btnConfirm | 提示框确定钩子 | btnConfirm(data,item) | 
+
+####模板 templateInput
+#####一、temInput
+
+> 支持的type类型:text / number / password /select / cascader / switch / checkbox / radio / textarea/autocomplete
+
+		
+    temInput:[
+	    {
+		    label: "用户类型", //标题
+	        name: "userinfoType", //参数名称
+	        type: "radio", // 类型，现支持 radio/checkbox/switch/password/textarea/upload
+	        value: "2", //参数值
+	        radioGroup: [ //选择内容
+	            {
+	              label: "公司",
+	              value: "2"
+	            },
+	            {
+	              label: "个人",
+	              value: "1"
+	            }
+		     ]
+	    },
+	    {
+          type: "autocomplete",
+          name: "classtreeName",
+          label: "搜索",
+          placeholder: "请输入产品编号",
+          restaurants: [
+            { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
+          ],
+          value: ""
+        },
+	    {
+          label: "公司名称",
+          type: "text",
+          state: "2", //可选参数
+          name: "userinfoCompname",
+          placeholder: "输入公司名称",
+          value: ""
+	    },
+	    {
+          btnArray: [ //id类型，add-新增，confirm-确定，cancel-取消，reset-重置， 其他不确定类型抛出inputBtnClick（"整个按钮对象","索引值"）方法进行操作
+            {
+              btnType: "primary",
+              id: "confirm",
+              url: "/web/um/userMerchant/saveUserMerchant.json",
+              label: "立即创建" value=>label
+            },
+            {
+              btnType: "danger",
+              id: "reset",
+              label: "重置"
+            }
+          ]
+        }
+    ],
+    rules:[]//规则验证
+
+
+
+#####二、其他
+
+    label: "商品类型",
+    type: "radio",
+    name: "radio",
+    value: "1",
+    labelWidth:"",label的宽度，单位为rem，一个字一个rem,可选参数
+    tabState: { //是需要进行tab切换时使用
+        name: "userinfoType",//参数名称
+        value: "2",//默认参数，需要外部进行监听，当值改变的时候，去改变temInput的值
+        typeArray: ["1", "2"] //通过typeArray把几种类型传递过去，对数据进行保留
+	}, //可选参数，表示需要监听的
+	{ //需要切换时需要添加state参数
+          label: "库存",
+          type: "number",
+          disabled:true,//可选参数，禁止
+          state: true,
+          value: 0,
+          name: "inventory",
+          placeholder: "请输入库存"
+    },
+    {
+	    label: "商品图片",
+		type: "upload",
+        state: true,
+        limit: 3,//可选参数，默认为1
+        showFileList: false, //表示单个个图片
+        name: "picList",
+        value: [] //多个图片为数组,单个为字符串""        },
+
+
+
+#####参数
+
+
+| 参数名称 | 说明 | 类型 | 例子 |
+| :--: | :--: | :--: | :--:|
+| temInput | 需要哪些表单 | Array | |
+| rules | 表单验证规则，基于element-ui | Array | 
+| title | 发布表单的通用标题 | String | 
+| labelWidth | label的宽度，单位为rem，一个字一个rem,可选参数 | String | 
+| tabState | 表单发布需要切换时使用 | Object | 
+
+
+#####API
+| 事件名称 | 参数 | 回调参数 | 例子 |
+ | :--: | :--: | :--: | :--:|
+ | inputBtnClick | 查询按钮事件 | (data,index) | 
+ |  inputBlur | input失去焦点事件 |  inputBlur(item) |
+
+
+ ##### 新增统计
+  :count="count"
+ count: [
+        {
+          label: "支付总额：",
+          name: "orderAmount",
+          value: 0,
+          unit: "元"
+        }
+      ],