代码拉取完成，页面将自动刷新
<!--
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com
-->
<!DOCTYPE html>
<html>
<head>
<!------ 以下内容不要动 --------------------------------------------------------->
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
<link class="_dcdev_preset_" type="text/css" rel="stylesheet"
href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
<!-- 页面标题 -->
<title>数控开发</title> <!-- 桌面端浏览器及收藏夹图标 -->
<link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
<link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
<!------ 以上内容不要动 --------------------------------------------------------->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
<style type="text/css">
.layui-form-radio>div {
font-size: 12px;
}
</style>
</head>
<body>
<div class="dcdev-body-container" id="dcdev_body_container">
<form class="layui-form" style="padding:10px;">
<div id="component_radio" style="display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 auto;">
</div>
</form>
<div id="layout_list" style="width: 100%;"> </div>
</div>
</body>
<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass"
authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
xhr_show_loading=1></script>
<!------ 以上内容不要变动 --------------------------------------------------------->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.13.0/js/md5.min.js"></script>
<script>
$.getScript("./component_index.js", function () {
var html = "";
var uihtml = "";
var componenthtml = "";
//var ui_name=[];
var component_name = [];
/*component_index.forEach(element => {
//获取所有框架的名称列表
if (ui_name.indexOf(element.vendor)==-1) {
ui_name.push(element.vendor);
}
});
//遍历框架名称的数组，动态生成input标签
ui_name.forEach(input=>{
uihtml+=`<input type="radio" name="ui" title="${input}" value="${input}" lay-filter="filter">`;
});
$('#ui_radio').html(uihtml);*/
component_index.forEach(element => {
//动态生成组件单选框
if (component_name.indexOf(element.desc) == -1) {
component_name.push(element.desc);
/*componenthtml+=`<input type="checkbox" value="${element.desc}" name="${element.desc}" title="${element.desc}">`*/
componenthtml +=
`<input type="radio" value="${element.desc}" name="ui" title="${element.desc}" lay-filter="filter">`;
}
});
//添加最后一个‘所有’选项
componenthtml +=
`<input type="radio" value="所有" name="ui" title="所有" lay-filter="filter">`;
$('#component_radio').html(componenthtml);
//加载模块
layui.use('form', function () {
var form = layui.form;
//监听单选框
form.on('radio(filter)', function (data) {
// debugger;
var iframe;
//每次从新选择进行初始化
html = '';
component_index.forEach(element => {
if (element.desc == data.value || data.value == '所有') {
iframe =
`<div style="text-align:center"><iframe id=${md5(element.path)} class="dcdev-desktop" src="${element.path}" style="width:100%;height:600px;"></iframe></div>`;
// 处理每个布局文件的html代码
appen_html(element, iframe);
}
});
// debugger;
$(`#layout_list`).html(html);
// console.log(md5(element.path))
// setIframeHeight(document.getElementById(md5(element.path)));
form.render();
});
/*//监听提交
form.on('submit(formDemo)', function(data){
//获得表单提交的数据json对象
var datajson=data.field;
var iframe;
//每次从新选择进行初始化
html='';
component_index.forEach(element => {
if (element.desc==datajson['ui']) {
iframe = `<div style="text-align:center"><iframe class="dcdev-desktop" src="${element.path}" style="width:100%;height:600px;"></iframe></div>`;
// 处理每个布局文件的html代码
appen_html(element, iframe);
}
});
$(`#layout_list`).html(html);
return false;
}); */
});
// 处理每个布局文件的html代码
function appen_html(element, iframe) {
html += `
<div style="margin-bottom:30px;">
<div>
<div style="display: block;margin:10px;overflow:hidden">
<div style="display: -webkit-inline-box;margin:10px;">
<a style="margin-left: 10px;width:150px;">${element.vendor}</a>
<a style="margin-left: 10px;">${element.desc}</a>
</div>
<div style="float:right;">
<button onclick="insert_component('${JSON.stringify(element)}')" style="display:inline-block;margin-left:auto">使用</button>
</div>
</div>
</div>
${iframe}
</div>
<hr>
`
}
})
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
console.log(11);
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
console.log(22, iframe.height);
}
}
};
function show_setting(path) {
$(`#component_index_setting`).css("display", "block");
}
function insert_component(_config) {
debugger;
var config = JSON.parse(_config)
$.get(config.path, function (html) {
debugger;
// 调用父窗口函数
window.parent["insert_to_code_editor"](config, html, true);
})
}
</script>
<script>
$("#cc").change(function () {});
var component_index_setting_content;
$("#component_index_setting_content").load("https://res.dcdev.net/dcdev/v1.0.6/assets/html/render_inputor.html", "",
function () {
data = {
// 容器div的id
id: "component_index_setting_content",
// x表示横向滚动、y表示竖向滚动
direction: "y",
// 每个ul的配置
ul_config: {
ul_class: "",
ul_style: "margin-left: 10px;clear:both;",
},
//是否需要按钮
btn: '修改',
// 每个li的配置
li_config: {
// td 的函数配置
li_function: [],
/*
字段变量使用 # 而不是 $ 来定义
如需唯一标识某个node，则添加data-key以作区分
如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
*/
li_html: `
<div>
<img data-key=image src="#{type}" style="width:40px;height:40px;">
<div data-key=title style="font-size:12px;color:gray;">#{min}</div>
</div>
`,
li_style: "margin-top:10px;margin-bottom:10px ;"
},
// 各种类型的回调
cb_config: {
// 点击的回调
click: function (res) {
console.log(res);
},
click_btn: function (res) {
console.log(res);
},
// 获取数据之后的回调,如需提前干预可在此修改html之后返回
data_fetched: function (res) {
// console.log(res);
},
// 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
before_render: function (res) {
// console.log(res);
},
// 所有数据加载完毕的回调
no_more: function (res) {
// console.log(res);
},
},
// 请求及分页的配置
data_config: {
data: [{
type: "option",
title: "margin",
column_name: "margin",
is_require: false,
default_value: '0px',
options: ['0px', '5px', '10px', '20px', '30px'],
options_title: ['0px', '5px', '10px', '20px', '30px'],
},
{
type: "number",
title: "margin-left",
column_name: "margin-left",
is_require: false,
default_value: 0,
num_type: "整型",
unit: "px",
max_value: 300,
min_value: -300,
},
{
type: "number",
title: "margin-right",
column_name: "margin-right",
is_require: false,
default_value: 0,
num_type: "整型",
unit: "px",
max_value: 300,
min_value: -300,
},
{
type: "number",
title: "margin-top",
column_name: "margin-top",
is_require: false,
default_value: 0,
num_type: "整型",
unit: "px",
max_value: 300,
min_value: -300,
},
{
type: "number",
title: "margin-bottom",
column_name: "margin-bottom",
is_require: false,
default_value: 0,
num_type: "整型",
unit: "px",
max_value: 300,
min_value: -300,
},
{
type: "html",
html: `<hr>`
},
{
type: "option",
title: "padding",
column_name: "padding",
is_require: false,
default_value: '0px',
options: ['0px', '5px', '10px', '20px', '30px'],
options_title: ['0px', '5px', '10px', '20px', '30px'],
},
],
},
};
component_index_setting_content = new render_inputor();
component_index_setting_content.render(data, null, null);
})
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手