Skip to content

Commit

Permalink
调整优化 setConfig API & 支持隐藏全部/部分参数分组 & 细化参数 demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@CcSimple
CcSimple committed Jul 10, 2024
1 parent 20a84ef commit c926eb5
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 91 deletions.
306 changes: 219 additions & 87 deletions src/demo/design/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,19 @@
<a-button type="primary" @click="ippRequestPrint">
ipp请求 打印测试
</a-button>
<div>元素参数操作:</div>
<a-button type="primary" @click="setOptionConfig(-1)"> 测试隐藏参数[看代码]
</a-button>
<a-button type="primary" @click="setOptionConfig(1)"> 隐藏[文本] "边框"、"高级"
</a-button>
<a-button type="primary" @click="setOptionConfig(2)"> [图片]不分组
</a-button>
<a-button type="primary" @click="setOptionConfig(3)"> 重写[文本] "字体大小"、"元素层级"
</a-button>
<a-button type="primary" @click="setOptionConfig(4)"> [文本]新增 "缩放"
</a-button>
<a-button type="primary" @click="setOptionConfig(0)"> 还原配置
</a-button>
</a-space>
<a-space style="margin-bottom: 10px">
<a-textarea style="width:30vw" v-model="jsonIn" @pressEnter="updateJson"
Expand Down Expand Up @@ -123,6 +136,7 @@
<a-button type="primary" @click="updateFontWeight">
选中元素字体Bolder
</a-button>
<div>选中元素后点击:</div>
<a-button type="primary" @click="setElsSpace(true)"> 水平间距10
</a-button>
<a-button type="primary" @click="setElsSpace(false)"> 垂直间距10
Expand Down Expand Up @@ -473,90 +487,6 @@ export default {
});
// 还原配置
hiprint.setConfig()
// 替换配置
hiprint.setConfig({
optionItems: [
fontSize,
scale,
function () {
function t() {
this.name = "zIndex";
}
return t.prototype.css = function (t, e) {
if (t && t.length) {
if (e) return t.css('z-index', e);
}
return null;
}, t.prototype.createTarget = function () {
return this.target = $('<div class="hiprint-option-item">\n <div class="hiprint-option-item-label">\n 元素层级2\n </div>\n <div class="hiprint-option-item-field">\n <input type="number" class="auto-submit"/>\n </div>\n </div>'), this.target;
}, t.prototype.getValue = function () {
var t = this.target.find("input").val();
if (t) return parseInt(t.toString());
}, t.prototype.setValue = function (t) {
this.target.find("input").val(t);
}, t.prototype.destroy = function () {
this.target.remove();
}, t;
}(),
],
movingDistance: 2.5,
text: {
tabs: [
// 隐藏部分
{
// name: '测试', // tab名称 可忽略
options: [] // 必须包含 options
},// 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
{
name: '样式', options: [
{
name: 'scale',
after: 'transform', // 自定义参数，插入在 transform 之后
hidden: false
},
]
}
],
supportOptions: [
{
name: 'styler',
hidden: true
},
{
name: 'scale', // 自定义参数，supportOptions 必须得添加
after: 'transform', // 自定义参数，插入在 transform 之后
hidden: false
},
{
name: 'formatter',
hidden: true
},
]
},
image: {
tabs: [
{
// 整体替换
replace: true,
name: '基本', options: [
{
name: 'field',
hidden: false
},
{
name: 'src',
hidden: false
},
{
name: 'fit',
hidden: false
}
]
},
],
}
})
// eslint-disable-next-line no-undef
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
$('#hiprint-printTemplate').empty()
Expand Down Expand Up @@ -615,6 +545,208 @@ export default {
// 获取当前放大比例, 当zoom时传true 才会有
this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
},
setOptionConfig(type) {
switch (type) {
case -1: // 测试
hiprint.setConfig({
movingDistance: 2.5,
text: {
tabs: [
// 隐藏部分
{
// name: '测试', // tab名称 可忽略
options: [
{
name: 'fixed',
hidden: true
},
]
},
// 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
],
supportOptions: [
{
name: 'styler',
hidden: true
},
{
name: 'formatter',
hidden: true
},
]
},
image: {
tabs: [
{
// 整体替换
replace: true,
name: '基本', options: [
{
name: 'field',
hidden: false
},
{
name: 'src',
hidden: false
},
{
name: 'fit',
hidden: false
}
]
},
],
}
})
hiprint.setConfig({
movingDistance: 2.5,
text: {
tabs: [
// 隐藏部分
{
// name: '测试', // tab名称 可忽略
options: [
{
name: 'fixed',
hidden: true
},
]
},
// 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
],
supportOptions: [
{
name: 'styler',
hidden: true
},
{
name: 'formatter',
hidden: true
},
]
},
image: {
tabs: [
{
// 整体替换
replace: true,
name: '基本', options: [
{
name: 'field',
hidden: false
},
{
name: 'src',
hidden: false
},
{
name: 'fit',
hidden: false
}
]
},
],
}
})
break;
case 0: // 还原配置
hiprint.setConfig();
break;
case 1: // 隐藏文本 边框、高级
hiprint.setConfig({
text: {
tabs: [
{},
{},
// 隐藏边框
{
name: '边框',
replace: true, // 整体替换
options: []
},
// 隐藏高级
{
name: '高级',
replace: true, // 整体替换
options: []
},
],
}
});
break
case 2: // 图片元素 参数不分组
hiprint.setConfig({
image: {
tabs: [],
supportOptions: [],
}
});
break;
case 3: // 重写字体大小、元素层级参数
hiprint.setConfig({
optionItems: [
fontSize,
function () {
function t() {
this.name = "zIndex";
}
return t.prototype.css = function (t, e) {
if (t && t.length) {
if (e) return t.css('z-index', e);
}
return null;
}, t.prototype.createTarget = function () {
return this.target = $('<div class="hiprint-option-item">\n <div class="hiprint-option-item-label">\n 元素层级2\n </div>\n <div class="hiprint-option-item-field">\n <input type="number" class="auto-submit"/>\n </div>\n </div>'), this.target;
}, t.prototype.getValue = function () {
var t = this.target.find("input").val();
if (t) return parseInt(t.toString());
}, t.prototype.setValue = function (t) {
this.target.find("input").val(t);
}, t.prototype.destroy = function () {
this.target.remove();
}, t;
}(),
]
});
break;
case 4: // 新增缩放参数
hiprint.setConfig({
optionItems: [
scale,
],
movingDistance: 2.5,
text: {
tabs: [
{},
// 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
{
name: '样式', options: [
{
name: 'scale',
after: 'transform', // 自定义参数，插入在 transform 之后
hidden: false
},
]
}
],
}
});
break;
}
// 参数 tabs 会缓存. 这里演示: 手动清空一下, 再点击选中元素
console.log(hiprintTemplate);
hiprintTemplate.editingPanel.printElements.forEach((e) => {
if (e._printElementOptionTabs) {
delete e._printElementOptionTabs;
}
if (e._printElementOptionItems) {
delete e._printElementOptionItems;
}
});
let els = hiprintTemplate.getSelectEls();
els && els.length && els[0].designTarget.trigger($.Event('click'));
},
/**
* 设置纸张大小
* @param type [A3, A4, A5, B3, B4, B5, other]
Expand Down Expand Up @@ -739,7 +871,7 @@ export default {
content: (h) => (
<div>
连接【{hiwebSocket.host}】失败！
<br />
<br/>
请确保目标服务器已
<a
href="https://gitee.com/CcSimple/electron-hiprint/releases"
Expand Down Expand Up @@ -768,7 +900,7 @@ export default {
content: (h) => (
<div>
连接【{hiwebSocket.host}】失败！
<br />
<br/>
请确保目标服务器已
<a
href="https://gitee.com/CcSimple/electron-hiprint/releases"
Expand Down Expand Up @@ -950,7 +1082,7 @@ export default {
setElsSpace(h) {
hiprintTemplate.setElsSpace(10, h)
},
setEleSelectByField(){
setEleSelectByField() {
hiprintTemplate.selectElementsByField(['name'])
},
getSelectEls() {
Expand Down
11 changes: 7 additions & 4 deletions src/hiprint/hiprint.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10262,7 +10262,7 @@ var hiprint = function (t) {
var r;
if (tabs.length) {
r = $('<div class="prop-tabs"><ul class="prop-tab-items"></ul></div>');
tabs.forEach(function (tab) {
tabs.filter((e) => e.list.length > 0).forEach(function (tab) {
var item = $('<li class="prop-tab-item"><span class="tab-title">' + i18n.__(tab.name) + '</span></li>')
r.find('.prop-tab-items').append(item)
var options = $('<div class="hiprint-option-items" data-title="' + i18n.__(tab.name) + '"></div>')
Expand Down Expand Up @@ -11093,8 +11093,8 @@ var hiprint = function (t) {
if (tab.replace) {
$.extend(p.a.instance[i].tabs[idx], tab);
} else {
var options = tab.options, list = p.a.instance[i].tabs[idx].options;
options.forEach(function (o) {
var options = tab.options || [], list = p.a.instance[i].tabs[idx].options;
options && options.forEach(function (o) {
var idx = list.findIndex(function (e) {
return e.name == o.name
});
Expand All @@ -11116,7 +11116,7 @@ var hiprint = function (t) {
})
delete t[i].tabs;
}
else if (t[i].supportOptions) {
else if (t[i].supportOptions && t[i].supportOptions.length) {
var options = t[i].supportOptions, list = p.a.instance[i].supportOptions;
options.forEach(function (o) {
var idx = list.findIndex(function (e) {
Expand All @@ -11137,6 +11137,9 @@ var hiprint = function (t) {
} else {
var keyMap = {};
keyMap[i] = t[i];
if (t[i].tabs && t[i].tabs.length == 0) {
keyMap[i].supportOptions = p.a.instance[i].supportOptions;
}
$.extend(p.a.instance, keyMap);
}
});
Expand Down

0 comments on commit c926eb5

Please sign in to comment.