|
|
@@ -0,0 +1,424 @@
|
|
|
+<template>
|
|
|
+ <div class="main-wrap">
|
|
|
+ <div class="drag-position">
|
|
|
+ <!-- 左侧面板区域 start-->
|
|
|
+ <!-- <LetfPanel
|
|
|
+ :formList="formList"
|
|
|
+ @handleClick="panelClickHandler"
|
|
|
+ @start="generateKey"
|
|
|
+ ></LetfPanel> -->
|
|
|
+ <a-collapse style="width: 370px">
|
|
|
+ <a-collapse-panel
|
|
|
+ v-for="(item, index) in schemaGroup"
|
|
|
+ :header="item.title"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <collapseItem
|
|
|
+ :list="item.list"
|
|
|
+ @generateKey="generateKey"
|
|
|
+ @handleListPush="handleListPush"
|
|
|
+ @start="handleStart"
|
|
|
+ />
|
|
|
+ </a-collapse-panel>
|
|
|
+ </a-collapse>
|
|
|
+ <!-- 左侧面板区域 end-->
|
|
|
+ <!-- 中间拖拽区域 start-->
|
|
|
+ <div class="drag-wrap">
|
|
|
+ <!-- 顶部工具 -->
|
|
|
+ <TopToolBar
|
|
|
+ @showJSON="showJSON"
|
|
|
+ @saveJSON="saveJSON"
|
|
|
+ @showJSONData="showJSONData"
|
|
|
+ @showPreView="showPreView"
|
|
|
+ ></TopToolBar>
|
|
|
+ <CenterArea
|
|
|
+ :data="layoutData"
|
|
|
+ :selectItem="selectItem"
|
|
|
+ @setCurrentTarget="setCurrentTarget"
|
|
|
+ :noModel="noModel"
|
|
|
+ ref="centerAreaRef"
|
|
|
+ ></CenterArea>
|
|
|
+ </div>
|
|
|
+ <!-- 中间拖拽区域 end-->
|
|
|
+ <!-- 右侧面板区域 start -->
|
|
|
+ <RightPanel class="right-panel" :selectItem="selectItem"></RightPanel>
|
|
|
+ <!-- 右侧面板区域 end -->
|
|
|
+ <!-- JSON数据预览 -->
|
|
|
+ <JSONViewer ref="JSONViewerRef"></JSONViewer>
|
|
|
+ <!-- 布局效果预览 -->
|
|
|
+ <PreView ref="PreViewRef"></PreView>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { formList } from "./component/tempJson.js";
|
|
|
+
|
|
|
+import LetfPanel from "./component/LetfPanel.vue";
|
|
|
+import CenterArea from "./component/CenterArea.vue";
|
|
|
+import collapseItem from "./component/collapseItem.vue"; //左侧tab
|
|
|
+import RightPanel from "./component/RightPanel.vue"; //右侧tab
|
|
|
+import TopToolBar from "./component/TopToolBar.vue"; //右侧tab
|
|
|
+import { updateFormGroup, getFormGroup } from "@/api/system/formGroup";
|
|
|
+import JSONViewer from "./component/JSONViewer.vue";
|
|
|
+import PreView from "./component/PreView.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "dragPositionIndex",
|
|
|
+ props: [],
|
|
|
+ components: {
|
|
|
+ LetfPanel,
|
|
|
+ CenterArea,
|
|
|
+ collapseItem,
|
|
|
+ RightPanel,
|
|
|
+ TopToolBar,
|
|
|
+ JSONViewer,
|
|
|
+ PreView,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formGroupData: {},
|
|
|
+ startType: "",
|
|
|
+ layoutData: {
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ mainList: [], //拖拽区域数据
|
|
|
+ selectItem: {}, //当前拖拽对象
|
|
|
+ noModel: [
|
|
|
+ "button",
|
|
|
+ "divider",
|
|
|
+ "card",
|
|
|
+ "grid",
|
|
|
+ "tabs",
|
|
|
+ "table",
|
|
|
+ "alert",
|
|
|
+ "text",
|
|
|
+ "html",
|
|
|
+ ],
|
|
|
+ schemaGroup: [
|
|
|
+ {
|
|
|
+ title: "表单控件",
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "布局组件",
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ label: "标签页布局",
|
|
|
+ type: "tabs",
|
|
|
+ options: {
|
|
|
+ tabBarGutter: null,
|
|
|
+ type: "line",
|
|
|
+ tabPosition: "top",
|
|
|
+ size: "default",
|
|
|
+ noFormItem: true,
|
|
|
+ animated: true,
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ label: "选项1",
|
|
|
+ list: [],
|
|
|
+ tableName: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "2",
|
|
|
+ label: "选项2",
|
|
|
+ list: [],
|
|
|
+ tableName: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ key: "",
|
|
|
+ model: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "grid",
|
|
|
+ label: "栅格布局",
|
|
|
+ icon: "icon-zhage",
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ span: 12,
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 12,
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ options: {
|
|
|
+ noFormItem: true,
|
|
|
+ gutter: 0,
|
|
|
+ },
|
|
|
+ key: "",
|
|
|
+ model: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "divider",
|
|
|
+ label: "分割线",
|
|
|
+ icon: "icon-fengexian",
|
|
|
+ options: {
|
|
|
+ orientation: "left",
|
|
|
+ noFormItem: true,
|
|
|
+ title: "提示信息",
|
|
|
+ },
|
|
|
+ key: "",
|
|
|
+ model: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.schemaGroup[0].list = formList;
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formList() {
|
|
|
+ return formList;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initData() {
|
|
|
+ let id = this.$route.query.id;
|
|
|
+ let res = await getFormGroup(id);
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ let {
|
|
|
+ fGName,
|
|
|
+ formKeys,
|
|
|
+ groupKey,
|
|
|
+ mainTable,
|
|
|
+ id,
|
|
|
+ relationJson,
|
|
|
+ remark,
|
|
|
+ dragFormList,
|
|
|
+ layoutJson,
|
|
|
+ } = res.data;
|
|
|
+ this.formGroupData = {
|
|
|
+ fGName,
|
|
|
+ formKeys,
|
|
|
+ groupKey,
|
|
|
+ mainTable,
|
|
|
+ id,
|
|
|
+ relationJson,
|
|
|
+ remark,
|
|
|
+ dragFormList,
|
|
|
+ layoutJson,
|
|
|
+ };
|
|
|
+ this.initFormData();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加表单json数据
|
|
|
+ addFormJSONData(data) {
|
|
|
+ df = (arr) => {
|
|
|
+ arr.forEach((element) => {
|
|
|
+ if (element.type == "form") {
|
|
|
+ // element.dfVueTemplate=
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 预览展示
|
|
|
+ showPreView() {
|
|
|
+ console.log(this.layoutData, formList);
|
|
|
+ let tempLayoutData = JSON.parse(JSON.stringify(this.layoutData));
|
|
|
+
|
|
|
+ this.$refs.PreViewRef.setLayoutData(this.layoutData, formList);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.PreViewRef.showPreView();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // JSON展示回调
|
|
|
+ showJSONData() {
|
|
|
+ this.$refs.JSONViewerRef.setJSONData(JSON.stringify(this.layoutData));
|
|
|
+ this.$refs.JSONViewerRef.showHandler();
|
|
|
+ },
|
|
|
+ // 保存布局数据
|
|
|
+ async saveJSON() {
|
|
|
+ let payLoad = {
|
|
|
+ ...this.formGroupData,
|
|
|
+ layoutJson: JSON.stringify(this.layoutData),
|
|
|
+ };
|
|
|
+ let res = await updateFormGroup(payLoad);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("保存成功!");
|
|
|
+ } else {
|
|
|
+ this.$message.error("网络异常,保存失败!");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化表单数据
|
|
|
+ initFormData() {
|
|
|
+ let res = [];
|
|
|
+ this.layoutData.list = [];
|
|
|
+ console.log(this.formGroupData);
|
|
|
+ let { dragFormList, layoutJson } = this.formGroupData;
|
|
|
+ res = dragFormList.map((item, index) => {
|
|
|
+ let { dfName, dfNickname, dfTableName, formKey, dfVueTemplate } = item;
|
|
|
+ return {
|
|
|
+ key: new Date().getTime() + "_" + index,
|
|
|
+ type: "form",
|
|
|
+ label: dfName,
|
|
|
+ dfNickname,
|
|
|
+ dfTableName,
|
|
|
+ formKey,
|
|
|
+ dfVueTemplate,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.$set(this.schemaGroup[0], "list", res);
|
|
|
+ if (layoutJson) {
|
|
|
+ this.layoutData = JSON.parse(layoutJson);
|
|
|
+ } else {
|
|
|
+ this.layoutData.list.push(...res);
|
|
|
+ }
|
|
|
+ console.log(this.layoutData);
|
|
|
+ // this.schemaGroup[0].list = res;
|
|
|
+ },
|
|
|
+ // 预览json
|
|
|
+ showJSON() {
|
|
|
+ console.log("json数据", JSON.stringify(this.layoutData));
|
|
|
+ },
|
|
|
+ handleStart(type) {
|
|
|
+ this.startType = type;
|
|
|
+ },
|
|
|
+ checkIsRepeat(dfNickname) {
|
|
|
+ console.log(dfNickname, this.layoutData);
|
|
|
+ let res = {
|
|
|
+ result: false,
|
|
|
+ };
|
|
|
+ let checkDF = (list, res) => {
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ let temp = list[i];
|
|
|
+ if (temp.type == "form") {
|
|
|
+ console.log(temp.dfNickname, dfNickname);
|
|
|
+ if (temp.dfNickname == dfNickname) {
|
|
|
+ res.result = true;
|
|
|
+ }
|
|
|
+ } else if (temp.type == "tabs" || temp.type == "grid") {
|
|
|
+ for (let k = 0; k < temp.columns.length; k++) {
|
|
|
+ checkDF(temp.columns[k].list, res);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ checkDF(this.layoutData.list, res);
|
|
|
+ return res.result;
|
|
|
+ },
|
|
|
+ // 校验当前表单是否已存在
|
|
|
+ handleListPush(item) {
|
|
|
+ console.log(this.selectItem);
|
|
|
+ console.log(item);
|
|
|
+ if (item.type == "form") {
|
|
|
+ let isRepeat = this.checkIsRepeat(item.dfNickname);
|
|
|
+ console.log("isRepeat", isRepeat);
|
|
|
+ if (isRepeat) {
|
|
|
+ this.$message.error("该表单已存在!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 生成key值
|
|
|
+ // if (!this.selectItem?.key) {
|
|
|
+ // 在没有选择表单时，将数据push到this.data.list
|
|
|
+ const key = item.type + "_" + new Date().getTime();
|
|
|
+ item = {
|
|
|
+ ...item,
|
|
|
+ key,
|
|
|
+ model: key,
|
|
|
+ };
|
|
|
+ if (this.noModel.includes(item.type)) {
|
|
|
+ // 删除不需要的model属性
|
|
|
+ delete item.model;
|
|
|
+ }
|
|
|
+ const itemString = JSON.stringify(item);
|
|
|
+ const record = JSON.parse(itemString);
|
|
|
+ // 删除icon及compoent属性
|
|
|
+ delete record.icon;
|
|
|
+ delete record.component;
|
|
|
+ this.layoutData.list.push(record);
|
|
|
+ this.handleSetSelectItem(record);
|
|
|
+ return false;
|
|
|
+ // }
|
|
|
+ // this.$refs.centerAreaRef.handleCopy(false, item);
|
|
|
+ },
|
|
|
+ handleSetSelectItem(record) {
|
|
|
+ // 操作间隔不能低于100毫秒
|
|
|
+ const newTime = new Date().getTime();
|
|
|
+ if (newTime - this.updateTime < 100) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.updateTime = newTime;
|
|
|
+
|
|
|
+ // 设置selectItem的值
|
|
|
+ this.selectItem = record;
|
|
|
+ console.log("this.selectItem", this.selectItem);
|
|
|
+
|
|
|
+ // 判断是否选中控件，如果选中则弹出属性面板，否则关闭属性面板
|
|
|
+ // if (record.key) {
|
|
|
+ // this.startType = record.type;
|
|
|
+ // this.changeTab(2);
|
|
|
+ // } else {
|
|
|
+ // this.changeTab(1);
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ panelClickHandler(item) {
|
|
|
+ this.selectItem = item;
|
|
|
+ this.mainList.push(item);
|
|
|
+ this.layoutData.list.push(item);
|
|
|
+ console.log(this.mainList);
|
|
|
+ },
|
|
|
+ setCurrentTarget(item) {
|
|
|
+ console.log("this.selectItem", item);
|
|
|
+ this.selectItem = item;
|
|
|
+ console.log("layoutData", this.layoutData);
|
|
|
+ },
|
|
|
+ generateKey(list, index) {
|
|
|
+ const key = list[index].type + "_" + new Date().getTime();
|
|
|
+ this.$set(list, index, {
|
|
|
+ ...list[index],
|
|
|
+ key,
|
|
|
+ model: key,
|
|
|
+ });
|
|
|
+ if (this.noModel.includes(list[index].type)) {
|
|
|
+ // 删除不需要的model属性
|
|
|
+ delete list[index].model;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ul {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.main-wrap {
|
|
|
+ height: calc(100vh - 140px);
|
|
|
+}
|
|
|
+.drag-position {
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ display: flex;
|
|
|
+ .drag-wrap {
|
|
|
+ // box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ // height: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.right-panel {
|
|
|
+ width: 350px;
|
|
|
+ border: 1px solid #dddddd;
|
|
|
+ height: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+</style>
|
zyz