|
|
|
|
|
layui.use(["index", "api", "tpl"], function () {
|
|
|
var $ = layui.$,
|
|
|
table = layui.table,
|
|
|
element = layui.element,
|
|
|
form = layui.form,
|
|
|
laypage = layui.laypage,
|
|
|
admin = layui.admin;
|
|
|
var sourceTitle = "";
|
|
|
var selectSourceNode = { id: "", name: "" };
|
|
|
var targetNodeId = [];
|
|
|
var selectTargetNode = [];
|
|
|
var unSelectTargetNodeId = "";
|
|
|
var LIST_TABLE_ID = "listTable"; // table ElementId
|
|
|
var LIST_TABLE_DATA = [
|
|
|
{
|
|
|
name: "层MySQL密码格式检查",
|
|
|
content: "检查数据传输服务器是否能连通源数据库",
|
|
|
tips: "查数据传输服务器失败",
|
|
|
status: "1",
|
|
|
},
|
|
|
{
|
|
|
name: "层MySQL密码格式检查",
|
|
|
content: "检查数据传输服务器是否能连通源数据库",
|
|
|
tips: "查数据传输服务器失败",
|
|
|
status: "2",
|
|
|
},
|
|
|
{
|
|
|
name: "层MySQL密码格式检查",
|
|
|
content: "检查数据传输服务器是否能连通源数据库",
|
|
|
tips: "查数据传输服务器失败",
|
|
|
status: "1",
|
|
|
},
|
|
|
{
|
|
|
name: "层MySQL密码格式检查",
|
|
|
content: "检查数据传输服务器是否能连通源数据库",
|
|
|
tips: "查数据传输服务器失败",
|
|
|
status: "2",
|
|
|
},
|
|
|
{
|
|
|
name: "层MySQL密码格式检查",
|
|
|
content: "检查数据传输服务器是否能连通源数据库",
|
|
|
tips: "查数据传输服务器失败",
|
|
|
status: "1",
|
|
|
},
|
|
|
];
|
|
|
// table field 配置
|
|
|
var LIST_TABLE_COLS = [
|
|
|
{
|
|
|
field: "name",
|
|
|
title: "检查项",
|
|
|
align: "left",
|
|
|
},
|
|
|
{
|
|
|
field: "content",
|
|
|
title: "检查内容",
|
|
|
align: "left",
|
|
|
},
|
|
|
{
|
|
|
field: "tips",
|
|
|
title: "消息提醒",
|
|
|
align: "left",
|
|
|
},
|
|
|
{
|
|
|
field: "status",
|
|
|
title: "检查结果",
|
|
|
align: "left",
|
|
|
templet: function templet(d) {
|
|
|
if (d.status == "1") {
|
|
|
return "<span class='status-success'>成功</span>";
|
|
|
} else if (d.status == "2") {
|
|
|
return `<div class="status-fail-box"><span class="status-fail">失败</span><i class="fail-icon" onmouseover="showToolTips(this)" data-tips="${d.tips}"></i></div>`;
|
|
|
}
|
|
|
return "";
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
//step1
|
|
|
form.on("submit(lay-step1-submit)", function (data) {
|
|
|
console.log("step1：", data.field);
|
|
|
element.progress("progress", "50%");
|
|
|
$($(".step-ul").children()[1]).addClass("active");
|
|
|
sourceTitle = "sales_order"; //获取了源码名称
|
|
|
$(".source-title").html(sourceTitle);
|
|
|
getSourceNodeLIst();
|
|
|
$(".step-2")
|
|
|
.removeClass("display-none")
|
|
|
.siblings()
|
|
|
.addClass("display-none");
|
|
|
});
|
|
|
//step2
|
|
|
form.on("submit(lay-step2-pre-submit)", function (data) {
|
|
|
console.log("step1：", data.field);
|
|
|
element.progress("progress", "25%");
|
|
|
$($(".step-ul").children()[0]).addClass("active");
|
|
|
$($(".step-ul").children()[1]).removeClass("active");
|
|
|
$(".step-1")
|
|
|
.removeClass("display-none")
|
|
|
.siblings()
|
|
|
.addClass("display-none");
|
|
|
});
|
|
|
form.on("submit(lay-step2-next-submit)", function () {
|
|
|
element.progress("progress", "75%");
|
|
|
$($(".step-ul").children()[2]).addClass("active");
|
|
|
$(".step-3")
|
|
|
.removeClass("display-none")
|
|
|
.siblings()
|
|
|
.addClass("display-none");
|
|
|
});
|
|
|
$(".source-tree-list").on("click", ".tree-node", function (e) {
|
|
|
e.stopPropagation();
|
|
|
selectSourceNode.id = $(this).attr("data-id");
|
|
|
selectSourceNode.name = $(this).attr("data-name");
|
|
|
console.log("tree-node selectSourceNode:", selectSourceNode);
|
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|
|
});
|
|
|
$(".opr-box .icon-next").on("click", function () {
|
|
|
if (selectSourceNode.name == "") {
|
|
|
layer.msg("请选择源对象");
|
|
|
return false;
|
|
|
}
|
|
|
if (targetNodeId.includes(selectSourceNode.id)) {
|
|
|
layer.msg("已选择");
|
|
|
return false;
|
|
|
}
|
|
|
changeTargetNode();
|
|
|
});
|
|
|
|
|
|
$(".opr-box .icon-pre").on("click", function () {
|
|
|
console.log("icon-pre");
|
|
|
if (unSelectTargetNodeId == "") {
|
|
|
layer.msg("请选择目标对象");
|
|
|
return false;
|
|
|
}
|
|
|
resetTargetNodes(unSelectTargetNodeId);
|
|
|
});
|
|
|
|
|
|
$(".target-tree-list").on("click", ".tree-node", function () {
|
|
|
console.log(".target-tree-list .tree-node", $(this).attr("data-id"));
|
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|
|
unSelectTargetNodeId = $(this).attr("data-id");
|
|
|
});
|
|
|
|
|
|
function changeTargetNode() {
|
|
|
targetNodeId.push(selectSourceNode.id);
|
|
|
totalNodes();
|
|
|
selectTargetNode.push({
|
|
|
id: selectSourceNode.id,
|
|
|
name: selectSourceNode.name,
|
|
|
});
|
|
|
var ddHtml = `<dd class="tree-node" data-id="${selectSourceNode.id}" data-name="${selectSourceNode.name}"><i class="rw3"></i><span>${selectSourceNode.name}</span><span
|
|
|
class="edit">编辑</span></dd>`;
|
|
|
$(".target-tree-list").append(ddHtml);
|
|
|
}
|
|
|
function totalNodes() {
|
|
|
$(".total-nodes").html(`（${targetNodeId.length}个对象）`);
|
|
|
}
|
|
|
function getSourceNodeLIst() {
|
|
|
targetNodeId = [];
|
|
|
var data = [
|
|
|
{ id: "1", name: "sales_orderpromotion1" },
|
|
|
{ id: "2", name: "sales_orderpromotion2" },
|
|
|
{ id: "3", name: "sales_orderpromotion3" },
|
|
|
];
|
|
|
var html = "";
|
|
|
data.forEach((element) => {
|
|
|
html += `<dd class="tree-node" data-id="${element.id}" data-name="${element.name}"><i class="rw3"></i><span>${element.name}</span></dd>
|
|
|
`;
|
|
|
});
|
|
|
$(".source-tree-list").html(html);
|
|
|
}
|
|
|
function resetTargetNodes(selectId) {
|
|
|
var html = "";
|
|
|
var newSelectNode = [];
|
|
|
targetNodeId = [];
|
|
|
selectTargetNode.forEach((element) => {
|
|
|
if (element.id != selectId) {
|
|
|
html += `<dd class="tree-node" data-id="${element.id}" data-name="${element.name}"><i class="rw3"></i><span>${element.name}</span><span
|
|
|
class="edit">编辑</span></dd>`;
|
|
|
targetNodeId.push(element.id);
|
|
|
newSelectNode.push({ id: element.id, name: element.name });
|
|
|
}
|
|
|
});
|
|
|
$(".target-tree-list").html(html);
|
|
|
selectTargetNode = newSelectNode;
|
|
|
totalNodes();
|
|
|
unSelectTargetNodeId = "";
|
|
|
}
|
|
|
$(".target-tree-list").on("click", ".edit", function (e) {
|
|
|
e.stopPropagation();
|
|
|
editDialog({ id: $(this).parent().attr('data-id'), name: $(this).parent().attr('data-name') });
|
|
|
});
|
|
|
function editDialog({ id, name }) {
|
|
|
console.log('editDialog:id,name:', id, name);
|
|
|
var templet = $("#formDialogTemplate").html();
|
|
|
layui.laytpl(templet).render({}, function (html) {
|
|
|
layer.open({
|
|
|
type: 1,
|
|
|
title: "编辑表",
|
|
|
content: templet,
|
|
|
area: ["620px", "640px"],
|
|
|
success: function success() {
|
|
|
table.render({
|
|
|
elem: "#editTable",
|
|
|
data: [
|
|
|
{ id: 1, col: "acount_money", type: "decimal(11,2)" },
|
|
|
{ id: 1, col: "acount_money", type: "decimal(11,2)" },
|
|
|
],
|
|
|
defaultToolbar: [],
|
|
|
toolbar: "#toolbarDemo",
|
|
|
title: "用户数据表",
|
|
|
cols: [
|
|
|
[
|
|
|
{ type: "checkbox", width: 20 },
|
|
|
{ field: "id", title: "ID", hide: true },
|
|
|
{ field: "col", title: "列名", width: 250, edit: "text" },
|
|
|
{ field: "type", title: "类型", width: 250, edit: "text" },
|
|
|
],
|
|
|
],
|
|
|
page: false,
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
table.on("toolbar(editTable)", function (obj) {
|
|
|
var checkStatus = table.checkStatus(obj.config.id);
|
|
|
if (obj.event == "getCheckData") {
|
|
|
var data = checkStatus.data;
|
|
|
if (data.length == 0) {
|
|
|
layer.msg('请选择列');
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// admin.req({
|
|
|
// url: url,
|
|
|
// data: params,
|
|
|
// success: function (res) {
|
|
|
// layer.msg('成功');
|
|
|
// },
|
|
|
// });
|
|
|
layer.close(layer.index);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
//step3
|
|
|
form.on("submit(lay-step3-pre-submit)", function () {
|
|
|
element.progress("progress", "50%");
|
|
|
$($(".step-ul").children()[1]).addClass("active");
|
|
|
$($(".step-ul").children()[2]).removeClass("active");
|
|
|
$(".step-2")
|
|
|
.removeClass("display-none")
|
|
|
.siblings()
|
|
|
.addClass("display-none");
|
|
|
});
|
|
|
form.on("submit(lay-step3-next-submit)", function () {
|
|
|
element.progress("progress", "100%");
|
|
|
$($(".step-ul").children()[3]).addClass("active");
|
|
|
$(".active-after").addClass("display-none");
|
|
|
$(".step-4")
|
|
|
.removeClass("display-none")
|
|
|
.siblings()
|
|
|
.addClass("display-none");
|
|
|
getTableData();
|
|
|
});
|
|
|
//step4
|
|
|
function getTableData() {
|
|
|
var where = {};
|
|
|
var tableRenderOptions = {
|
|
|
height: 600,
|
|
|
id: LIST_TABLE_ID,
|
|
|
elem: "#" + LIST_TABLE_ID,
|
|
|
data: LIST_TABLE_DATA,
|
|
|
// url: LIST_TABLE_URL,
|
|
|
even: "false",
|
|
|
defaultToolbar: [],
|
|
|
page: false,
|
|
|
cols: [LIST_TABLE_COLS],
|
|
|
where: where,
|
|
|
parseData: function (res) {
|
|
|
return {
|
|
|
code: 0,
|
|
|
msg: "",
|
|
|
//count: res.totalSize,
|
|
|
data: res,
|
|
|
};
|
|
|
},
|
|
|
/* done: function (res, curr, count) {
|
|
|
loadPage(curr, count);
|
|
|
},*/
|
|
|
};
|
|
|
table.render(tableRenderOptions);
|
|
|
}
|
|
|
});
|