<template>
|
<el-container class="designer-container">
|
<el-aside width="250px" class="components-list">
|
<sticky class-name="left-sticky">
|
<el-collapse accordion>
|
<el-collapse-item title="布局容器">
|
<draggable :list="layoutComponents" :options="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}" :move="handleMove" tag="ul" @end="handleMoveEnd" @start="handleMoveStart">
|
<li v-for="(item, index) in layoutComponents" :key="index" class="form-edit-widget-label data-grid">
|
<a>
|
<i :class="item.icon"></i>
|
<span>{{ item.label }}</span>
|
</a>
|
</li>
|
</draggable>
|
</el-collapse-item>
|
<el-collapse-item v-for="(m, mIndex) in basicComponents" :key="mIndex" :title="m.title">
|
<draggable :list="m.items" :options="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}" :move="handleMove" tag="ul" @end="handleMoveEnd" @start="handleMoveStart">
|
<li v-for="(item, index) in m.items" :key="index" class="form-edit-widget-label">
|
<img :src="item.img" alt="">
|
<a>
|
<span>{{ item.label }}</span>
|
</a>
|
</li>
|
</draggable>
|
</el-collapse-item>
|
<el-collapse-item title="属性设置" class="widget-config-container">
|
<component v-show="configTab=='widget'" :is="configType" :data="widgetFormSelect" :basic-components="basicComponents"></component>
|
</el-collapse-item>
|
</el-collapse>
|
</sticky>
|
</el-aside>
|
|
<el-container class="center-container" direction="vertical">
|
<sticky :z-index="2000" height="40px" class-name="content-tool">
|
<div class="right-tools">
|
<el-button type="text" size="medium" icon="el-icon-yrt-reset" @click="handleReset">重置</el-button>
|
<el-button type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">查看</el-button>
|
<el-button type="text" size="medium" icon="el-icon-yrt-baocun" @click="saveVue('save')">保存</el-button>
|
</div>
|
</sticky>
|
|
<div class="content">
|
<div :class="{'widget-empty': widgetFormData.fields.length == 0}" style="min-height:1200px">
|
<widget-form ref="widgetForm" :data="widgetFormData" :select.sync="widgetFormSelect" :config-type.sync="configType" :detail-fields.sync="detailFields"></widget-form>
|
</div>
|
</div>
|
</el-container>
|
|
<cus-dialog ref="jsonPreview" :visible="jsonVisible" title="生成JSON并保存Vue文件" width="800px" form @on-close="jsonVisible = false">
|
<div id="jsoneditor" style="height: 400px;width: 100%;">{{ jsonData }}</div>
|
<template slot="action">
|
<el-button data-clipboard-target=".ace_text-input" @dblclick.native="$message.success('复制成功');">双击复制</el-button>
|
<el-button :loading="createLoading" type="primary" data-clipboard-target=".ace_text-input" @click.native="saveVue('jsoneditor')">保存并生成Vue文件</el-button>
|
</template>
|
</cus-dialog>
|
|
<cus-dialog ref="codePreview" :visible="codeVisible" title="生成页面" form width="800px" @on-close="codeVisible = false">
|
<div id="codeeditor" style="height: 500px; width: 100%;">{{ htmlTemplate }}</div>
|
<template slot="action">
|
<el-button id="closebtn" @click="codeVisible=false">关闭</el-button>
|
</template>
|
</cus-dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import Draggable from "vuedraggable";
|
import WidgetConfig from "./WidgetConfig";
|
import WidgetForm from "./WidgetForm";
|
import CusDialog from "./CusDialog";
|
// import JSONEditor from 'jsoneditor'
|
// import 'jsoneditor/dist/jsoneditor.min.css'
|
import Sticky from "@/components/Sticky";
|
|
import { basicComponents, layoutComponents } from "./componentsConfig.js";
|
import { loadJs } from "./util/index.js";
|
import { generateMixinCode, generateMainCode } from "./generateMixinCode.js";
|
|
export default {
|
name: "sys-dev-tools-layout-designer",
|
components: {
|
Draggable,
|
WidgetConfig,
|
WidgetForm,
|
CusDialog,
|
Sticky
|
},
|
data() {
|
return {
|
basicComponents,
|
layoutComponents,
|
// 明细字段
|
detailFields: [],
|
|
// 当前配置参数设置组件
|
configType: "WidgetConfig",
|
|
// 模块tree prop参数配置
|
moduleProps: {
|
label: "CnName",
|
// children: "zones",
|
isLeaf: function(data, node) {
|
return data.hasChild !== 1;
|
}
|
},
|
// 设计器数据结构
|
widgetFormData: {
|
fields: [],
|
config: {
|
labelWidth: "100px", // 标签文字宽度
|
labelPosition: "right", // 标签位置
|
top: "3vh", // 对话框底部距离
|
width: "1200px", // 对话框宽度
|
visible: false, // 是否显示添加实验室对话框
|
disabled: false, // 是否禁用
|
title: null, // 对话框标题
|
action: "add", // 接收值为：add、edit
|
formInline: false, // 行内表单
|
saveButtonText: "保存"
|
}
|
},
|
|
// 设计器类型：管理页面、编辑页面
|
editRegionTab: "WidgetConfig",
|
configTab: "widget",
|
widgetFormSelect: null, // 选中项
|
previewVisible: false,
|
jsonVisible: false,
|
codeVisible: false,
|
widgetModels: {},
|
blank: "",
|
htmlTemplate: "",
|
jsonData: "", // 创建混入文件内容
|
createLoading: false // 创建页面loading
|
};
|
},
|
mounted() {
|
loadJs("lib/ace/src/ace.js");
|
this.init();
|
},
|
methods: {
|
handleMoveEnd(evt) {
|
// console.log("end", evt);
|
},
|
handleMoveStart({ oldIndex }) {
|
// console.log("start", oldIndex);
|
},
|
handleMove() {
|
return true;
|
},
|
// 预览设计
|
handlePreview() {
|
this.previewVisible = true;
|
},
|
// 重置，重新开始设计
|
handleReset() {
|
this.$confirm("确定要重置设计，将重新开始设计, 是否继续?", "重置提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.reset();
|
this.$message({
|
type: "success",
|
message: "重置成功!"
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消重置"
|
});
|
});
|
},
|
reset() {
|
this.widgetFormData = Object.assign(
|
{},
|
{
|
fields: [],
|
config: {
|
labelWidth: "100px", // 标签文字宽度
|
labelPosition: "right", // 标签位置
|
top: "3vh", // 对话框底部距离
|
width: "1200px", // 对话框宽度
|
visible: false, // 是否显示添加实验室对话框
|
disabled: false, // 是否禁用
|
title: null, // 对话框标题
|
action: "add", // 接收值为：add、edit
|
formInline: false, // 行内表单
|
saveButtonText: "保存"
|
}
|
}
|
);
|
// 对话框标题名称
|
this.configType = "WidgetConfig"; // 参数设置组件类型
|
this.widgetFormSelect = null; // 编辑页面选中项
|
},
|
// 生成JSON
|
handleGenerateJson() {
|
this.jsonVisible = true;
|
this.jsonData = generateMixinCode(this.widgetFormData);
|
|
this.$nextTick(() => {
|
// eslint-disable-next-line
|
const editor = ace.edit("jsoneditor");
|
editor.session.setMode("ace/mode/jsx");
|
});
|
},
|
// 加载数据
|
init() {
|
const url = "/api/sys/designer/initLayout";
|
const params = {};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
if (res.data) {
|
this.widgetFormData = res.data;
|
}
|
}
|
},
|
true
|
);
|
},
|
// 保存
|
saveVue(type) {
|
var jsonData = null;
|
if (type === "jsoneditor") {
|
// eslint-disable-next-line
|
const editor = ace.edit("jsoneditor");
|
jsonData = editor.getSelectedText();
|
type = "json";
|
}
|
|
// UI布局参数
|
if (!jsonData) {
|
jsonData = JSON.stringify(this.widgetFormData, null, 2);
|
} else {
|
this.widgetFormData = JSON.parse(jsonData);
|
}
|
if (!jsonData) {
|
this.$message.error("没有可保存的数据！");
|
return;
|
}
|
const mainCode = generateMainCode();
|
|
this.createLoading = true;
|
var url = "/api/sys/designer/saveLayout";
|
var params = {
|
mainCode: mainCode,
|
jsonData: jsonData,
|
type: type
|
};
|
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.jsonVisible = false;
|
}
|
this.createLoading = false;
|
},
|
true
|
);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "./styles/cover.scss";
|
@import "./styles/index.scss";
|
.content {
|
/deep/ .el-tabs__header {
|
margin: 0 0 2px;
|
}
|
}
|
</style>
|
