admin/ddei-editor
1
0
Fork 0
mirror of https://gitee.com/hoslay/ddei-editor.git synced 2025-12-07 01:28:28 +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事件 'type': [1, 2], //类别，1图形，2业务，3事件
'readonly': true, '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', 'code': 'fmt.type',
'name': '格式', 'name': '格式',
@ -521,7 +534,7 @@ export default {
subGroups: [ subGroups: [
{ {
name: "基础信息", 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"]
}, },
] ]

8
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) ctx.translate(-outRect.x * rat1 + addWidth / 2, -outRect.y * rat1 + addWidth / 2)
containerDiv.appendChild(canvas) containerDiv.appendChild(canvas)
models[0].pModel.midList.forEach(mid=>{
models.forEach(item => { models.forEach(item => {
if (item.id == mid){
item.render.clearCachedValue() item.render.clearCachedValue()
item.render.drawShape(); item.render.drawShape({});
}
}) })
})
ddInstance.render.ratio = oldRat1 ddInstance.render.ratio = oldRat1
let dataURL = canvas.toDataURL() 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; let selectedControls = ddInstance.stage.selectedModels;
//存在选中控件 //存在选中控件
if (selectedControls?.size > 0) { 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 //生成控件HTML
let copyHtml = '<html><head>'; let copyHtml = '<html><head>';
copyHtml += '<meta source="ddei">' copyHtml += '<meta source="ddei">'
let jsonStr = '[' let jsonStr = '['
let jsonLinksStr = '[' let jsonLinksStr = '['
let innerHTML = '' let innerHTML = ''
selectedControls?.forEach((model, key) => {
sortedModels?.forEach((model, key) => {
if (selectedControls?.size == 1) { if (selectedControls?.size == 1) {
if (model.baseModelType == "DDeiTable") { if (model.baseModelType == "DDeiTable") {
if (model.curRow == -1 && model.curCol == -1) { if (model.curRow == -1 && model.curCol == -1) {

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

@ -1,6 +1,7 @@
<template> <template>
<div class="ddei-pv-editor-aligntype"> <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-items">
<div :class="{ 'ddei-pv-editor-aligntype-item': true, 'ddei-pv-editor-aligntype-item--selected': value == 1 }" <div :class="{ 'ddei-pv-editor-aligntype-item': true, 'ddei-pv-editor-aligntype-item--selected': value == 1 }"
style="text-align:left" @click="valueChange(1, $event)"> style="text-align:left" @click="valueChange(1, $event)">
@ -350,12 +351,13 @@ export default {
} }
&:hover { &:hover {
border: 1px solid var(-dot); border: 1px solid var(--dot);
background: var(--panel-hover);
cursor: pointer; cursor: pointer;
} }
&--selected { &--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 dialogId = this.getShowDialogId(this.attrDefine.code)
let dialog = document.getElementById(dialogId); let dialog = document.getElementById(dialogId);
let haveElement = false; let haveElement = false;
for (let i = 0; i < document.body.children.length; i++) { let ele = document.getElementById(this.editor.containerid)
if (document.body.children[i] == dialog) { for (let i = 0; i < ele.children.length; i++) {
if (ele.children[i] == dialog) {
haveElement = true; haveElement = true;
} }
} }
@ -176,7 +177,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
/**以下为range属性编辑器 */
.ddei-pv-base-combox { .ddei-pv-base-combox {
height: 28px; height: 28px;
padding-right: 10px; padding-right: 10px;
@ -209,7 +209,6 @@ export default {
outline: none; outline: none;
font-size: 15px; font-size: 15px;
background: transparent; background: transparent;
color:var(--panel-title);
margin-top: 1px; margin-top: 1px;
} }

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

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

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

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