{
"client": "pc",
"framework": "tfp",
"positionType": "float",
"pageType": "dialog",
"bgColorMode": "light",
"title": "选择图标",
"type": "Page",
"components": [
{
"type": "Panel",
"id": "panel10",
"styles": {
"width": "100%",
"height": "40px",
"font-size": "0",
"position": "absolute",
"z-index": 999,
"top": "",
"bottom": "0px",
"left": "0px",
"padding-top": "0px",
"margin-top": "0px",
"padding-left": "0px",
"border-top": "1px solid #CCCCCC",
"right": "0px"
},
"components": [
{
"type": "Button",
"id": "btn_save",
"value": "保存",
"labelHeight": "30",
"imageWidth": 24,
"imageHeight": 24,
"styles": {
"cursor": "pointer",
"padding-left": "10px",
"padding-right": "10px",
"text-align": "center",
"float": "left",
"width": "70px",
"height": "30px",
"border-radius": "2px 2px 2px 2px"
},
"buttonType": "primary",
"theme": "round"
},
{
"type": "Button",
"id": "btn_close",
"value": "关闭",
"labelHeight": "30",
"imageWidth": 24,
"imageHeight": 24,
"styles": {
"cursor": "pointer",
"padding-left": "10px",
"padding-right": "10px",
"text-align": "center",
"float": "left",
"width": "70px",
"height": "30px",
"border-radius": "2px 2px 2px 2px",
"margin-left": "10px"
},
"theme": "round"
}
],
"style": "display:flex; justify-content:center; align-items:center;"
},
{
"type": "Tab",
"id": "tab1",
"pageIndex": "0",
"titleWidth": 150,
"titleHeight": 40,
"styles": {
"width": "",
"height": "",
"position": "absolute",
"left": "0px",
"top": "0px",
"z-index": 1,
"bottom": "40px",
"right": "0px",
"display": "block"
},
"components": [
{
"id": "tab1_page1",
"type": "TabPage",
"title": "从图标库选择",
"components": [
{
"type": "Panel",
"id": "left_icon",
"styles": {
"width": "340px",
"height": "315px",
"font-size": "0",
"position": "absolute",
"z-index": 1,
"top": "0px",
"left": "0px",
"right": "80px",
"bottom": "30px"
},
"components": [],
"style": "display: flex; justify-content: space-around; flex-wrap: wrap; overflow-y:scroll;"
},
{
"type": "Panel",
"id": "icon_col_panel",
"styles": {
"width": "135px",
"height": "180px",
"font-size": "0",
"position": "absolute",
"z-index": 1,
"top": "35px",
"left": "",
"display": "none",
"float": "right",
"right": "0px",
"margin-right": "3px",
"padding-left": "0px",
"padding-right": "0px"
},
"components": [
{
"type": "FlexBox",
"id": "flexBox23",
"styles": {
"display": "flex",
"width": "100%",
"position": "absolute",
"z-index": 1,
"top": "140px",
"left": "0px",
"padding-left": "5px",
"padding-top": "5px",
"padding-bottom": "5px",
"padding-right": "5px"
},
"components": [
{
"id": "flexBox23_panel2",
"type": "Panel",
"styles": {
"flex-grow": "1",
"flex-shrink": "0",
"flex-basis": "auto",
"height": "30px",
"line-height": "30px"
},
"components": [
{
"type": "Text",
"id": "icon_col_text",
"dataType": "text",
"styles": {
"width": "65px",
"height": "30px",
"line-height": "30px",
"padding-left": "2px",
"padding-right": "2px",
"float": "left",
"border-radius": "2px 2px 2px 2px"
}
}
]
},
{
"type": "Panel",
"styles": {
"flex-grow": "0",
"flex-shrink": "0",
"flex-basis": "50px",
"height": "30px",
"line-height": "30px"
},
"id": "panel4",
"components": [
{
"type": "Button",
"id": "btn_col_empty",
"value": "清空",
"labelHeight": "30",
"imageWidth": 24,
"imageHeight": 24,
"styles": {
"cursor": "pointer",
"text-align": "center",
"float": "left",
"border-radius": "2px 2px 2px 2px",
"height": "30px",
"padding-left": "10px",
"padding-right": "10px"
},
"buttonType": "default"
}
]
}
]
},
{
"type": "Panel",
"id": "icon_col",
"styles": {
"width": "100%",
"height": "140px",
"font-size": "0",
"position": "absolute",
"z-index": 1,
"top": "0px",
"left": "0px",
"border-bottom": "1px solid #CCCCCC",
"margin-right": "0px"
},
"components": [],
"style": "display: flex; flex-direction:column; justify-content: flex-start; flex-wrap: wrap; align-content:flex-start;"
}
],
"style": ""
},
{
"type": "Panel",
"id": "bg_col_panel",
"styles": {
"width": "135px",
"height": "180px",
"font-size": "0",
"position": "absolute",
"z-index": 1,
"top": "35px",
"left": "",
"float": "right",
"right": "0px",
"margin-left": "0px",
"margin-right": "3px"
},
"components": [
{
"type": "Panel",
"id": "bg_col",
"styles": {
"width": "100%",
"height": "140px",
"font-size": "0",
"position": "absolute",
"z-index": 1,
"top": "0",
"left": "0",
"border-bottom": "1px solid #CCCCCC",
"margin-right": "0px"
},
"components": [],
"style": "display: flex; flex-direction:column; justify-content: flex-start; flex-wrap: wrap; align-content:flex-start;"
},
{
"type": "FlexBox",
"id": "flexBox24",
"styles": {
"display": "flex",
"width": "100%",
"position": "absolute",
"z-index": 1,
"top": "140px",
"left": "0",
"margin-left": "0px",
"padding-left": "5px",
"padding-top": "5px",
"padding-bottom": "5px",
"padding-right": "5px",
"flex-direction": "row"
},
"components": [
{
"id": "flexBox24_panel2",
"type": "Panel",
"styles": {
"flex-grow": "1",
"flex-shrink": "0",
"flex-basis": "auto",
"height": "30px",
"line-height": "30px"
},
"components": [
{
"type": "Text",
"id": "bg_col_text",
"dataType": "text",
"styles": {
"width": "65px",
"height": "30px",
"line-height": "30px",
"padding-left": "2px",
"padding-right": "2px",
"float": "left",
"border-radius": "2px 2px 2px 2px"
}
}
]
},
{
"type": "Panel",
"styles": {
"flex-grow": "0",
"flex-shrink": "0",
"flex-basis": "50px",
"line-height": "30px",
"margin-left": "10px"
},
"id": "panel5",
"components": [
{
"type": "Button",
"id": "btn_bg_empty",
"value": "清空",
"labelHeight": "30",
"imageWidth": 24,
"imageHeight": 24,
"styles": {
"cursor": "pointer",
"text-align": "center",
"float": "left",
"border-radius": "2px 2px 2px 2px",
"height": "30px",
"margin-left": "0px",
"padding-left": "10px",
"padding-right": "10px"
},
"buttonType": "default",
"style": ""
}
]
}
]
}
]
},
{
"type": "Panel",
"id": "example",
"styles": {
"width": "135px",
"height": "100px",
"font-size": "0",
"position": "absolute",
"z-index": 1,
"top": "215px",
"right": "0px",
"margin-right": "2px"
},
"components": [],
"style": "text-align:center;"
},
{
"type": "Panel",
"id": "panel3",
"styles": {
"width": "135px",
"height": "35px",
"font-size": "0",
"position": "absolute",
"z-index": 1,
"top": "0",
"right": "0px",
"margin-right": "2px"
},
"components": [
{
"type": "Label",
"id": "label_bg_col",
"value": "背景颜色",
"styles": {
"height": "30px",
"line-height": "30px",
"float": "left",
"cursor": "pointer",
"color": "#000000"
}
},
{
"type": "Label",
"value": "图标颜色",
"styles": {
"height": "30px",
"line-height": "30px",
"float": "left",
"cursor": "pointer",
"color": "#999999"
},
"id": "label_icon_col"
}
],
"style": "display:flex; justify-content:space-around; align-items:center;"
}
],
"styles": {
"display": "block"
}
},
{
"id": "tab1_page2",
"type": "TabPage",
"title": "从本地上传",
"styles": {
"display": "none"
},
"components": [
{
"type": "PhotoUpload",
"id": "photoUpload1",
"size": 1,
"imageWidth": "90",
"imageHeight": "90",
"imageMargin": "10",
"allowDelete": true,
"styles": {
"float": "left",
"margin-top": "20px",
"margin-left": "40px",
"display": "block"
},
"onlyOne": true,
"appCode": "app_icon"
}
]
},
{
"type": "TabPage",
"title": "输入URL地址",
"styles": {
"display": "none"
},
"id": "tab1_page3",
"components": [
{
"type": "FlexBox",
"id": "flexBox1",
"styles": {
"display": "flex",
"width": "100%",
"padding": "5px 20px 5px 20px",
"margin-top": "5px",
"flex-direction": "column"
},
"components": [
{
"id": "flexBox1_panel1",
"type": "Panel",
"styles": {
"flex-grow": "0",
"flex-shrink": "0",
"flex-basis": "35px",
"height": "30px",
"line-height": "30px"
},
"components": [
{
"type": "Text",
"id": "icon_lj",
"dataType": "text",
"styles": {
"width": "100%",
"height": "30px",
"line-height": "30px",
"padding-left": "2px",
"padding-right": "2px",
"float": "left"
}
}
]
},
{
"id": "flexBox1_panel2",
"type": "Panel",
"styles": {
"flex-grow": "1",
"flex-shrink": "0",
"flex-basis": "auto",
"height": "30px",
"line-height": "30px"
},
"components": [
{
"type": "Button",
"id": "btn_clear",
"value": "清空",
"labelHeight": "30",
"imageWidth": 24,
"imageHeight": 24,
"styles": {
"cursor": "pointer",
"text-align": "center",
"float": "left",
"width": "50px",
"border-radius": "4px 4px 4px 4px",
"padding-left": "0px",
"padding-right": "0px",
"margin-left": "0px"
},
"buttonType": "default",
"onClick": "btn_clear_onClick()"
},
{
"type": "Button",
"id": "btn_pre",
"value": "预览",
"labelHeight": "30",
"imageWidth": 24,
"imageHeight": 24,
"styles": {
"cursor": "pointer",
"text-align": "center",
"float": "left",
"width": "50px",
"padding-left": "0px",
"padding-right": "0px",
"border-radius": "4px 4px 4px 4px",
"margin-left": "10px"
},
"buttonType": "primary",
"onClick": "btn_pre_onClick()"
}
]
}
]
},
{
"type": "Image",
"id": "img_pre",
"styles": {
"width": "68px",
"height": "68px",
"margin-top": "10px",
"margin-left": "40px",
"display": "none",
"border-radius": "4px 4px 4px 4px"
}
}
]
}
]
}
],
"width": "480px",
"height": "428px",
"id": "page1",
"jsFuncs": [
{
"name": "page1_onLoad",
"comment": "页面加载时",
"editType": "code",
"args": [],
"code": " let args = JSON.parse(tfp.getDialogArgs());\n if(args.iconChoose == false && args.localChoose == true && args.urlChoose == true){\n left_icon.hide();\n icon_col_panel.hide();\n bg_col_panel.hide();\n example.hide();\n panel3.hide();\n }else if(args.localChoose == false && args.iconChoose == true && args.urlChoose == true){\n photoUpload1.hide();\n }else if(args.urlChoose == false && args.iconChoose == true && args.localChoose == true){\n flexBox1.hide();\n }else if(args.iconChoose == false && args.localChoose == false && args.urlChoose == true){\n left_icon.hide();\n icon_col_panel.hide();\n bg_col_panel.hide();\n example.hide();\n panel3.hide();\n photoUpload1.hide();\n }else if(args.iconChoose == false && args.urlChoose == false && args.localChoose == true){\n left_icon.hide();\n icon_col_panel.hide();\n bg_col_panel.hide();\n example.hide();\n panel3.hide();\n flexBox1.hide();\n }else if(args.localChoose == false && args.urlChoose == false && args.iconChoose == true){\n photoUpload1.hide();\n flexBox1.hide();\n }else if(args.iconChoose == false && args.localChoose == false && args.urlChoose == false){\n left_icon.hide();\n icon_col_panel.hide();\n bg_col_panel.hide();\n example.hide();\n panel3.hide();\n photoUpload1.hide();\n flexBox1.hide();\n }\n \n // 图标\n\ticons = [\n {\n \"name\": \"默认\",\n \"code\": \"icon-default\"\n },\n {\n \"name\": \"添加\",\n \"code\": \"icon-insert\"\n },\n {\n \"name\": \"修改\",\n \"code\": \"icon-update\"\n },\n {\n \"name\": \"查看\",\n \"code\": \"icon-get\"\n },\n {\n \"name\": \"申请\",\n \"code\": \"icon-apply\"\n },\n {\n \"name\": \"审批\",\n \"code\": \"icon-approve\"\n },\n {\n \"name\": \"查询\",\n \"code\": \"icon-query\"\n },\n {\n \"name\": \"统计\",\n \"code\": \"icon-statistics\"\n },\n {\n \"name\": \"日志\",\n \"code\": \"icon-diary\"\n },\n {\n \"name\": \"日程\",\n \"code\": \"icon-schedule\"\n },\n {\n \"name\": \"文件\",\n \"code\": \"icon-file\"\n },\n {\n \"name\": \"相册\",\n \"code\": \"icon-album\"\n },\n {\n \"name\": \"邮件\",\n \"code\": \"icon-mail\"\n },\n {\n \"name\": \"通讯录\",\n \"code\": \"icon-addressbook\"\n },\n {\n \"name\": \"消息\",\n \"code\": \"icon-msg\"\n },\n {\n \"name\": \"考勤\",\n \"code\": \"icon-attendance\"\n },\n {\n \"name\": \"薪酬\",\n \"code\": \"icon-salary\"\n },\n {\n \"name\": \"考评\",\n \"code\": \"icon-evaluate\"\n },\n {\n \"name\": \"绩效\",\n \"code\": \"icon-achievement\"\n },\n {\n \"name\": \"新闻\",\n \"code\": \"icon-news\"\n },\n {\n \"name\": \"公告\",\n \"code\": \"icon-notice\"\n },\n {\n \"name\": \"期刊\",\n \"code\": \"icon-journal\"\n },\n {\n \"name\": \"规章\",\n \"code\": \"icon-regulations\"\n },\n {\n \"name\": \"发起\",\n \"code\": \"icon-startwork\"\n },\n {\n \"name\": \"待办\",\n \"code\": \"icon-working\"\n },\n {\n \"name\": \"已办\",\n \"code\": \"icon-worked\"\n },\n {\n \"name\": \"办结\",\n \"code\": \"icon-endwork\"\n },\n {\n \"name\": \"微博\",\n \"code\": \"icon-blog\"\n },\n {\n \"name\": \"论坛\",\n \"code\": \"icon-forum\"\n },\n {\n \"name\": \"问答\",\n \"code\": \"icon-questions\"\n },\n {\n \"name\": \"组织\",\n \"code\": \"icon-org\"\n },\n {\n \"name\": \"集团\",\n \"code\": \"icon-group\"\n },\n {\n \"name\": \"部门\",\n \"code\": \"icon-dep\"\n },\n {\n \"name\": \"岗位\",\n \"code\": \"icon-post\"\n },\n {\n \"name\": \"人员\",\n \"code\": \"icon-user\"\n },\n {\n \"name\": \"角色\",\n \"code\": \"icon-role\"\n },\n {\n \"name\": \"签名\",\n \"code\": \"icon-signature\"\n },\n {\n \"name\": \"应用\",\n \"code\": \"icon-app\"\n },\n {\n \"name\": \"门户\",\n \"code\": \"icon-door\"\n },\n {\n \"name\": \"系统设置\",\n \"code\": \"icon-systemset\"\n },\n {\n \"name\": \"系统日志\",\n \"code\": \"icon-systemlog\"\n },\n {\n \"name\": \"系统任务\",\n \"code\": \"icon-systemtask\"\n },\n {\n \"name\": \"系统服务\",\n \"code\": \"icon-systemservice\"\n },\n {\n \"name\": \"外出\",\n \"code\": \"icon-goout\"\n },\n {\n \"name\": \"出差\",\n \"code\": \"icon-travel\"\n },\n {\n \"name\": \"请假\",\n \"code\": \"icon-leave\"\n },\n {\n \"name\": \"加班\",\n \"code\": \"icon-overtime\"\n },\n {\n \"name\": \"补签\",\n \"code\": \"icon-reissue\"\n },\n {\n \"name\": \"调休\",\n \"code\": \"icon-replace\"\n },\n {\n \"name\": \"入职\",\n \"code\": \"icon-hr-entry\"\n },\n {\n \"name\": \"转正\",\n \"code\": \"icon-hr-normal\"\n },\n {\n \"name\": \"调岗\",\n \"code\": \"icon-hr-transfer\"\n },\n {\n \"name\": \"离职\",\n \"code\": \"icon-hr-leave\"\n },\n {\n \"name\": \"客户\",\n \"code\": \"icon-customer\"\n },\n {\n \"name\": \"供应商\",\n \"code\": \"icon-supplier\"\n },\n {\n \"name\": \"商品\",\n \"code\": \"icon-goods\"\n },\n {\n \"name\": \"机会\",\n \"code\": \"icon-visit\"\n },\n {\n \"name\": \"售后\",\n \"code\": \"icon-aftersales\"\n },\n {\n \"name\": \"销售\",\n \"code\": \"icon-sale\"\n },\n {\n \"name\": \"采购\",\n \"code\": \"icon-purchase\"\n },\n {\n \"name\": \"合同\",\n \"code\": \"icon-contract\"\n },\n {\n \"name\": \"收款\",\n \"code\": \"icon-collection\"\n },\n {\n \"name\": \"付款\",\n \"code\": \"icon-payment\"\n },\n {\n \"name\": \"发票\",\n \"code\": \"icon-invoice\"\n },\n {\n \"name\": \"入库\",\n \"code\": \"icon-erp-enter\"\n },\n {\n \"name\": \"出库\",\n \"code\": \"icon-erp-leave\"\n },\n {\n \"name\": \"调拨\",\n \"code\": \"icon-erp-transfer\"\n },\n {\n \"name\": \"盘点\",\n \"code\": \"icon-erp-inventory\"\n },\n {\n \"name\": \"库存\",\n \"code\": \"icon-erp-stock\"\n },\n {\n \"name\": \"台账\",\n \"code\": \"icon-erp-account\"\n },\n {\n \"name\": \"凭证\",\n \"code\": \"icon-erp-voucher\"\n },\n {\n \"name\": \"余额\",\n \"code\": \"icon-erp-balance\"\n },\n {\n \"name\": \"图表\",\n \"code\": \"icon-chart\"\n },\n {\n \"name\": \"报表\",\n \"code\": \"icon-report\"\n },\n {\n \"name\": \"效率\",\n \"code\": \"icon-efficiency\"\n },\n {\n \"name\": \"驾驶舱\",\n \"code\": \"icon-cockpit\"\n },\n {\n \"name\": \"表单\",\n \"code\": \"icon-form\"\n },\n {\n \"name\": \"流程\",\n \"code\": \"icon-flow\"\n },\n {\n \"name\": \"档案\",\n \"code\": \"icon-record\"\n },\n {\n \"name\": \"监控\",\n \"code\": \"icon-control\"\n },\n {\n \"name\": \"管理\",\n \"code\": \"icon-manage\"\n },\n {\n \"name\": \"会议\",\n \"code\": \"icon-meeting\"\n },\n {\n \"name\": \"车辆\",\n \"code\": \"icon-car\"\n },\n {\n \"name\": \"资产\",\n \"code\": \"icon-assets\"\n },\n {\n \"name\": \"用品\",\n \"code\": \"icon-supplies\"\n },\n {\n \"name\": \"证照\",\n \"code\": \"icon-licence\"\n },\n {\n \"name\": \"印鉴\",\n \"code\": \"icon-seal\"\n },\n {\n \"name\": \"预算\",\n \"code\": \"icon-budget\"\n },\n {\n \"name\": \"费用\",\n \"code\": \"icon-expenses\"\n },\n {\n \"name\": \"借方\",\n \"code\": \"icon-debit\"\n },\n {\n \"name\": \"贷方\",\n \"code\": \"icon-credit\"\n },\n {\n \"name\": \"招投标\",\n \"code\": \"icon-bidding\"\n },\n {\n \"name\": \"计划\",\n \"code\": \"icon-plan\"\n },\n {\n \"name\": \"总结\",\n \"code\": \"icon-summary\"\n },\n {\n \"name\": \"协同\",\n \"code\": \"icon-teamwork\"\n },\n {\n \"name\": \"分配\",\n \"code\": \"icon-assignment\"\n },\n {\n \"name\": \"上报\",\n \"code\": \"icon-reporting\"\n },\n {\n \"name\": \"项目\",\n \"code\": \"icon-project\"\n },\n {\n \"name\": \"收文\",\n \"code\": \"icon-receipt\"\n },\n {\n \"name\": \"发文\",\n \"code\": \"icon-issue\"\n },\n {\n \"name\": \"交换\",\n \"code\": \"icon-exchange\"\n },\n {\n \"name\": \"督办\",\n \"code\": \"icon-supervise\"\n },\n {\n \"name\": \"党建\",\n \"code\": \"icon-party\"\n },\n {\n \"name\": \"招聘\",\n \"code\": \"icon-recruit\"\n },\n {\n \"name\": \"培训\",\n \"code\": \"icon-train\"\n },\n {\n \"name\": \"学习\",\n \"code\": \"icon-study\"\n },\n {\n \"name\": \"考试\",\n \"code\": \"icon-test\"\n },\n {\n \"name\": \"应用管理\",\n \"code\": \"icon-yingyongguanli\"\n },\n {\n \"name\": \"商品管理\",\n \"code\": \"icon-shangpinguanli\"\n },\n {\n \"name\": \"库存\",\n \"code\": \"icon-kucun\"\n },\n {\n \"name\": \"客户\",\n \"code\": \"icon-kehu\"\n },\n {\n \"name\": \"收支分析\",\n \"code\": \"icon-shouzhifenxi\"\n },\n {\n \"name\": \"采购\",\n \"code\": \"icon-caigouguanli-caigouzhihang\"\n },\n {\n \"name\": \"供应商\",\n \"code\": \"icon-gongyingshangxinxi\"\n }\n];\n // 颜色\n icon_color = [\n // 灰色\n {\"color\":\"#ffffff\"},\n {\"color\":\"#eeeeee\"},\n {\"color\":\"#e0e0e0\"},\n {\"color\":\"#bdbdbd\"},\n {\"color\":\"#9e9e9e\"},\n {\"color\":\"#757575\"},\n {\"color\":\"#616161\"},\n {\"color\":\"#424242\"},\n // 红色\n {\"color\":\"#f9bdbb\"},\n {\"color\":\"#f69988\"},\n {\"color\":\"#f36c60\"},\n {\"color\":\"#e84e40\"},\n {\"color\":\"#e51c23\"},\n {\"color\":\"#dd191d\"},\n {\"color\":\"#d01716\"},\n {\"color\":\"#c41411\"},\n // 橙色\n {\"color\":\"#ffecb3\"},\n {\"color\":\"#ffe082\"},\n {\"color\":\"#ffd54f\"},\n {\"color\":\"#ffca28\"},\n {\"color\":\"#ffc107\"},\n {\"color\":\"#ffb300\"},\n {\"color\":\"#ffa000\"},\n {\"color\":\"#ff8f00\"},\n // 黄色\n {\"color\":\"#fff9c4\"},\n {\"color\":\"#fff59d\"},\n {\"color\":\"#fff176\"},\n {\"color\":\"#ffee58\"},\n {\"color\":\"#ffeb3b\"},\n {\"color\":\"#fdd835\"},\n {\"color\":\"#fbc02d\"},\n {\"color\":\"#f9a825\"},\n // 绿色\n {\"color\":\"#a3e9a4\"},\n {\"color\":\"#72d572\"},\n {\"color\":\"#42bd41\"},\n {\"color\":\"#2baf2b\"},\n {\"color\":\"#259b24\"},\n {\"color\":\"#0a8f08\"},\n {\"color\":\"#0a7e07\"},\n {\"color\":\"#056f00\"},\n // 蓝色\n {\"color\":\"#b3e5fc\"},\n {\"color\":\"#81d4fa\"},\n {\"color\":\"#4fc3f7\"},\n {\"color\":\"#29b6f6\"},\n {\"color\":\"#03a9f4\"},\n {\"color\":\"#039be5\"},\n {\"color\":\"#0288d1\"},\n {\"color\":\"#0277bd\"},\n // 紫色\n {\"color\":\"#e1bee7\"},\n {\"color\":\"#ce93d8\"},\n {\"color\":\"#ba68c8\"},\n {\"color\":\"#ab47bc\"},\n {\"color\":\"#9c27b0\"},\n {\"color\":\"#8e24aa\"},\n {\"color\":\"#7b1fa2\"},\n {\"color\":\"#6a1b9a\"},\n // 粉色\n {\"color\":\"#f8bbd0\"},\n {\"color\":\"#f48fb1\"},\n {\"color\":\"#f06292\"},\n {\"color\":\"#ec407a\"},\n {\"color\":\"#e91e63\"},\n {\"color\":\"#d81b60\"},\n {\"color\":\"#c2185b\"},\n {\"color\":\"#ad1457\"},\n ];\n \n // 选择图标\n for (var i = 0; i < icons.length; i++) {\n \t$(\"#left_icon\").append( ''); \n }\n \n $(\".dib\").hover(function () {\n \t$(this).addClass('hover1');\n }, function () {\n \t$(this).removeClass('hover1');\n });\n \n var icon_html = [];\n var icon_class = [];\n $(\".dib\").bind(\"click\",function(){ \n $(this).addClass('click1').siblings(\".dib\").removeClass('click1');\n icon_class = $(this).children(\"span\").attr(\"class\");\n icon_html = [];\n icon_html.push($(this).html());\n $(\"#example\").empty().append(\"\"+$(this).html()+\"
\");\n $(\".col\").removeClass('border1');\n $(\".col1\").removeClass('border1');\n icon_col_text.value = '';\n bg_col_text.value = '';\n});\n \n // 图标颜色\n for(var i = 0; i');\n }\n \n \t$(\".col\").bind(\"click\",function(){\n $(this).addClass('border1').siblings(\".col\").removeClass('border1');\n icon_col = $(this).css('background-color');\n \n const rgbToHex = (color) => {\n\t let arr = color.split(',');\n\t let r = +arr[0].split('(')[1];\n\t let g = +arr[1];\n\t let b = +arr[2].split(')')[0];\n\t let value = (1 << 24) + r * (1 << 16) + g * (1 << 8) + b;\n\t value = value.toString(16);\n\t return '#' + value.slice(1);\n\t};\n \n \ticon_col_text.value = rgbToHex(icon_col);\n \n $(\"#example\").find(\"div\").children(\"span\").css(\"color\",icon_col_text.value);\n \t });\n \n // 图标背景颜色\n for(var i = 0; i');\n }\n \n $(\".col1\").bind(\"click\",function(){\n $(this).addClass('border1').siblings(\".col1\").removeClass('border1');\n bg_col = $(this).css('background-color');\n \n const rgbToHex = (color) => {\n\t let arr = color.split(',');\n\t let r = +arr[0].split('(')[1];\n\t let g = +arr[1];\n\t let b = +arr[2].split(')')[0];\n\t let value = (1 << 24) + r * (1 << 16) + g * (1 << 8) + b;\n\t value = value.toString(16);\n\t return '#' + value.slice(1);\n\t};\n \n \tbg_col_text.value = rgbToHex(bg_col);\n \n $(\"#example\").children(\"div\").css(\"background-color\",bg_col_text.value);\n \t });\n \n // 保存按钮被触发\n $(\"#btn_save\").on(\"click\",function(){\n let ret = {};\n if(tab1.pageIndex == 0 && icon_html.length == 0 || tab1.pageIndex == 1 && photoUpload1.value.length == 0 || tab1.pageIndex == 2 && isNull(icon_lj.val())){\n tfp.showMsg(\"请选择应用图标！\");\n return;\n }else{\n if(tab1.pageIndex == 0 && !icon_html.length == 0){\n ret = {\n type: \"iconfont\",\n class: icon_class,\n color: icon_col_text.value,\n bgColor: bg_col_text.value\n }; \n }else if(tab1.pageIndex == 1 && !photoUpload1.value.length == 0){\n ret = {\n type: \"url\",\n url: \"/Download?fileCode=\"+photoUpload1.value[0].code\n }\n }else if(tab1.pageIndex == 2 && !isNull(icon_lj.val())){\n ret = {\n type: \"url\",\n url: icon_lj.value\n }\n }\n tfp.closeCurDialog(ret);\n }\n });\n \n \t// 关闭按钮被触发\n $(\"#btn_close\").on(\"click\",function(){\n tfp.closeCurDialog();\n });\n \n \t// 图标颜色被选中\n \t$(\"#label_icon_col\").on(\"click\",function(){\n \tlabel_icon_col.css( 'color' , '#000000' );\n \tlabel_bg_col.css( 'color' , '#999999' );\n \t\ticon_col_panel.show( );\n \t\tbg_col_panel.hide( );\n });\n \n \t// 图标背景颜色被选中\n \t$(\"#label_bg_col\").on(\"click\",function(){\n \tlabel_icon_col.css( 'color' , '#999999' );\n \t label_bg_col.css( 'color' , '#000000' );\n \t bg_col_panel.show( );\n \t\ticon_col_panel.hide( );\n });\n \n \t// 图标颜色清空按钮触发\n \t$(\"#btn_col_empty\").on(\"click\",function(){\n $(\".col\").removeClass('border1');\n \t\ticon_col_text.value = '';\n \t $(\"#example\").find(\"div\").children(\"span\").css(\"color\",icon_col_text.value);\n });\n \n \t// 图标背景颜色清空按钮触发\n \t$(\"#btn_bg_empty\").on(\"click\",function(){\n \t$(\".col1\").removeClass('border1');\n \t\tbg_col_text.value = '';\n $(\"#example\").children(\"div\").css(\"background-color\",bg_col_text.value);\n });\n \n // 背景颜色输入框失去光标后给图标添加背景颜色\n $(\"#bg_col_text\").blur(function(){\n $(\"#example\").children(\"div\").css(\"background-color\",bg_col_text.value);\n });\n \n // 图标颜色输入框失去光标后给图标添加字体颜色\n $(\"#icon_col_text\").blur(function(){\n $(\"#example\").children(\"div\").css(\"color\",icon_col_text.value);\n });\n"
},
{
"name": "btn_clear_onClick",
"comment": "点击时",
"editType": "code",
"args": [],
"code": "\ticon_lj.value = '';\n img_pre.attr( 'src' ,'');\n \timg_pre.hide( );\n"
},
{
"name": "btn_pre_onClick",
"comment": "点击时",
"editType": "code",
"args": [],
"code": "\tif(!isNull(icon_lj.val())){\n img_pre.attr( 'src' , icon_lj.val());\n img_pre.show();\n }\n"
}
],
"onLoad": "page1_onLoad()",
"cssFiles": [
"iconfont/iconfont.css"
],
"styleSheets": [
{
"id": ".hover1",
"styles": [
{
"name": "background-color",
"value": "#eeeeee"
}
]
},
{
"id": ".click1",
"styles": [
{
"name": "background-color",
"value": "#dddddd"
}
]
},
{
"id": ".border1",
"styles": [
{
"name": "border-radius",
"value": "20px 20px 20px 20px"
}
]
},
{
"id": "#example div",
"styles": [
{
"name": "display",
"value": "inline-block"
},
{
"name": "width",
"value": "42px"
},
{
"name": "height",
"value": "42px"
},
{
"name": "padding",
"value": "6px"
},
{
"name": "border-radius",
"value": "4px 4px 4px 4px"
},
{
"name": "margin-top",
"value": "32px"
}
]
}
]
}