(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d21dca5"],{d399:function(t,e,a){"use strict";a.r(e);var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("el-tabs",{model:{value:t.curTab,callback:function(e){t.curTab=e},expression:"curTab"}},[a("el-tab-pane",{attrs:{label:"表单效果",name:"demo"}},[a("keep-alive",[a("BasicForm")],1)],1),a("el-tab-pane",{attrs:{label:"表单代码",name:"code"}},[a("pre",{directives:[{name:"highlightjs",rawName:"v-highlightjs",value:t.code,expression:"code"}]},[t._v("      "),a("code",{staticClass:"language-html"},[t._v("\n      ")]),t._v("\n    ")])]),a("el-tab-pane",{attrs:{label:"API",name:"api"}},[a("MdView",{attrs:{url:"md/form.md"}})],1)],1)},i=[],s=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("form",{directives:[{name:"form",rawName:"v-form"}],attrs:{"data-vv-scope":"form1",name:"online-form"}},[a("table",{staticClass:"form-table",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[a("tbody",[t._m(0),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",{attrs:{width:"10%"}},[t._v("htTimeSelect：")]),a("td",{attrs:{width:"40%"}},[a("ht-time-select",{attrs:{validate:"required"},model:{value:t.data.xxb.timeselect,callback:function(e){t.$set(t.data.xxb,"timeselect",e)},expression:"data.xxb.timeselect"}})],1),a("th",{attrs:{width:"10%"}},[t._v("htTimeSelect：")]),a("td",{attrs:{width:"40%"}},[a("ht-time-select",{attrs:{permission:"r",validate:"required"},model:{value:t.data.xxb.timeselect2,callback:function(e){t.$set(t.data.xxb,"timeselect2",e)},expression:"data.xxb.timeselect2"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",{attrs:{width:"10%"}},[t._v("htTimePicker：")]),a("td",{attrs:{width:"40%"}},[a("ht-time-picker",{attrs:{validate:"required"},model:{value:t.data.xxb.timepicker,callback:function(e){t.$set(t.data.xxb,"timepicker",e)},expression:"data.xxb.timepicker"}}),a("pre",[t._v(t._s(t.data.xxb.timepicker))])],1),a("th",{attrs:{width:"10%"}},[t._v("htTimePicker2：")]),a("td",{attrs:{width:"40%"}},[a("ht-time-picker",{attrs:{permission:"r",validate:"required"},model:{value:t.data.xxb.timepicker2,callback:function(e){t.$set(t.data.xxb,"timepicker2",e)},expression:"data.xxb.timepicker2"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",{attrs:{width:"10%"}},[t._v("htCheckbox：")]),a("td",{attrs:{width:"40%"}},[a("ht-checkbox",{attrs:{options:t.options.ah,"option-layout":"vertical",validate:{required:!0}},model:{value:t.data.xxb.htCheckbox,callback:function(e){t.$set(t.data.xxb,"htCheckbox",e)},expression:"data.xxb.htCheckbox"}})],1),a("th",{attrs:{width:"10%"}},[t._v("htCheckbox2：")]),a("td",{attrs:{width:"40%"}},[a("ht-checkbox",{attrs:{options:t.options.ah,"option-layout":"vertical",permission:"r",validate:{required:!0}},model:{value:t.data.xxb.htCheckbox2,callback:function(e){t.$set(t.data.xxb,"htCheckbox2",e)},expression:"data.xxb.htCheckbox2"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",{attrs:{width:"10%"}},[t._v("htRadio：")]),a("td",{attrs:{width:"40%"}},[a("ht-radio",{attrs:{options:[{key:1,value:"是"},{key:0,value:"否"}],"option-layout":"vertical",validate:{required:!0}},model:{value:t.data.xxb.htRadio,callback:function(e){t.$set(t.data.xxb,"htRadio",e)},expression:"data.xxb.htRadio"}})],1),a("th",{attrs:{width:"10%"}},[t._v("htSelect2：")]),a("td",{attrs:{width:"40%"}},[a("ht-select",{attrs:{options:[{key:0,value:"禁用"},{key:1,value:"启用"}],validate:{required:!0}},model:{value:t.data.xxb.htSelect,callback:function(e){t.$set(t.data.xxb,"htSelect",e)},expression:"data.xxb.htSelect"}})],1)])])]),a("table",{staticClass:"form-table",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[a("tbody",[t._m(1),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},["n"!=t.permission.fields.grxx.xm?a("th",{attrs:{width:"10%"}},["b"==t.permission.fields.grxx.xm?a("span",[t._v("*")]):t._e(),t._v("\n            姓名：\n          ")]):t._e(),"n"!=t.permission.fields.grxx.xm?a("td",{attrs:{width:"40%"}},[a("ht-input",{attrs:{permission:t.permission.fields.grxx.xm,validate:t.validate.xm,"readonly-format":t.readonlyFormat,placeholder:"请输入您的姓名"},model:{value:t.data.xxb.xm,callback:function(e){t.$set(t.data.xxb,"xm",e)},expression:"data.xxb.xm"}})],1):t._e(),"n"!=t.permission.fields.grxx.xb?a("th",{attrs:{width:"10%"}},["b"==t.permission.fields.grxx.xb?a("span",[t._v("*")]):t._e(),t._v("\n            性别：\n          ")]):t._e(),"n"!=t.permission.fields.grxx.xb?a("td",{attrs:{width:"40%"}},[a("ht-radio",{attrs:{"option-layout":"vertical",permission:"w",options:t.options.xb,props:{key:"code",value:"desc"}},model:{value:t.data.xxb.xb,callback:function(e){t.$set(t.data.xxb,"xb",e)},expression:"data.xxb.xb"}})],1):t._e()]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",{attrs:{width:"10%"}},[t._v("爱好：")]),a("td",{attrs:{width:"40%"}},[a("ht-checkbox",{attrs:{options:t.options.ah,"option-layout":"vertical",min:1,max:3,linkage:[{value:"1",effect:[{target:"permission.fields.grxx.xm",type:"=",value:"w"},{target:"validate.xm",type:"+",value:{mobile:!0}}]},{value:"2",effect:[{target:"validate.xm",type:"-",value:"required"}]}],permission:t.permission.fields.grxx.ah,validate:{required:!1}},model:{value:t.data.xxb.ah,callback:function(e){t.$set(t.data.xxb,"ah",e)},expression:"data.xxb.ah"}})],1),a("th",{attrs:{width:"10%"}},[t._v("家庭住址：")]),a("td",{attrs:{width:"40%"}},[a("ht-input",{attrs:{type:"textarea",validate:{method:{callback:t.callback,message:"校验失败，必须输入test。"}},permission:"w"},model:{value:t.data.xxb.jtzz,callback:function(e){t.$set(t.data.xxb,"jtzz",e)},expression:"data.xxb.jtzz"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",{attrs:{width:"10%"}},[t._v("出生日期：")]),a("td",[a("ht-date",{attrs:{validate:{required:!0,isEnd:t.data.xxb.bysj},format:"hh:mm:ss","show-date":!0,day:-3},model:{value:t.data.xxb.csrq,callback:function(e){t.$set(t.data.xxb,"csrq",e)},expression:"data.xxb.csrq"}})],1),a("th",[t._v("毕业时间：")]),a("td",[a("ht-date",{attrs:{name:"bysj",format:"yyyy-MM-dd HH:mm:ss"},model:{value:t.data.xxb.bysj,callback:function(e){t.$set(t.data.xxb,"bysj",e)},expression:"data.xxb.bysj"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("毕业时年龄（天）：")]),a("td",[a("ht-input",{attrs:{"date-calc-exp":{start:"data.xxb.csrq",end:"data.xxb.bysj",diffType:"day"}},model:{value:t.data.xxb.bynl,callback:function(e){t.$set(t.data.xxb,"bynl",e)},expression:"data.xxb.bynl"}})],1),a("th",[t._v("毕业时年龄：")]),a("td",[a("ht-input",{attrs:{"math-exp":"{毕业时年龄天(data.xxb.bynl)}/365"},model:{value:t.data.xxb.bynly,callback:function(e){t.$set(t.data.xxb,"bynly",e)},expression:"data.xxb.bynly"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("下拉异步只读：")]),a("td",[a("ht-select",{attrs:{options:t.options.zy,"remote-method":t.handleSelectOptions,permission:"r",validate:{required:!0},linkage:{value:"2",effect:[{target:"permission.fields.grxx.ah",type:"=",value:"r"}]}},model:{value:t.data.xxb.zyd,callback:function(e){t.$set(t.data.xxb,"zyd",e)},expression:"data.xxb.zyd"}})],1),a("th",[t._v("htSelect默认用法固定选项只读：")]),a("td",[a("ht-select",{attrs:{options:t.options.zy2,multiple:"",permission:"r"},model:{value:t.data.xxb.zyc,callback:function(e){t.$set(t.data.xxb,"zyc",e)},expression:"data.xxb.zyc"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("htSelect默认用法：")]),a("td",[a("ht-select",{attrs:{options:t.options.zy,"remote-method":t.handleSelectOptions,multiple:"",validate:{required:!0},linkage:{value:"2",effect:[{target:"permission.fields.grxx.ah",type:"=",value:"r"}]}},model:{value:t.data.xxb.zyb,callback:function(e){t.$set(t.data.xxb,"zyb",e)},expression:"data.xxb.zyb"}})],1),a("th",[t._v("select默认插槽用法：")]),a("td",[a("ht-select",{attrs:{options:[{key:"a",value:"a",children:[{key:"1",value:"医生"},{key:"2",value:"护士"}]},{key:"水果",value:"水果",children:[{key:"a",value:"苹果"},{key:"b",value:"香蕉"}]}],validate:{required:!0},linkage:{value:"2",effect:[{target:"permission.fields.grxx.ah",type:"=",value:"r"}]}},scopedSlots:t._u([{key:"default",fn:function(e){var n=e.options;return t._l(n,(function(e){return a("el-option-group",{key:e.key,attrs:{label:e.value}},t._l(e.children,(function(t){return a("el-option",{key:t.key,attrs:{label:t.value,value:t.key}})})),1)}))}}]),model:{value:t.data.xxb.zya,callback:function(e){t.$set(t.data.xxb,"zya",e)},expression:"data.xxb.zya"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("职业（分组）：")]),a("td",[a("ht-select",{attrs:{options:[{key:"a",value:"a",children:[{key:"1",value:"医生"},{key:"2",value:"护士"}]},{key:"水果",value:"水果",children:[{key:"a",value:"苹果"},{key:"b",value:"香蕉"}]}],validate:{required:!0},multiple:"",permission:"r",linkage:{value:"2",effect:[{target:"permission.fields.grxx.ah",type:"=",value:"r"}]}},scopedSlots:t._u([{key:"default",fn:function(e){var n=e.options,i=e.propKey,s=e.propValue;return t._l(n,(function(e){return a("el-option-group",{key:e.key,attrs:{label:e.value}},t._l(e.children,(function(t){return a("el-option",{key:t[i],attrs:{label:t[s],value:t[i]}})})),1)}))}}]),model:{value:t.data.xxb.zy,callback:function(e){t.$set(t.data.xxb,"zy",e)},expression:"data.xxb.zy"}})],1),a("th",[t._v("职业2 htselect slot：")]),a("td",[a("ht-select",{attrs:{options:t.options.zy,"remote-method":t.handleSelectOptions,validate:{required:!0},linkage:{value:"2",effect:[{target:"permission.fields.grxx.ah",type:"=",value:"r"}]}},model:{value:t.data.xxb.zye,callback:function(e){t.$set(t.data.xxb,"zye",e)},expression:"data.xxb.zye"}}),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"danger"},on:{click:t.clearSelectOptions}},[t._v("清空下拉框选项")])],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("附件资料：")]),a("td",[a("ht-file",{attrs:{previewable:!1,permission:"w","column-show":{fileType:!1,fileSize:!1},size:100,limit:2,validate:{required:!0},propConfList:[{name:"prop1",desc:"test1"},{name:"prop2",desc:"test2"},{name:"prop3"},{name:"prop4"},{name:"prop5"},{name:"prop6"}]},model:{value:t.data.xxb.fjzl,callback:function(e){t.$set(t.data.xxb,"fjzl",e)},expression:"data.xxb.fjzl"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("所在维度：")]),a("td",[a("my-demension",{attrs:{permission:"w",config:{id:"data.xxb.szwdId",code:"data.xxb.szwdCode"},placeholder:"选择你所在的维度"},model:{value:t.data.xxb.szwd,callback:function(e){t.$set(t.data.xxb,"szwd",e)},expression:"data.xxb.szwd"}})],1),a("th",{attrs:{width:"10%"}},[t._v("合计：")]),a("td",[a("ht-input",{attrs:{multiple:"","math-exp":"FormMath.convertCurrency(FormMath.sum([{小计(data.xxb.sub_bxxx.xj)}]))"},model:{value:t.data.xxb.hj,callback:function(e){t.$set(t.data.xxb,"hj",e)},expression:"data.xxb.hj"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("角色选择：")]),a("td",[a("my-role-selector",{attrs:{permission:"w",config:{id:"data.xxb.roleId",code:"data.xxb.roleCode"},placeholder:"请选择"},model:{value:t.data.xxb.roles,callback:function(e){t.$set(t.data.xxb,"roles",e)},expression:"data.xxb.roles"}})],1),a("th",{attrs:{width:"10%"}},[t._v("用户选择：")]),a("td",[a("my-user-selector",{attrs:{permission:"w",config:{id:"data.xxb.userIds",fullname:"data.xxb.userFullnames",account:"data.xxb.userAccounts"},placeholder:"请选择"},model:{value:t.data.xxb.users,callback:function(e){t.$set(t.data.xxb,"users",e)},expression:"data.xxb.users"}})],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("时间选择（分）：")]),a("td",[a("ht-duration",{attrs:{placeholder:"请选择",validate:"required"},model:{value:t.data.xxb.second,callback:function(e){t.$set(t.data.xxb,"second",e)},expression:"data.xxb.second"}})],1),a("th",{attrs:{width:"10%"}},[t._v("时间选择（秒）：")]),a("td",[a("ht-duration",{attrs:{type:"second",placeholder:"请选择",validate:"required"},model:{value:t.data.xxb.second2,callback:function(e){t.$set(t.data.xxb,"second2",e)},expression:"data.xxb.second2"}}),a("el-button",{attrs:{type:"button"},on:{click:function(e){t.data.xxb.second2=0}}},[t._v("second2")])],1)]),a("tr",{directives:[{name:"permit",rawName:"v-permit",value:4,expression:"4"}]},[a("th",[t._v("价格1：")]),a("td",[a("ht-input",{model:{value:t.data.xxb.price1,callback:function(e){t.$set(t.data.xxb,"price1",e)},expression:"data.xxb.price1"}}),a("ht-input",{model:{value:t.data.xxb.price2,callback:function(e){t.$set(t.data.xxb,"price2",e)},expression:"data.xxb.price2"}})],1),a("th",{attrs:{width:"10%"}},[t._v("总价：")]),a("td",[a("ht-input",{attrs:{"math-exp":"{数字1(data.xxb.price1)}+{数字2(data.xxb.price2)}"},model:{value:t.data.xxb.price3,callback:function(e){t.$set(t.data.xxb,"price3",e)},expression:"data.xxb.price3"}})],1)]),t._m(2),a("tr",[a("td",{attrs:{colspan:"4"}},[a("table",{staticClass:"form-table",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[t._m(3),a("tbody",t._l(t.data.xxb.sub_bxxx,(function(e,n){return a("tr",{key:n,attrs:{"data-index":n,"data-subname":"data.xxb.sub_bxxx"}},[a("td",[a("my-demension",{attrs:{config:{id:"item.dj",code:"item.sl"},placeholder:"选择你所在的维度"},model:{value:e.bxxm,callback:function(a){t.$set(e,"bxxm",a)},expression:"item.bxxm"}})],1),a("td",[a("ht-input",{model:{value:e.dj,callback:function(a){t.$set(e,"dj",a)},expression:"item.dj"}})],1),a("td",[a("ht-input",{model:{value:e.sl,callback:function(a){t.$set(e,"sl",a)},expression:"item.sl"}})],1),a("td",[a("ht-input",{attrs:{"math-exp":"{单价(item.dj)}*{数量(item.sl)}"},model:{value:e.xj,callback:function(a){t.$set(e,"xj",a)},expression:"item.xj"}})],1),a("td",[a("ht-date",{attrs:{format:"yyyy-MM-dd",validate:{required:!0,isEnd:"itemEnd"}},model:{value:e.begin,callback:function(a){t.$set(e,"begin",a)},expression:"item.begin"}})],1),a("td",[a("ht-date",{attrs:{format:"yyyy-MM-dd",name:"itemEnd"},model:{value:e.end,callback:function(a){t.$set(e,"end",a)},expression:"item.end"}})],1),a("td",[a("ht-input",{attrs:{"date-calc-exp":{start:"item.begin",end:"item.end",diffType:"minute"}},model:{value:e.cxsj,callback:function(a){t.$set(e,"cxsj",a)},expression:"item.cxsj"}})],1),a("td",{staticClass:"trash"},[a("el-button",{attrs:{size:"small",type:"text"},on:{click:function(a){return t.data.xxb.sub_bxxx.remove(e)}}},[t._v("删除")]),a("el-button",{attrs:{size:"small",type:"text"},on:{click:function(a){return t.move(t.data.xxb.sub_bxxx,e,"up")}}},[t._v("上移")]),a("el-button",{attrs:{size:"small",type:"text"},on:{click:function(a){return t.move(t.data.xxb.sub_bxxx,e,"down")}}},[t._v("下移")]),a("el-button",{attrs:{size:"small",type:"text"},on:{click:function(a){return t.data.xxb.sub_bxxx.push(Object.assign({},e))}}},[t._v("复制")])],1)])})),0),a("tfoot",[a("tr",[a("td",{attrs:{colspan:"15"}},[a("el-button",{attrs:{size:"small",type:"text",icon:"el-icon-plus"},on:{click:function(e){return t.data.xxb.sub_bxxx.push({})}}},[t._v("添加")])],1)])])])])])])])]),a("pre",[t._v(t._s(t.data))]),a("el-button",{staticStyle:{"margin-top":"20px"},attrs:{loading:t.loading,size:"small",type:"primary"},on:{click:t.submit}},[t._v("提交")])],1)},r=[function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("tr",[a("th",{staticClass:"group-th",attrs:{colspan:"4"}},[t._v("基础控件演示")])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("tr",[a("th",{staticClass:"group-th",attrs:{colspan:"4"}},[t._v("基础表单")])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("tr",[a("th",{staticClass:"group-th",attrs:{colspan:"4"}},[t._v("子表")])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("thead",[a("tr",{staticClass:"sub-table-header"},[a("th",[t._v("报销项目")]),a("th",[t._v("单价")]),a("th",[t._v("数量")]),a("th",[t._v("小计")]),a("th",[t._v("开始时间")]),a("th",[t._v("结束时间")]),a("th",{attrs:{width:"150"}},[t._v("持续时间(分钟)")]),a("th",{attrs:{width:"180"}},[t._v("操作")])])])}],l=a("025e"),d=(a("ba5f"),a("5c96")),o=a("5118"),x=a("4be7"),c=a("69b4"),m=a("8c51"),p=a("c3c3"),u={name:"basic-form",components:{MyDemension:c["a"],MyRoleSelector:m["a"],MyUserSelector:p["a"]},data:function(){return{loading:!1,data:{xxb:{timeselect:"08:15",timeselect2:"08:30",timepicker:null,timepicker2:"2024-06-16 20:09:38",htCheckbox:"",htCheckbox2:"1,3",zy:"1,2",zyc:"1,自定义",zyb:"1,2,3,4",zyd:"2",xm:"张三",xb:!1,ah:"1,3",csrq:"1986-6-29",bysj:"2008-6-30",szwd:"二维,三维，四维",roles:"行政角色",second:3720,second2:2200,fjzl:'[{"name":"更新日志.txt","size":12764,"percentage":100,"status":"success","state":"success"}]',sub_bxxx:[]}},permission:{fields:{grxx:{xm:"r",xb:"w",ah:"w"}}},validate:{xm:null},options:{ah:[{key:"1",value:"爬山"},{key:"2",value:"游泳"},{key:"3",value:"美食"},{key:"4",value:"下棋"}],xb:[{code:0,desc:"男士",disabled:!0},{code:!0,desc:"女士"},{code:!1,desc:"无性"}],zy:null,zy2:[{key:"1",value:"医生"},{key:"2",value:"护士"},{key:"3",value:"老师"},{key:"4",value:"教授"}]}}},methods:{readonlyFormat:function(t){return t+"33元"},callback:function(t){return"test"==t},handleSelectOptions:function(t){var e=this;return new x["Promise"]((function(t,a){Object(o["setTimeout"])((function(){e.options.zy=e.options.zy2,t()}),1e3)}))},clearSelectOptions:function(){this.$set(this.options,"zy",[])},move:function(t,e,a){this.data.xxb.sub_bxxx=l["a"].arrayMove(t,e,a)},submit:function(){var t=this;this.loading=!0,Object(o["setTimeout"])((function(){l["a"].validateForm(t,"form1").then((function(e){d["Message"].success(JSON.stringify(t.data))})).catch((function(t){d["Message"].error("有".concat(t.length,"个字段未通过校验，无法提交表单。"))})).finally((function(){t.loading=!1}))}),500)}}},b=u,h=a("2877"),v=Object(h["a"])(b,s,r,!1,null,null,null),y=v.exports,f=a("a55f"),k={code:'<template>\n  <div>\n    <form data-vv-scope="form1" v-form name="online-form">\n      <table class="form-table" cellspacing="0" cellpadding="0" border="0">\n        <tbody>\n          <tr>\n            <th class="group-th" colspan="4">基础控件演示</th>\n          </tr>\n          <tr v-permit="4">\n            <th width="10%">htTimeSelect：</th>\n            <td width="40%">\n              <ht-time-select v-model="data.xxb.timeselect" validate="required" />\n            </td>\n            <th width="10%">htTimeSelect：</th>\n            <td width="40%">\n              <ht-time-select v-model="data.xxb.timeselect2" permission="r" validate="required" />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th width="10%">htTimePicker：</th>\n            <td width="40%">\n              <ht-time-picker v-model="data.xxb.timepicker"  validate="required" />\n              <pre>{{data.xxb.timepicker}}</pre>\n            </td>\n            <th width="10%">htTimePicker2：</th>\n            <td width="40%">\n              <ht-time-picker v-model="data.xxb.timepicker2" permission="r" validate="required" />\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <table class="form-table" cellspacing="0" cellpadding="0" border="0">\n        <tbody>\n          <tr>\n            <th class="group-th" colspan="4">基础表单</th>\n          </tr>\n          <tr v-permit="4">\n            <th width="10%" v-if="permission.fields.grxx.xm!=\'n\'">\n              <span v-if="permission.fields.grxx.xm==\'b\'">*</span>\n              姓名：\n            </th>\n            <td width="40%" v-if="permission.fields.grxx.xm!=\'n\'">\n              <ht-input\n                v-model="data.xxb.xm"\n                :permission="permission.fields.grxx.xm"\n                :validate="validate.xm"\n                placeholder="请输入您的姓名"\n              />\n            </td>\n            <th width="10%" v-if="permission.fields.grxx.xb!=\'n\'">\n              <span v-if="permission.fields.grxx.xb==\'b\'">*</span>\n              性别：\n            </th>\n            <td width="40%" v-if="permission.fields.grxx.xb!=\'n\'">\n              <ht-radio\n                v-model="data.xxb.xb"\n                option-layout="vertical"\n                permission="w"\n                :options="options.xb"\n                :props="{key:\'code\',value:\'desc\'}"\n              />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th width="10%">爱好：</th>\n            <td width="40%">\n              <ht-checkbox\n                v-model="data.xxb.ah"\n                :options="options.ah"\n                option-layout="vertical"\n                :min="1"\n                :max="3"\n                :linkage="[{\'value\':\'1\',\'effect\':[{\'target\':\'permission.fields.grxx.xm\', \'type\': \'=\',\'value\':\'w\'},{\'target\': \'validate.xm\', \'type\': \'+\', \'value\': {\'mobile\':true}}]},{\'value\':\'2\',\'effect\':[{\'target\': \'validate.xm\', \'type\': \'-\', \'value\': \'required\'}]}]"\n                :permission="permission.fields.grxx.ah"\n                :validate="{\'required\':false}"\n              />\n            </td>\n            <th width="10%">家庭住址：</th>\n            <td width="40%">\n              <ht-input\n                type="textarea"\n                v-model="data.xxb.jtzz"\n                :validate="{method: {callback: callback, message: \'校验失败，必须输入test。\'}}"\n                permission="w"\n              />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th width="10%">出生日期：</th>\n            <td>\n              <ht-date\n                v-model="data.xxb.csrq"\n                :validate="{\'required\':true,\'isEnd\':data.xxb.bysj}"\n                format="hh:mm:ss"\n                value-format="yyyy-MM-dd"\n                :showDate="true"\n                :day="-3"\n              />\n            </td>\n            <th>毕业时间：</th>\n            <td>\n              <ht-date\n                v-model="data.xxb.bysj"\n                name="bysj"\n                format="yyyy-MM-dd"\n                value-format="yyyy-MM-dd"\n              />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>毕业时年龄（天）：</th>\n            <td>\n              <ht-input\n                v-model="data.xxb.bynl"\n                :date-calc-exp="{\'start\':\'data.xxb.csrq\',\'end\':\'data.xxb.bysj\',\'diffType\':\'day\'}"\n              />\n            </td>\n            <th>毕业时年龄：</th>\n            <td>\n              <ht-input v-model="data.xxb.bynly" math-exp="{毕业时年龄天(data.xxb.bynl)}/365" />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>下拉异步只读：</th>\n            <td>\n              <ht-select\n                v-model="data.xxb.zyd"\n                :options="options.zy"\n                :remote-method="handleSelectOptions"\n                permission="r"\n                :validate="{\'required\':true}"\n                :linkage="{value: \'2\', effect: [{target:\'permission.fields.grxx.ah\', type:\'=\', value: \'r\'}]}"\n              ></ht-select>\n            </td>\n            <th>htSelect默认用法固定选项只读：</th>\n            <td>\n              <ht-select\n                v-model="data.xxb.zyc"\n                :options="options.zy2"\n                permission="r"\n                :validate="{\'required\':true}"\n                :linkage="{value: \'2\', effect: [{target:\'permission.fields.grxx.ah\', type:\'=\', value: \'r\'}]}"\n              ></ht-select>\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>htSelect默认用法：</th>\n            <td>\n              <ht-select\n                v-model="data.xxb.zyb"\n                :options="options.zy"\n                :remote-method="handleSelectOptions"\n                :validate="{\'required\':true}"\n                :linkage="{value: \'2\', effect: [{target:\'permission.fields.grxx.ah\', type:\'=\', value: \'r\'}]}"\n              ></ht-select>\n            </td>\n            <th>select默认插槽用法：</th>\n            <td>\n              <ht-select\n                v-model="data.xxb.zya"\n                :options="[{key:\'a\',value:\'a\',children:[ {key:\'1\',value:\'医生\'},{key:\'2\',value:\'护士\'}]},{key:\'水果\',value:\'水果\',children:[ {key:\'a\',value:\'苹果\'},{key:\'b\',value:\'香蕉\'}]}]"\n                :validate="{\'required\':true}"\n                :linkage="{value: \'2\', effect: [{target:\'permission.fields.grxx.ah\', type:\'=\', value: \'r\'}]}"\n              >\n                <template slot-scope="{ options }">\n                  <el-option-group v-for="group in options" :key="group.key" :label="group.value">\n                    <el-option\n                      v-for="item in group.children"\n                      :key="item.key"\n                      :label="item.value"\n                      :value="item.key"\n                    ></el-option>\n                  </el-option-group>\n                </template>\n              </ht-select>\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>职业（分组）：</th>\n            <td>\n              <ht-select\n                v-model="data.xxb.zy"\n                :options="[{key:\'a\',value:\'a\',children:[ {key:\'1\',value:\'医生\'},{key:\'2\',value:\'护士\'}]},{key:\'水果\',value:\'水果\',children:[ {key:\'a\',value:\'苹果\'},{key:\'b\',value:\'香蕉\'}]}]"\n                :validate="{\'required\':true}"\n                multiple\n                permission="r"\n                :linkage="{value: \'2\', effect: [{target:\'permission.fields.grxx.ah\', type:\'=\', value: \'r\'}]}"\n              >\n                <template slot-scope="{ options,propKey,propValue }">\n                  <el-option-group v-for="group in options" :key="group.key" :label="group.value">\n                    <el-option\n                      v-for="item in group.children"\n                      :key="item[propKey]"\n                      :label="item[propValue]"\n                      :value="item[propKey]"\n                    ></el-option>\n                  </el-option-group>\n                </template>\n              </ht-select>\n            </td>\n            <th>职业2 htselect slot：</th>\n            <td>\n              <ht-select\n                v-model="data.xxb.zye"\n                :options="options.zy"\n                :remote-method="handleSelectOptions"\n                :validate="{\'required\':true}"\n                :linkage="{value: \'2\', effect: [{target:\'permission.fields.grxx.ah\', type:\'=\', value: \'r\'}]}"\n              >\n                <template slot-scope="{ options,propKey,propValue }">\n                  <el-option\n                    v-for="item in options"\n                    :key="item[propKey]"\n                    :label="item[propValue]"\n                    :value="item[propKey]"\n                  ></el-option>\n                </template>\n              </ht-select>\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>附件资料：</th>\n            <td>\n              <ht-file\n                v-model="data.xxb.fjzl"\n                permission="w"\n                :size="100"\n                :limit="2"\n                :validate="{\'required\':true}"\n              />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>所在维度：</th>\n            <td>\n              <my-demension\n                v-model="data.xxb.szwd"\n                permission="w"\n                :config="{id:\'data.xxb.szwdId\',code: \'data.xxb.szwdCode\'}"\n                placeholder="选择你所在的维度"\n              />\n            </td>\n            <th width="10%">合计：</th>\n            <td>\n              <ht-input\n                v-model="data.xxb.hj"\n                multiple\n                math-exp="FormMath.convertCurrency(FormMath.sum([{小计(data.xxb.sub_bxxx.xj)}]))"\n              />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>角色选择：</th>\n            <td>\n              <my-role-selector\n                v-model="data.xxb.roles"\n                permission="w"\n                :config="{id:\'data.xxb.roleId\',code: \'data.xxb.roleCode\'}"\n                placeholder="请选择"\n              />\n            </td>\n            <th width="10%">用户选择：</th>\n            <td>\n              <my-user-selector\n                v-model="data.xxb.users"\n                permission="w"\n                :config="{id:\'data.xxb.userIds\',fullname: \'data.xxb.userFullnames\',account: \'data.xxb.userAccounts\'}"\n                placeholder="请选择"\n              />\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>时间选择（分）：</th>\n            <td>\n              <ht-duration v-model="data.xxb.second" placeholder="请选择" validate="required" />\n            </td>\n            <th width="10%">时间选择（秒）：</th>\n            <td>\n              <ht-duration\n                type="second"\n                v-model="data.xxb.second2"\n                placeholder="请选择"\n                validate="required"\n              />\n              <el-button type="button" @click="data.xxb.second2=0">second2</el-button>\n            </td>\n          </tr>\n          <tr v-permit="4">\n            <th>价格1：</th>\n            <td>\n              <ht-input v-model="data.xxb.price1" />\n              <ht-input v-model="data.xxb.price2" />\n            </td>\n            <th width="10%">总价：</th>\n            <td>\n              <ht-input\n                v-model="data.xxb.price3"\n                math-exp="{数字1(data.xxb.price1)}+{数字2(data.xxb.price2)}"\n              />\n            </td>\n          </tr>\n\n          <tr>\n            <th class="group-th" colspan="4">子表</th>\n          </tr>\n          <tr>\n            <td colspan="4">\n              <table class="form-table" cellspacing="0" cellpadding="0" border="0">\n                <thead>\n                  <tr class="sub-table-header">\n                    <th>报销项目</th>\n                    <th>单价</th>\n                    <th>数量</th>\n                    <th>小计</th>\n                    <th>开始时间</th>\n                    <th>结束时间</th>\n                    <th width="150">持续时间(分钟)</th>\n                    <th width="180">操作</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr\n                    v-for="(item, index) in data.xxb.sub_bxxx"\n                    :key="index"\n                    :data-index="index"\n                    data-subname="data.xxb.sub_bxxx"\n                  >\n                    <td>\n                      <my-demension\n                        v-model="item.bxxm"\n                        :config="{id:\'item.dj\',code: \'item.sl\'}"\n                        placeholder="选择你所在的维度"\n                      />\n                    </td>\n                    <td>\n                      <ht-input v-model="item.dj" />\n                    </td>\n                    <td>\n                      <ht-input v-model="item.sl" />\n                    </td>\n                    <td>\n                      <ht-input v-model="item.xj" math-exp="{单价(item.dj)}*{数量(item.sl)}" />\n                    </td>\n                    <td>\n                      <ht-date\n                        v-model="item.begin"\n                        format="yyyy-MM-dd"\n                        :validate="{\'required\':true,\'isEnd\':\'itemEnd\'}"\n                      />\n                    </td>\n                    <td>\n                      <ht-date v-model="item.end" format="yyyy-MM-dd" name="itemEnd" />\n                    </td>\n                    <td>\n                      <ht-input\n                        v-model="item.cxsj"\n                        :date-calc-exp="{\'start\':\'item.begin\',\'end\':\'item.end\',\'diffType\':\'minute\'}"\n                      />\n                    </td>\n                    <td class="trash">\n                      <el-button size="small" type="text" @click="data.xxb.sub_bxxx.remove(item)">删除</el-button>\n                      <el-button\n                        size="small"\n                        type="text"\n                        @click="move(data.xxb.sub_bxxx, item, \'up\')"\n                      >上移</el-button>\n                      <el-button\n                        size="small"\n                        type="text"\n                        @click="move(data.xxb.sub_bxxx, item, \'down\')"\n                      >下移</el-button>\n                      <el-button\n                        size="small"\n                        type="text"\n                        @click="data.xxb.sub_bxxx.push({...item})"\n                      >复制</el-button>\n                    </td>\n                  </tr>\n                </tbody>\n                <tfoot>\n                  <tr>\n                    <td colspan="15">\n                      <el-button\n                        size="small"\n                        type="text"\n                        icon="el-icon-plus"\n                        @click="data.xxb.sub_bxxx.push({})"\n                      >添加</el-button>\n                    </td>\n                  </tr>\n                </tfoot>\n              </table>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </form>\n    <pre>{{data}}</pre>\n    <el-button\n      style="margin-top: 20px"\n      :loading="loading"\n      size="small"\n      type="primary"\n      @click="submit"\n    >提交</el-button>\n  </div>\n</template>\n<script>\nimport utils from "@/utils.js";\nimport service from "@/service.js";\nimport { Message } from "element-ui";\nimport { setTimeout } from "timers";\nimport { Promise } from "q";\nimport MyDemension from "@/demo/MyDemension.vue";\nimport MyRoleSelector from "@/demo/MyRoleSelector.vue";\nimport MyUserSelector from "@/demo/MyUserSelector.vue";\n\nexport default {\n  name: "basic-form",\n  components: {\n    MyDemension,\n    MyRoleSelector,\n    MyUserSelector\n  },\n  data() {\n    return {\n      loading: false,\n      data: {\n        xxb: {\n          timeselect: "08:15",\n          timeselect2: "08:30",\n          timepicker: null,\n          timepicker2: "2024-06-16 20:09:38",\n          zy: "1,2",\n          zyc: "1",\n          zyd: "2",\n          xm: "张三",\n          xb: false,\n          ah: "1,3",\n          csrq: "1986-6-29",\n          bysj: "2008-6-30",\n          szwd: "二维,三维，四维",\n          roles: "行政角色",\n          second: 3720,\n          second2: 2200,\n          fjzl:\n            \'[{"name":"更新日志.txt","size":12764,"percentage":100,"status":"success","state":"success"}]\',\n          sub_bxxx: []\n        }\n      },\n      permission: {\n        fields: {\n          grxx: {\n            xm: "b",\n            xb: "w",\n            ah: "w"\n          }\n        }\n      },\n      validate: {\n        xm: null\n      },\n      options: {\n        ah: [\n          { key: "1", value: "爬山" },\n          { key: "2", value: "游泳" },\n          { key: "3", value: "美食" },\n          { key: "4", value: "下棋" }\n        ],\n        xb: [\n          { code: 0, desc: "男士", disabled: true },\n          { code: true, desc: "女士" },\n          { code: false, desc: "无性" }\n        ],\n        zy: null,\n        zy2: [\n          { key: "1", value: "医生" },\n          { key: "2", value: "护士" },\n          { key: "3", value: "老师" }\n        ]\n      }\n    };\n  },\n  methods: {\n    callback: value => {\n      return value == "test";\n    },\n    handleSelectOptions: function(query) {\n      let _me = this;\n      return new Promise((resolve, reject) => {\n        setTimeout(() => {\n          _me.options.zy = _me.options.zy2;\n          resolve();\n        }, 1000);\n      });\n    },\n    move: function(ary, item, direct) {\n      this.data.xxb.sub_bxxx = utils.arrayMove(ary, item, direct);\n    },\n    submit: function() {\n      this.loading = true;\n      setTimeout(() => {\n        utils\n          .validateForm(this, "form1")\n          .then(r => {\n            Message.success(JSON.stringify(this.data));\n          })\n          .catch(items => {\n            Message.error("有n个字段未通过校验，无法提交表单。");\n          })\n          .finally(() => {\n            this.loading = false;\n          });\n      }, 500);\n    }\n  }\n};\n<\/script>'},g=k,w={name:"Form",components:{BasicForm:y,MdView:f["a"]},data:function(){return{curTab:"demo",code:"".concat(g.code)}}},_=w,z=Object(h["a"])(_,n,i,!1,null,null,null);e["default"]=z.exports}}]);