diantou/src/form-designer/sd-component-library.vue

<script>
/* eslint-disable */
// sd-skip-auto-import
import util from"./util";import components from"./_import-components/sd-component-library-import";var _render=function e(){var t=this,i=t._self._c;return i("a-collapse",{class:t.$style.wrapper,attrs:{"default-active-key":t.expandedKeys}},[t._t("default"),t._l(t.librariesComputed,(function(e){return i("a-collapse-panel",{key:e.key,attrs:{header:e.name}},[i("sd-draggable",{attrs:{list:e.items,title:"通过 双击/拖拽 来添加",group:{name:t.formProps.tableName+("layout"===e.key?"_layout":""),pull:"clone",put:false},draggable:"."+t.$style.draggable}},t._l(e.items,(function(s){return i("div",{key:s.fileName,class:{[t.$style.item]:true,[t.$style.draggable]:-1===t.disabledCids.indexOf(s.attrFD.cid),"sd-layout-component":"layout"===e.key},on:{dblclick:function(e){return t.$emit("itemDblClick",s)}}},[i("a-icon",{class:t.$style.icon,attrs:{type:s.icon}}),t._v(t._s(s.caption)+" ")],1)})),0)],1)}))],2)};var staticRenderFns=[];_render._withStripped=true;export default{name:"SdComponentLibrary",components:components,mixins:[util.mixin],data(){return{libraries:null}},computed:{librariesComputed(){return this.layoutable?this.libraryLayout.concat(this.libraries):this.libraries}},created(){const e=e=>{if(e.deprecated)return false;if(e.singleton)this.designer.singletonCids.push(e.attrFD.cid);const t=!e.excludeFormTypes?.includes(this.formProps.attrFD.type);return t};const t={name:"布局控件",key:"layout",items:[]};const i={name:"基础控件",key:"basic",items:[]};const s={name:"高级控件",key:"advance",items:[]};const r=util.getComponentLibrary();const a=[];r.forEach((r=>{if("wep"===r.key)r.items.filter(e).forEach((e=>{if("layout"===e.category)t.items.push(e);else if("basic"===e.category)i.items.push(e);else s.items.push(e)}));else a.push({name:r.name??"扩展控件",key:r.key,items:r.items.filter(e)})}));this.libraries=[i,s,...a];this.libraryLayout=[t];this.expandedKeys=this.libraries.map((e=>e.key)).concat("layout")},methods:{},render:_render,staticRenderFns:staticRenderFns};</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  &:global(.ant-collapse) {
    border: none;
    > :global(.ant-collapse-item) > :global(.ant-collapse-header) {
      /* stylelint-disable-next-line */
      line-height: 23px;
    }
  }
  .item {
    display: inline-block;
    width: 48%;
    padding: 5px 10px;
    margin: 1%;
    &:not(.draggable) {
      color: $disabled-color;
      pointer-events: none;
    }
  }
  .draggable {
    background-color: $layout-body-background;
    &:hover {
      color: $primary-5;
      /* stylelint-disable-next-line */
      outline: 1px dashed $primary-color;
      /* stylelint-disable-next-line */
      outline-offset: -1px;
    }
  }
}
.icon {
  margin-right: 5px;
}
</style>