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

package/src/page-designer/setting-panel/css-editor/CssEditor.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="epx-page-designer-setting-css-editor">
+    <textarea class="editor" ref="textarea" name="" id="" cols="30" rows="3" v-model="content"></textarea>
+  </div>
+</template>
+<script>
+export default {
+  name: 'epx-page-designer-setting-css-editor',
+  props: {
+    value: String
+  },
+  data () {
+    return {
+      content: ''
+    }
+  },
+  watch: {
+    value: {
+      handler (v) {
+        if (this.content !== v) {
+          this.content = v
+          if (this.editor) this.editor.setValue(this.content)
+        }
+      },
+      immediate: true
+    },
+    content (v) {
+      this.$emit('change', v)
+    }
+  },
+  methods: {
+    editorInit () {
+      require.ensure([], () => {
+        const CodeMirror = require('codemirror')
+        globalThis.codemirror = CodeMirror
+        require('codemirror/addon/hint/show-hint.js')
+        require('./css-hint.js')
+        require('codemirror/lib/codemirror.css')
+        require('codemirror/addon/hint/show-hint.css')
+        require('codemirror/addon/edit/matchbrackets.js')
+        require('codemirror/addon/edit/closebrackets.js')
+        require('codemirror/mode/css/css.js')
+        require('@epxing/theme/src/idea.css')
+
+        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+          theme: 'idea',
+          mode: { name: 'text/css' },
+          matchBrackets: true,
+          autofocus: true,
+          showCursorWhenSelecting: true,
+          autoCloseBrackets: true,
+          extraKeys: { Ctrl: 'autocomplete' },
+          inputStyle: 'contenteditable',
+          hintOptions: { completeSingle: false, closeOnUnfocus: false }
+        })
+        this.editor.on('change', (editor, change) => { // 任意键触发autocomplete
+          if (change.origin === '+input') {
+            const text = change.text[0]
+            if (/\w+/.test(text)) {
+              setTimeout(function () { editor.execCommand('autocomplete') }, 200)
+            }
+          }
+        })
+        this.editor.on('blur', (editor) => {
+          this.content = editor.getValue()
+        })
+        this.editor.showHint()
+        if (this.value) {
+          this.editor.setValue(this.value)
+        }
+      }, (err) => {
+        console.error(err)
+      }, 'codemirror')
+    }
+  },
+  created () {
+    this.editorInit()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.epx-page-designer-setting-css-editor {
+  width: 100%;
+  height: 400px;
+  border: 1px solid #e3e3e3;
+
+    :deep(.CodeMirror) {
+      height: 100%;
+    }
+
+}
+</style>

package/src/page-designer/setting-panel/css-editor/css-hint.js

@@ -0,0 +1,58 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/5/LICENSE
+/* eslint-disable */
+// 直接 import（webpack/Vite 双兼容），替代读 globalThis.codemirror（ESM import 提升会先于 global 赋值执行）
+import CodeMirror from 'codemirror'
+
+var pseudoClasses = {"active":1, "after":1, "before":1, "checked":1, "default":1,
+  "disabled":1, "empty":1, "enabled":1, "first-child":1, "first-letter":1,
+  "first-line":1, "first-of-type":1, "focus":1, "hover":1, "in-range":1,
+  "indeterminate":1, "invalid":1, "lang":1, "last-child":1, "last-of-type":1,
+  "link":1, "not":1, "nth-child":1, "nth-last-child":1, "nth-last-of-type":1,
+  "nth-of-type":1, "only-of-type":1, "only-child":1, "optional":1, "out-of-range":1,
+  "placeholder":1, "read-only":1, "read-write":1, "required":1, "root":1,
+  "selection":1, "target":1, "valid":1, "visited":1, ":current": 1
+};
+
+CodeMirror.registerHelper("hint", "css", function(cm) {
+  var cur = cm.getCursor(), token = cm.getTokenAt(cur);
+  var inner = CodeMirror.innerMode(cm.getMode(), token.state);
+  if (inner.mode.name != "css") return;
+
+  if (token.type == "keyword" && "!important".indexOf(token.string) == 0)
+    return {list: ["!important"], from: CodeMirror.Pos(cur.line, token.start),
+            to: CodeMirror.Pos(cur.line, token.end)};
+
+  var start = token.start, end = cur.ch, word = token.string.slice(0, end - start);
+  if (/[^\w$_-]/.test(word)) {
+    word = ""; start = end = cur.ch;
+  }
+
+  var spec = CodeMirror.resolveMode("text/css");
+
+  var result = [];
+  function add(keywords) {
+    for (var name in keywords)
+      if (!word || name.lastIndexOf(word, 0) == 0)
+        result.push(name);
+  }
+
+  var st = inner.state.state;
+  if (st == "pseudo" || token.type == "variable-3") {
+    add(pseudoClasses);
+  } else if (st == "block" || st == "maybeprop") {
+    add(spec.propertyKeywords);
+  } else if (st == "prop" || st == "parens" || st == "at" || st == "params") {
+    add(spec.valueKeywords);
+    add(spec.colorKeywords);
+  } else if (st == "media" || st == "media_parens") {
+    add(spec.mediaTypes);
+    add(spec.mediaFeatures);
+  }
+
+  if (result.length) return {
+    list: result,
+    from: CodeMirror.Pos(cur.line, start),
+    to: CodeMirror.Pos(cur.line, end)
+  };
+});

package/src/page-designer/setting-panel/index.js

@@ -0,0 +1,10 @@
+import SettingPanel from './Setting.vue'
+import SettingProperty from './Property.vue'
+import SettingStyle from './Style.vue'
+import SettingAdvance from './Advance.vue'
+export {
+  SettingPanel,
+  SettingProperty,
+  SettingStyle,
+  SettingAdvance
+}

package/src/page-designer/template-attribute-panel/TemplateAttributePanel.vue

@@ -0,0 +1,383 @@
+<template>
+ <div class="epx-page-designer-page-variable" :style="{width: '360px'}">
+    <div class="epx-page-designer-page-variable__header">
+      <span>配置参数设置</span>
+      <i class="el-icon-close" @click="$emit('close')"></i>
+    </div>
+    <div class="epx-page-designer-page-variable__content">
+      <div class="epx-page-designer-page-variable__operates">
+        <el-button type="primary" size="default" @click="addGroup">+ 新增分组</el-button>
+        <el-button type="primary" size="default" @click="addAttribute(null)" >+ 新增配置参数</el-button>
+      </div>
+      <div class="attribute-container">
+      <draggable :list="templateAttributeTree" tag="ul" class="attribute-tree" @change="moveTree(null)">
+        <template v-for="item in templateAttributeTree" :key="item.id">
+          <li class="attribute-item attribute-item--group" :class="{'attribute-item--open': openedGroup[item.id] }" v-if="item.entity.data.TYPE==='area'" >
+            <div class="attribute-item__header">
+              <div class="attribute-item__title">
+                <i class="el-icon-caret-right attribute-item__header-icon" @click="switchGroupOpen(item)"></i>
+                <span>{{item.text}}</span>
+              </div>
+              <div class="attribute-item__operate">
+                <i class="el-icon-circle-plus-outline" @click="addAttribute(item.id)"></i>
+                <el-dropdown trigger="click" @command="command=>operateAttribute(command, item)">
+                  <i class="el-icon-more"></i>
+                  <template v-slot:dropdown><el-dropdown-menu>
+                    <el-dropdown-item command="rename">重命名</el-dropdown-item>
+                    <el-dropdown-item command="remove">删除</el-dropdown-item>
+                  </el-dropdown-menu></template>
+                </el-dropdown>
+              </div>
+            </div>
+            <draggable tag="ul" :list="item.children" class="attribute-sublist" @change="moveTree(item.children, item.id)">
+              <li class="attribute-item attribute-item--sub" v-for="subItem in item.children" :key="subItem.ID">
+                <div class="attribute-item__header">
+                  <div class="attribute-item__title">
+                    <span>{{subItem.text}}</span>
+                    <i class="el-icon-copy-document attribute-item__copy" title="复制编号" @click="copyCode(subItem)"></i>
+                  </div>
+                  <div class="attribute-item__operate">
+                    <el-dropdown trigger="click" @command="command=>operateAttribute(command, subItem)">
+                      <i class="el-icon-more"></i>
+                      <template v-slot:dropdown><el-dropdown-menu>
+                        <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                        <el-dropdown-item command="remove">删除</el-dropdown-item>
+                      </el-dropdown-menu></template>
+                    </el-dropdown>
+                  </div>
+                </div>
+              </li>
+            </draggable>
+          </li>
+          <li class="attribute-item" v-else  :key="item.ID">
+            <div class="attribute-item__header">
+              <div class="attribute-item__title">
+                <span>{{item.text}}</span>
+                <i class="el-icon-copy-document attribute-item__copy" title="复制编号" @click="copyCode(item)"></i>
+              </div>
+              <div class="attribute-item__operate">
+                <el-dropdown trigger="click" @command="command=>operateAttribute(command, item)">
+                  <i class="el-icon-more"></i>
+                  <template v-slot:dropdown><el-dropdown-menu>
+                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                    <el-dropdown-item command="remove">删除</el-dropdown-item>
+                  </el-dropdown-menu></template>
+                </el-dropdown>
+              </div>
+            </div>
+          </li>
+        </template>
+      </draggable>
+      </div>
+    </div>
+    <el-dialog v-model="showAttributeDialog" title="配置参数编辑" append-to-body v-if="showAttributeDialog">
+      <epx-table-form
+        ref="form"
+        :metaId="metaId"
+        :fieldsConfigs="fieldsConfigs"
+        pageType="EDIT"
+        v-model="attributeForm"
+        :fieldRelation="fieldRelation"
+        :column="1"
+      >
+      </epx-table-form>
+      <div class="attribute-form__button">
+        <el-button type="primary" size="default" @click="saveAttribute">保存</el-button>
+        <el-button size="default" @click="showAttributeDialog = false">取消</el-button>
+      </div>
+    </el-dialog>
+ </div>
+</template>
+
+<script>
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-page-designer-template-attibute-panel',
+  components: {
+    draggable
+  },
+  props: {
+    designer: Object,
+    templateInfo: Object
+  },
+  data () {
+    return {
+      templateAttributeTree: [],
+      showAttributeDialog: false,
+      fieldRelation: [],
+      fieldsConfigs: [],
+      attributeForm: {},
+      openedGroup: {}
+    }
+  },
+  computed: {
+    metaId () {
+      return this.designer.mode === 'component' ? 'FM_PAGE_ATTRIBUTE' : 'FM_TEMPLATE_ATTRIBUTE'
+    },
+    linkField () {
+      return this.designer.mode === 'component' ? 'PAGE' : 'TEMPLATE'
+    }
+  },
+  methods: {
+    getTemplateAttribute () {
+      this.$http.$post({
+        action: 'getTree',
+        entityId: this.metaId,
+        [`scope.${this.linkField}`]: this.templateInfo.ID,
+        showEntity: '1'
+      })
+        .then((data) => {
+          this.templateAttributeTree = data
+          this.designer.setTemplateAttributeTree(data)
+        })
+        .catch((err) => {
+          this.$message.error(err.message)
+        })
+    },
+    moveTree (arr, parentId) {
+      const str = (arr || this.templateAttributeTree).reduce((str, item, index) => (str += (item.id || item.ID) + ':' + index + ','), '')
+      this.$http.$post({
+        action: 'moveTree',
+        entityId: this.metaId,
+        newParentId: parentId || 'root',
+        selfAttriName: 'ID',
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+    },
+    getFieldRelation () {
+      this.$http.$post({
+        action: 'getFieldRelation',
+        entityId: 'FM_ATTRIBUTE_RELATION',
+        metaId: this.metaId
+      })
+        .then(data => {
+          this.fieldRelation = data.field_relation
+        })
+    },
+    getFieldConfigs () {
+      this.$FieldFactory.createFields({
+        defaultFieldConfigs: {
+          CLIENT: { state: 'HIDDEN', value: this.CLIENT },
+          SYSTEM: { state: 'HIDDEN', value: this.SYSTEM },
+          [this.linkField]: { state: 'HIDDEN' },
+          UP_ID: { state: 'HIDDEN' },
+          ORDER_NUM: { state: 'HIDDEN' }
+        },
+        metaId: this.metaId,
+        pageType: 'EDIT'
+      })
+        .then(data => {
+          this.fieldsConfigs = [...data]
+        })
+    },
+    addGroup () {
+      this.$prompt('请输入分组名称', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /.+/,
+        inputErrorMessage: '请输入分组名称'
+      }).then(({ value }) => {
+        this.$http.save({
+          entityId: this.metaId,
+          [`bean.${this.linkField}`]: this.templateInfo.ID,
+          'bean.NAME': value,
+          'bean.TYPE': 'area'
+        })
+          .then(() => {
+            this.$message.success('添加成功')
+            this.getTemplateAttribute()
+          })
+          .catch((err) => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    switchGroupOpen (item) {
+      if (!this.openedGroup[item.id]) {
+        this.openedGroup[item.id] = true
+      } else {
+        this.openedGroup[item.id] = false
+      }
+    },
+    operateAttribute (command, item) {
+      if (command === 'edit') {
+        this.editAttribute(item)
+      }
+      if (command === 'remove') {
+        this.removeAttribute(item)
+      }
+      if (command === 'rename') {
+        this.renameAttribute(item)
+      }
+    },
+    renameAttribute (item) {
+      this.$prompt('请输入名称', '重命名', {
+        inputValue: item.entity.data.NAME,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /.+/,
+        inputErrorMessage: '请输入名称'
+      }).then(({ value }) => {
+        this.$http.update({
+          entityId: this.metaId,
+          'bean.ID': item.id,
+          'bean.NAME': value
+        })
+          .then(() => {
+            this.$message.success('修改成功')
+            this.getTemplateAttribute()
+          })
+          .catch((err) => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    editAttribute (item) {
+      this.attributeForm = { ...item.entity.data }
+      this.showAttributeDialog = true
+    },
+    removeAttribute (item) {
+      this.$confirm('确认删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.removeMulti({
+          entityId: this.metaId,
+          ids: item.id
+        })
+          .then(() => {
+            this.$message.success('保存成功')
+            this.getTemplateAttribute()
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    addAttribute (groupId) {
+      this.attributeForm = {}
+      this.addGroupId = groupId
+      this.showAttributeDialog = true
+    },
+    saveAttribute () {
+      this.$refs.form.validate((valid, err) => {
+        if (!valid) {
+          for (const key in err) {
+            const errMessgae = err[key][0]
+            this.$message.error(errMessgae.message)
+            return
+          }
+        } else {
+          const bean = {
+            [this.linkField]: this.templateInfo.ID,
+            CLIENT: this.CLIENT,
+            SYSTEM: this.SYSTEM,
+            UP_ID: this.addGroupId
+          }
+          for (const key in this.attributeForm) {
+            if (!key.includes('#')) {
+              bean[key] = this.attributeForm[key]
+            }
+          }
+          this.$http[this.attributeForm.ID ? 'update' : 'save']({
+            entityId: this.metaId,
+            bean
+          })
+            .then(data => {
+              this.$message.success('保存成功')
+              this.getTemplateAttribute()
+              this.showAttributeDialog = false
+            })
+            .catch(err => {
+              this.$message.error(err.message)
+            })
+        }
+      })
+    },
+    copyCode (item) {
+      this.$util.copyToClipboard(`@[${item.entity.data.CODE}]`, () => {
+        this.$message.success('复制成功')
+      })
+    }
+  },
+  mounted () {
+    this.getFieldRelation()
+    this.getFieldConfigs()
+    this.getTemplateAttribute()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attribute-item {
+  border-bottom: 1px solid #e3e3e3;
+}
+.attribute-item--group {
+  border-bottom: 0;
+  >.attribute-item__header {
+    background: rgba(31,56,88,0.1)!important;
+  }
+}
+.attribute-item--sub {
+  .attribute-item__header{
+    padding-left: 32px;
+  }
+}
+.attribute-item--open {
+  .attribute-item__header-icon {
+    transform: rotate(90deg);
+  }
+  .attribute-sublist {
+    height: auto;
+  }
+}
+.attribute-item__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 46px;
+  padding: 0 16px;
+  &.is-active, &:hover {
+    @include bg_color_primary(.1)
+  }
+  &:hover {
+    >.attribute-item__operate {
+      display: block;
+    }
+  }
+}
+.attribute-item__title {
+  color: #222;
+  .attribute-item__header-icon {
+    margin-right: 4px;
+    cursor: pointer;
+    transition: all .3s;
+  }
+}
+.attribute-item__copy {
+  @include font_color_primary;
+  cursor: pointer;
+  margin-left: 4px;
+}
+.attribute-item__operate {
+  display: none;
+  >i {
+    cursor: pointer;
+    @include font_color_primary;
+    margin-right: 8px;
+  }
+  .el-dropdown {
+    cursor: pointer;
+  }
+}
+.attribute-form__button {
+  text-align: center;
+  margin: 10px 0;
+}
+.attribute-sublist {
+  height: 0;
+  overflow: hidden;
+}
+</style>

package/src/page-designer/template-attribute-panel/index.js

@@ -0,0 +1,2 @@
+import TemplateAttributePanel from './TemplateAttributePanel.vue'
+export default TemplateAttributePanel