admin/ddei-editor
1
0
Fork 0
mirror of https://gitee.com/hoslay/ddei-editor.git synced 2025-12-06 17:18:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

对属性编辑器进行优化

Browse Source
This commit is contained in:
猴赛雷 2024-05-21 18:12:33 +08:00
parent 5eadd0797e
commit ca4cbae5ac
7 changed files with 91 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
plugins/core/controls/control/base/polygon.ts
View File

@ -404,6 +404,19 @@ export default {
'type': [1, 2], //类别，1图形，2业务，3事件
'readonly': true,
},
{
'code': 'text1',
'name': '文本1',
'desc': '控件的主体显示文本',
'controlType': 'excheckbox',
'dataType': 'integer',
'dataSource': [{ 'text': '文本', 'value': 0 }, { 'text': '数字', 'value': 1 }, { 'text': '金额', 'value': 2 }, { 'text': '时间', 'value': 3 }],
'itemStyle': { width: 80, height: 25, col: 2, row: 0, imgWidth: 20, imgHeight: 20 },
'isArray':true,
'defaultValue': [1,2],
'type': [1, 2], //类别，1图形，2业务，3事件
'readonly': true,
},
{
'code': 'fmt.type',
'name': '格式',
@ -521,7 +534,7 @@ export default {
subGroups: [
{
name: "基础信息",
attrs: ["code", "text", "fmt.type", "fmt.nscale", "fmt.tmark", "fmt.mmark", "fmt.munit", "fmt.mrmb", "fmt.dtype", "fmt.format"]
attrs: ["code", "text", "text1", "fmt.type", "fmt.nscale", "fmt.tmark", "fmt.mmark", "fmt.munit", "fmt.mrmb", "fmt.dtype", "fmt.format"]
},
]

12
plugins/core/hotkeys/actions/key-action-copy-image.ts
View File

@ -109,10 +109,16 @@ class DDeiKeyActionCopyImage extends DDeiKeyAction {
ctx.translate(-outRect.x * rat1 + addWidth / 2, -outRect.y * rat1 + addWidth / 2)
containerDiv.appendChild(canvas)
models.forEach(item => {
item.render.clearCachedValue()
item.render.drawShape();
models[0].pModel.midList.forEach(mid=>{
models.forEach(item => {
if (item.id == mid){
item.render.clearCachedValue()
item.render.drawShape({});
}
})
})
ddInstance.render.ratio = oldRat1
let dataURL = canvas.toDataURL()

13
plugins/core/hotkeys/actions/key-action-copy.ts
View File

@ -64,13 +64,24 @@ class DDeiKeyActionCopy extends DDeiKeyAction {
let selectedControls = ddInstance.stage.selectedModels;
//存在选中控件
if (selectedControls?.size > 0) {
//按照midlist排序输出
let models = Array.from(selectedControls.values())
let sortedModels = []
models[0].pModel.midList.forEach(mid => {
models.forEach(item => {
if (item.id == mid) {
sortedModels.push(item)
}
})
})
//生成控件HTML
let copyHtml = '<html><head>';
copyHtml += '<meta source="ddei">'
let jsonStr = '['
let jsonLinksStr = '['
let innerHTML = ''
selectedControls?.forEach((model, key) => {
sortedModels?.forEach((model, key) => {
if (selectedControls?.size == 1) {
if (model.baseModelType == "DDeiTable") {
if (model.curRow == -1 && model.curCol == -1) {

8
plugins/core/propeditors/PVAlignTypeEditor.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="ddei-pv-editor-aligntype">
<PVBaseCombox :attrDefine="attrDefine" ref="combox" :canSearch="false">
<PVBaseCombox :editor="editor" :controlDefine="controlDefine" :attrDefine="attrDefine" ref="combox"
:canSearch="false">
<div class="ddei-pv-editor-aligntype-items">
<div :class="{ 'ddei-pv-editor-aligntype-item': true, 'ddei-pv-editor-aligntype-item--selected': value == 1 }"
style="text-align:left" @click="valueChange(1, $event)">
@ -350,12 +351,13 @@ export default {
}
&:hover {
border: 1px solid var(-dot);
border: 1px solid var(--dot);
background: var(--panel-hover);
cursor: pointer;
}
&--selected {
border: 1px solid var(-dot);
border: 1px solid var(--dot);
}
}

7
plugins/core/propeditors/PVBaseCombox.vue
View File

@ -108,8 +108,9 @@ export default {
let dialogId = this.getShowDialogId(this.attrDefine.code)
let dialog = document.getElementById(dialogId);
let haveElement = false;
for (let i = 0; i < document.body.children.length; i++) {
if (document.body.children[i] == dialog) {
let ele = document.getElementById(this.editor.containerid)
for (let i = 0; i < ele.children.length; i++) {
if (ele.children[i] == dialog) {
haveElement = true;
}
}
@ -176,7 +177,6 @@ export default {
</script>
<style scoped>
/**以下为range属性编辑器 */
.ddei-pv-base-combox {
height: 28px;
padding-right: 10px;
@ -209,7 +209,6 @@ export default {
outline: none;
font-size: 15px;
background: transparent;
color:var(--panel-title);
margin-top: 1px;
}

17
plugins/core/propeditors/PVComboxEditor.vue
View File

@ -1,11 +1,12 @@
<template>
<div :class="{ 'ddei-pv-editor-combox': true, 'ddei-pv-editor-combox--disabled': !attrDefine || attrDefine.readonly }"
:style="{ 'pointer-events': attrDefine.readonly ? 'none' : '' }">
<PVBaseCombox :attrDefine="attrDefine" :searchMethod="doSearch" ref="combox" :canSearch="attrDefine?.canSearch">
<PVBaseCombox :editor="editor" :controlDefine="controlDefine" :attrDefine="attrDefine" :searchMethod="doSearch"
ref="combox" :canSearch="attrDefine?.canSearch">
<div class="itemboxs"
:style="{ width: width ? width + 'px' : '', height: height ? height + 'px' : '', 'grid-template-columns': gridTemplateColumns, 'grid-template-rows': gridTemplateRows }">
<div :style="{ width: attrDefine?.itemStyle?.width + 'px', height: attrDefine?.itemStyle?.height + 'px' }"
:class="{ 'itembox': true, 'itembox_selected': item.value == attrDefine.value, 'itembox_deleted': item.deleted, 'itembox_disabled': item.disabled, 'itembox_underline': item.underline, 'itembox_bold': item.bold }"
:class="{ 'itembox': true, 'itembox--selected': item.value == attrDefine.value, 'itembox--deleted': item.deleted, 'itembox--disabled': item.disabled, 'itembox--underline': item.underline, 'itembox--bold': item.bold }"
v-for="item in dataSource" @click="!item.disabled && valueChange(item.value, $event)" :title="item.desc">
<div v-if="item.img" class="itembox_img">
<img
@ -377,28 +378,28 @@ export default {
vertical-align: middle;
}
.ddei-combox-show-dialog-content .itembox_selected {
.ddei-combox-show-dialog-content .itembox--selected {
background-color: var(panel-title) !important;
}
.ddei-combox-show-dialog-content .itembox_deleted {
.ddei-combox-show-dialog-content .itembox--deleted {
text-decoration: line-through;
}
.ddei-combox-show-dialog-content .itembox_disabled {
.ddei-combox-show-dialog-content .itembox--disabled {
color: rgb(210, 210, 210);
text-decoration: line-through;
}
.ddei-combox-show-dialog-content .itembox_disabled:hover {
.ddei-combox-show-dialog-content .itembox--disabled:hover {
cursor: not-allowed !important;
}
.ddei-combox-show-dialog-content .itembox_underline {
.ddei-combox-show-dialog-content .itembox--underline {
text-decoration: underline;
}
.ddei-combox-show-dialog-content .itembox_bold .itembox_text {
.ddei-combox-show-dialog-content .itembox--bold .itembox_text {
font-weight: bold;
}
</style>

65
plugins/core/propeditors/PVExCheckboxEditor.vue
View File

@ -1,11 +1,13 @@
<template>
<div :class="{ 'ddei_pv_editor_excheckbox': true, 'ddei_pv_editor_excheckbox_disabled': attrDefine.readonly }"
<div :class="{ 'ddei-pv-editor-excheckbox': true, 'ddei-pv-editor-excheckbox--disabled': attrDefine.readonly }"
:style="{ 'pointer-events': attrDefine.readonly ? 'none' : '' }">
<PVBaseCombox :attrDefine="attrDefine" :searchMethod="doSearch" ref="combox" :canSearch="attrDefine.canSearch">
<PVBaseCombox :editor="editor" :controlDefine="controlDefine" :attrDefine="attrDefine" :searchMethod="doSearch"
ref="combox" :canSearch="attrDefine.canSearch">
<div class="itemboxs"
:style="{ width: width ? width + 'px' : '', height: height ? height + 'px' : '', 'grid-template-columns': gridTemplateColumns, 'grid-template-rows': gridTemplateRows }">
<div :style="{ width: attrDefine?.itemStyle?.width + 'px', height: attrDefine?.itemStyle?.height + 'px' }"
:class="{ 'itembox': true, 'itembox_selected': attrDefine?.value && attrDefine?.value?.indexOf(item.value) != -1, 'itembox_deleted': item.deleted, 'itembox_disabled': item.disabled || (attrDefine?.itemStyle?.maxSelect && attrDefine?.itemStyle?.maxSelect <= attrDefine?.value?.length && attrDefine?.value?.indexOf(item.value) == -1), 'itembox_underline': item.underline, 'itembox_bold': item.bold }"
:class="{ 'itembox': true, 'itembox--selected': attrDefine?.value && attrDefine?.value?.indexOf(item.value) != -1, 'itembox--deleted': item.deleted, 'itembox--disabled': item.disabled || (attrDefine?.itemStyle?.maxSelect && attrDefine?.itemStyle?.maxSelect <= attrDefine?.value?.length && attrDefine?.value?.indexOf(item.value) == -1), 'itembox--underline': item.underline, 'itembox--bold': item.bold }"
v-for="item in dataSource"
@click="!item.disabled && (!attrDefine?.itemStyle?.maxSelect || attrDefine?.itemStyle?.maxSelect > attrDefine?.value?.length || attrDefine?.value?.indexOf(item.value) != -1) && valueChange(item.value, $event)"
:title="item.desc">
@ -188,15 +190,21 @@ export default {
},
valueChange(value, evt) {
if (!this.attrDefine?.model) {
return;
}
if (this.attrDefine?.readonly) {
return;
}
if (!value) {
if (this.attrDefine.dataType.toLocaleLowerCase() == 'integer' || this.attrDefine.dataType.toLocaleLowerCase() == 'float' || this.attrDefine.dataType.toLocaleLowerCase() == 'number') {
if (!value && value != 0) {
return;
}
}else if(!value){
return;
}
let mds = [];
if (this.editor?.ddInstance?.stage?.selectedModels?.size > 0) {
mds = Array.from(
@ -221,7 +229,8 @@ export default {
if (!this.value) {
this.value = [];
}
let strValue = "" + value;
let strValue = value;
if (this.value.indexOf(strValue) == -1) {
this.value.push(strValue);
} else {
@ -230,7 +239,6 @@ export default {
this.value.splice(index, 1);
}
}
this.attrDefine.value = this.value;
let itemDefine = this.getDataDefine(this.value);
if (itemDefine?.length > 0) {
@ -243,6 +251,10 @@ export default {
this.$refs.combox.img = itemDefine[0].img;
}
this.$refs.combox.value = itemDefine[0].value;
}else{
this.$refs.combox.text = null;
this.$refs.combox.value = null
this.$refs.combox.img = null;
}
//通过解析器获取有效值
let parser: DDeiAbstractArrtibuteParser = this.attrDefine.getParser();
@ -315,65 +327,66 @@ export default {
<style scoped>
/**以下为combox属性编辑器 */
.ddei_pv_editor_excheckbox {
.ddei-pv-editor-excheckbox {
margin-top: 4px;
}
.ddei_pv_editor_excheckbox_disabled {}
.ddei-pv-editor-excheckbox--disabled {}
.ddei-combox-show-dialog_content .itemboxs {
.ddei-combox-show-dialog-content .itemboxs {
border-radius: 4px;
margin-top: 4px;
display: grid;
gap: 4px;
overflow: auto;
color: black;
color: var(--panel-title);
font-size: 13px;
}
.ddei-combox-show-dialog_content .itemboxs .itembox {
.ddei-combox-show-dialog-content .itemboxs .itembox {
outline: none;
font-size: 13px;
margin: auto;
background: transparent;
border: 1px solid var(--panel-title);
display: table;
border-radius: 4px;
}
.ddei-combox-show-dialog_content .itemboxs .itembox:hover {
background-color: rgb(245, 245, 245);
.ddei-combox-show-dialog-content .itemboxs .itembox:hover {
background-color: var(--panel-hover);
cursor: pointer;
}
.ddei-combox-show-dialog_content .itemboxs .itembox .itembox_img {
.ddei-combox-show-dialog-content .itemboxs .itembox .itembox_img {
display: table-cell;
padding-left: 5px;
vertical-align: middle;
}
.ddei-combox-show-dialog_content .itemboxs .itembox .itembox_img img {
.ddei-combox-show-dialog-content .itemboxs .itembox .itembox_img img {
text-align: center;
vertical-align: middle;
}
.ddei-combox-show-dialog_content .itemboxs .itembox .itembox_text {
.ddei-combox-show-dialog-content .itemboxs .itembox .itembox_text {
text-align: center;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.ddei-combox-show-dialog_content .itembox_selected {
border: 1px solid #017fff;
.ddei-combox-show-dialog-content .itembox--selected {
border: 1px solid var(--dot);
overflow: hidden;
position: relative;
}
.ddei-combox-show-dialog_content .itembox_selected::before {
.ddei-combox-show-dialog-content .itembox--selected::before {
position: absolute;
content: "";
-webkit-font-smoothing: antialiased;
background-color: #017fff;
background-color: var(--dot);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
@ -383,7 +396,7 @@ export default {
height: 15px;
}
.ddei-combox-show-dialog_content .itembox_selected::after {
.ddei-combox-show-dialog-content .itembox--selected::after {
font-size: 12px;
line-height: 12px;
right: -3px;
@ -397,23 +410,23 @@ export default {
color: #fff;
}
.ddei-combox-show-dialog_content .itembox_deleted {
.ddei-combox-show-dialog-content .itembox--deleted {
text-decoration: line-through;
}
.ddei-combox-show-dialog_content .itembox_disabled {
.ddei-combox-show-dialog-content .itembox--disabled {
color: rgb(210, 210, 210);
}
.ddei-combox-show-dialog_content .itembox_disabled:hover {
.ddei-combox-show-dialog-content .itembox--disabled:hover {
cursor: not-allowed !important;
}
.ddei-combox-show-dialog_content .itembox_underline {
.ddei-combox-show-dialog-content .itembox--underline {
text-decoration: underline;
}
.ddei-combox-show-dialog_content .itembox_bold .itembox_text {
.ddei-combox-show-dialog-content .itembox--bold .itembox_text {
font-weight: bold;
}
</style>