vxe-design
Version:
A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms
1 lines • 4.31 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_dom=require("../../ui/src/dom"),_core=require("@vxe-ui/core"),_util=require("../render/util"),_defaultSettingData=require("./default-setting-data"),_layoutPreview=_interopRequireDefault(require("./layout-preview")),_layoutSetting=_interopRequireDefault(require("./layout-setting"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeListDesign",props:{size:{type:String,default:()=>(0,_core.getConfig)().listDesign.size||(0,_core.getConfig)().size},height:{type:[String,Number],default:()=>(0,_core.getConfig)().listDesign.height},config:Object,showPc:{type:Boolean,default:()=>(0,_core.getConfig)().listDesign.showPc},showMobile:{type:Boolean,default:()=>(0,_core.getConfig)().listDesign.showMobile},actionCodes:Array,formRender:Object},emits:[],setup(n,e){let{emit:r,slots:l}=e;var t=_xeUtils.default.uniqueId();let s=(0,_vue.ref)(),a=(0,_core.useSize)(n).computeSize,o=(0,_vue.reactive)({formData:{},searchFormData:{},searchFormItems:[],listTableColumns:[]}),i={refElem:s},u={computeSize:a},d={xID:t,props:n,context:e,reactData:o,getRefMaps:()=>i,getComputeMaps:()=>u},c=[],f=[],g=(_core.renderer.forEach((e,t)=>{var i,e=e.createListDesignSettingActionButtonConfig;e&&(i={name:t},("custom"===(t=Object.assign((0,_util.createListDesignActionButton)({code:t}),e(i))).type?f:c).push(t))}),e=>({title:e.title,field:e.field,visible:!e.hidden,width:"",cellRender:{name:e.name,props:e.options}})),m=e=>{let i=[];return e&&(e=e.widgetData,e)&&e.forEach(e=>{var t=e.name;t&&("row"===t?e.children.forEach(e=>{e.name&&i.push(g(e))}):"subtable"!==t&&i.push(g(e)))}),i},h=e=>e?e.map(e=>({field:e.field,title:e.title,visible:!!e.visible,width:e.width,cellRender:_xeUtils.default.clone(e.cellRender)})):[],_=e=>{var{formConfig:e,searchItems:t,listColumns:i}=e;return e&&(e=e,o.formData=Object.assign({},x(),e),(0,_vue.nextTick)()),t&&C(t),i&&(o.listTableColumns=v(i)),(0,_vue.nextTick)()},v=e=>h(e),p=()=>o.searchFormItems,C=e=>{var{data:e,items:t}=(e=>{if(e){let t={};return{items:e.map(e=>(t[e.field]=null,{field:e.field,title:e.title,folding:e.folding,itemRender:e.itemRender})),data:t}}return{items:[],data:{}}})(e);return o.searchFormData=e,o.searchFormItems=t,(0,_vue.nextTick)()},D=()=>o.listTableColumns;let x=()=>{var{actionCodes:e,formRender:t}=n;let r=(0,_defaultSettingData.getDefaultSettingFormData)();if(e&&e.length&&(!r.actionButtonList||!r.actionButtonList.length)){let i=[];e.forEach(t=>{var e;_xeUtils.default.isObject(t)&&t.default&&(e=c.find(e=>e.code===t.code))&&i.push((0,_util.createListDesignActionButton)({type:e.type,code:e.code}))}),r.actionButtonList=i}return t&&t.name&&(e=(e=_core.renderer.get(t.name))?e.createListDesignSettingFormConfig:null,t={name:t.name},r=(e?e(t):{})||{}),r},b=()=>{o.formData=x()},y=()=>(_({searchItems:[],listColumns:[]}),b(),(0,_vue.nextTick)());t={dispatchEvent(e,t,i){r(e,(0,_core.createEvent)(i,{$listDesign:d},t))},loadFormDesignConfig(e){var t=o.listTableColumns;let i={};_xeUtils.default.eachTree(t,e=>{i[e.field]=e},{children:"children"});t=m(e);return _xeUtils.default.eachTree(t,e=>{var t=i[e.field];t&&(t.width&&(e.width=t.width),e.visible=t.visible)},{children:"children"}),o.listTableColumns=t,(0,_vue.nextTick)()},reloadFormDesignConfig(e){return o.listTableColumns=m(e),(0,_vue.nextTick)()},getSearchItems:p,setSearchItems:C,getListColumns:D,setListColumns:e=>(o.listTableColumns=v(e),(0,_vue.nextTick)()),getConfig(){return{formConfig:o.formData,searchItems:p(),listColumns:D()}},loadConfig:_,reloadConfig(e){return y(),_(e)},clearConfig:y};Object.assign(d,t,{});return(0,_vue.provide)("$xeListDesign",d),(0,_vue.watch)(()=>n.config,e=>{_(e||{})}),b(),n.config&&_(n.config),d.renderVN=()=>{var e=n.height,t=a.value,i=l.header;return(0,_vue.h)("div",{ref:s,class:["vxe-list-design",{["size--"+t]:t}],style:e?{height:(0,_dom.toCssUnit)(e)}:null},[(0,_vue.h)("div",{class:"vxe-list-design--header"},i?i({}):[]),(0,_vue.h)("div",{class:"vxe-list-design--body"},[(0,_vue.h)(_layoutPreview.default),(0,_vue.h)(_layoutSetting.default)])])},d},render(){return this.renderVN()}});