@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/widgets/TabsConfig.vue

@@ -0,0 +1,266 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import draggable from '@epxing/core/src/components/draggable'
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+export default {
+  name: 'epx-tabs-config',
+  extends: ComponentVue,
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      tabName: {},
+      editTab: {},
+      editTabDialog: false
+    }
+  },
+  computed: {
+    tabs: {
+      get () {
+        const { items = [] } = this.widget
+        return items
+      },
+      set (v) {
+        this.designer.updateWidget(this.id, { items: v })
+      }
+    },
+    selectedWidget () {
+      return this.designer.selectedWidget
+    },
+    widgetConfig () {
+      const compId = this.selectedWidget.id
+      const widgetConfig = this.designer.widgetConfig[compId] || {}
+      return widgetConfig
+    },
+    variableSets: {
+      get () {
+        return this.designer.pageConfig?.variableSets || []
+      }
+    },
+    variableTree () {
+      const { iterator } = this.widgetConfig
+      const variableList = this.variableSets.map(item => ({ ...item, type: 'variable', text: item.name || item.code, code: item.code }))
+      if (iterator?.data) {
+        variableList.push({
+          type: 'variable',
+          text: this.selectedWidget.title + '_迭代变量',
+          code: iterator.name || 'item'
+        })
+      }
+      return [{
+        code: 'PAGE_VARIABLE',
+        text: '页面变量',
+        children: variableList
+      }]
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      if (this.tabs) {
+        this.tabs.forEach(item => {
+          this.tabName[item.id] = item.title
+        })
+      }
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: true,
+        componentName: this.componentInfo.title,
+        type: 'card',
+        span: 24,
+        tabIndex: '$[tabIndex]'
+      }
+      this.subDefaultConfigs = {
+        tabCount: false
+      }
+    },
+    initConfig () {
+      const config = { ...this.compConfig }
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      for (const key in this.config) {
+        const configOption = this.configOptions.find(item => item.key === key) || {}
+        if (configOption.type === 'field') {
+          this.selectFieldWay[key] = 'custom'
+        }
+      }
+    },
+    addTabPane () {
+      const { items = [] } = this.widget
+      const id = 'tabpane_' + this.$util.genId()
+      const name = '标签项' + (items.length + 1)
+      const newTabPane = { id, title: name, contentType: 'tab-pane' }
+      this.tabName[id] = name
+      this.designer.addWidget(newTabPane, this.widget, { defaultSelected: false })
+    },
+    changeTabPane (item) {
+      this.designer.updateWidget(item.id, { title: this.tabName[item.id] })
+    },
+    deleteTabPane (item) {
+      if (this.tabs.length <= 1) {
+        this.$message.error('标签项至少要有一个')
+        return
+      }
+      this.designer.deleteWidget(item, this.widget)
+    },
+    editTabPane (item) {
+      const tabPaneConfig = this.designer.widgetConfig[item.id]
+      this.editTab = { ...item, showIf: tabPaneConfig?.showIf }
+      this.editTabDialog = true
+    },
+    changeTabPaneAttribute (key, v) {
+      this.editTab[key] = v
+    },
+    changeTabPaneLanguageAttribute (key, v) {
+      this.editTab[`${key}.i18n`] = v
+    },
+    saveTabPane () {
+      this.editTabDialog = false
+      if (this.editTab.showIf) {
+        const el = JSON.parse(this.editTab.showIf).el
+        this.designer.updateWidgetConfig(this.editTab.id, { showIf: el })
+      } else {
+        this.designer.updateWidgetConfig(this.editTab.id, { showIf: null })
+      }
+      delete this.editTab.showIf
+      const tabs = [...this.tabs]
+      const index = tabs.findIndex(component => component.id === this.editTab.id)
+      if (index !== -1) {
+        tabs.splice(index, 1, { ...this.editTab })
+        this.tabs = tabs
+      }
+    },
+    renderTabPane (item) {
+      return (
+        <div class="">
+          <draggable v-model={this.tabs} tag="ul" group="tab-pane" handle=".tab-item__drag-icon" class="tab__list">
+            {
+              this.tabs.map(item => (
+                <li class={{ tab__item: true }}
+                >
+                  <i class="tab-item__drag-icon epx-icon-tuozhuai"></i>
+                  <el-input class="tab-item__input" size="small" type="text" v-model={this.tabName[item.id]} onChange={this.changeTabPane.bind(this, item)}></el-input>
+                  <span class="tab-item__operates">
+                    <el-button type="primary" link size="default" icon="el-icon-setting" onClick={this.editTabPane.bind(this, item)}></el-button>
+                    <el-button type="primary" link size="default" icon="el-icon-delete" onClick={this.deleteTabPane.bind(this, item)}></el-button>
+                  </span>
+                </li>
+              ))
+            }
+          </draggable>
+          <el-button type="primary" link onClick={this.addTabPane}>+ 添加标签项</el-button>
+          <el-dialog
+            title="修改标签项"
+            modelValue={this.editTabDialog}
+            width="420px"
+            append-to-body
+            destroy-on-close
+            onClose={() => { this.editTabDialog = false }}
+          >
+            {
+              this.editTabDialog && (
+                <el-form inline label-position="left" label-width="100px" >
+                  <el-form-item label="名称" class="epx-visual-component__form-item">
+                    <epx-visual-config-input
+                      label="名称"
+                      value={this.editTab.title}
+                      i18nValue={this.editTab['title.i18n']}
+                      onChangeConfigs={this.changeTabPaneAttribute.bind(this, 'title')}
+                      onChange-language-config={this.changeTabPaneLanguageAttribute.bind(this, 'title')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="图标" class="epx-visual-component__form-item">
+                    <epx-visual-config-object
+                      type={item.type}
+                      value={this.editTab.icon}
+                      object="FM_FONT_ICON"
+                      label="图标"
+                      dataKey="CODE"
+                      onChangeConfigs={this.changeTabPaneAttribute.bind(this, 'icon')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="显示数量" class="epx-visual-component__form-item">
+                    <el-radio-group v-model={this.editTab.tabCount}>
+                      <el-radio label={true} value={true}>显示</el-radio>
+                      <el-radio label={false} value={false}>不显示</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item label="统计对象" class="epx-visual-component__form-item">
+                    <epx-visual-config-object
+                      value={this.editTab.metaId}
+                      object="FM_ENTITY"
+                      label="统计对象"
+                      onChangeConfigs={this.changeTabPaneAttribute.bind(this, 'metaId')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="查询参数" class="epx-visual-component__form-item">
+                    <epx-visual-config-params
+                      value={this.editTab.countParams}
+                      treeFieldStore={this.treeFieldStore}
+                      pageParams={this.pageParams}
+                      onChangeConfigs={this.changeTabPaneAttribute.bind(this, 'countParams')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="数量范围" class="epx-visual-component__form-item">
+                    <epx-visual-config-scope
+                      value={this.editTab.countScopeParams}
+                      pageParams={this.pageParams}
+                      treeFieldStore={this.treeFieldStore}
+                      componentMetaId={this.editTab.metaId || this.getConfigMetaId(item) || this.pageMetaId}
+                      scopeConfigs={this.scopeConfigs}
+                      onChangeConfigs={this.changeTabPaneAttribute.bind(this, 'countScopeParams')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="显示条件">
+                    <epx-rule
+                      formulaType='web'
+                      v-model={this.editTab.showIf}
+                      metaId={this.getConfigMetaId(item) || this.pageMetaId}
+                      variableList={this.variableTree}
+                      fieldConfigs={{ state: 'EDIT', functionType: 'web' }}
+                    >
+                    </epx-rule>
+                  </el-form-item>
+                </el-form>
+              )
+            }
+
+            <div class="button-group">
+              <el-button type="primary" size="default" onClick={this.saveTabPane}>确定</el-button>
+              <el-button size="default" onClick={() => { this.editTabDialog = false }}>取消</el-button>
+            </div>
+          </el-dialog>
+        </div>
+      )
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tab__item {
+  display: flex;
+}
+.tab-item__drag-icon {
+  color: #AAAAAA;
+  margin-right: 5px;
+  cursor: move;
+}
+.tab-item__input {
+  width: 150px;
+  margin-right: 10px;
+}
+.tab-item__operates {
+  white-space: nowrap;
+
+    :deep(.el-button:last-child) {
+      color: #FF3535;
+    }
+
+}
+.button-group {
+  text-align: center;
+}
+</style>

package/types/index.d.ts

@@ -0,0 +1,22 @@
+import type { App, DefineComponent, Plugin } from 'vue'
+export declare const ProcessFormItemVisual: DefineComponent<any, any, any>
+export declare const VisualComponent: DefineComponent<any, any, any>
+export declare const VisualConfigPage: DefineComponent<any, any, any>
+export declare const VisualEntityList: DefineComponent<any, any, any>
+export declare const VisualEntitySubList: DefineComponent<any, any, any>
+export declare const VisualConfigField: DefineComponent<any, any, any>
+export declare const VisualConfigListField: DefineComponent<any, any, any>
+export declare const VisualConfigOrderField: DefineComponent<any, any, any>
+export declare const PageDesigner: DefineComponent<any, any, any>
+export declare const CardFormItemVisual: DefineComponent<any, any, any>
+export declare const CarouselVisual: DefineComponent<any, any, any>
+export declare const CollapseVisual: DefineComponent<any, any, any>
+export declare const DropdownVisual: DefineComponent<any, any, any>
+export declare const LayoutConfig: DefineComponent<any, any, any>
+export declare const ListVisual: DefineComponent<any, any, any>
+export declare const MEntityListFindVisual: DefineComponent<any, any, any>
+export declare const TabsConfig: DefineComponent<any, any, any>
+export declare const widgetPreviews: Record<string, import('vue').Component>
+export declare function install(app: App): void
+declare const plugin: Plugin
+export default plugin

package/types/page-designer.d.ts

@@ -0,0 +1,3 @@
+export { PageDesigner as default } from './index'
+import type { ComponentOptions } from 'vue'
+export declare const WidgetPreviewMixin: ComponentOptions

package/types/visual-component.d.ts

@@ -0,0 +1 @@
+export { VisualComponent as default } from './index'

package/types/visual-entity-list.d.ts

@@ -0,0 +1 @@
+export { VisualEntityList as default } from './index'

package/types/visual-entity-sub-list.d.ts

@@ -0,0 +1 @@
+export { VisualEntitySubList as default } from './index'