@ganwei-web/gw-base-components-plus 1.0.30 → 1.0.31

package/formdesigner/formdesigner.scss

@@ -0,0 +1,134 @@
+.designer {
+    margin-top: 10px;
+    height: 100%;
+}
+
+::v-deep .el-container.center-layout-container {
+    border: none !important;
+}
+
+::v-deep .el-header.toolbar-header {
+    background-color: var(--frame-main-background-2);
+    border-bottom: none !important;
+    border-left: 1px solid var(--frame-main-border1);
+    border-right: 1px solid var(--frame-main-border1);
+}
+
+::v-deep .form-widget-container {
+    background-color: var(--frame-main-background-4) !important;
+    padding: 11px;
+
+    .el-form.full-height-width {
+        background-color: var(--frame-main-background-2) !important;
+    }
+
+}
+
+::v-deep .el-container.main-container {
+    background-color: var(--frame-main-background-2) !important;
+
+    .widget-collapse {
+        .el-collapse-item__header {
+            margin-left: 0;
+            padding-left: 8px;
+            background-color: var(--frame-main-background-2);
+            color: var(--frame-main-color);
+            border-color: var(--frame-main-border1);
+        }
+    }
+
+    .el-collapse-item__content ul .container-widget-item {
+        box-sizing: content-box;
+    }
+
+    .el-collapse-item__header.is-active {
+        border-bottom-color: transparent;
+    }
+
+    .el-collapse-item__wrap {
+        background-color: var(--frame-main-background-2);
+        color: var(--frame-main-color);
+        border-color: var(--frame-main-border1);
+
+        .el-collapse-item__content {
+            color: var(--frame-main-color);
+
+            ul>li {
+                background-color: var(--frame-main-background-2);
+                border-color: var(--frame-main-border1);
+                box-sizing: content-box;
+
+                &:hover {
+                    color: var(--select-dropdown-item-background__hover);
+                    border-color: #409eff;
+                }
+
+            }
+        }
+    }
+}
+
+::v-deep .left-aside-toggle-bar {
+    background: var(--frame-main-background-2) !important;
+    box-sizing: content-box;
+}
+
+::v-deep .right-aside-toggle-bar {
+    background: var(--frame-main-background-2) !important;
+    box-sizing: content-box;
+}
+
+::v-deep .right-toolbar .el-button {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+::v-deep .el-collapse-item__header {
+    background-color: var(--frame-main-background-2);
+    color: var(--frame-main-color);
+    border-color: var(--frame-main-border1)
+}
+::v-deep .el-divider__text {
+    background-color: var(--frame-main-background-2);
+}
+
+
+::v-deep .el-switch .el-switch__core:after {
+    left: 1px;
+    top: 1px;
+    width: 16px;
+    height: 16px;
+}
+
+::v-deep .el-switch.is-checked .el-switch__core:after {
+    left: 100%;
+    margin-left: -17px;
+}
+
+::v-deep .el-switch .el-switch__core {
+    height: 20px;
+    width: 40px !important
+}
+
+::v-deep .el-descriptions {
+    background-color: var(--frame-main-background-2);
+    color: var(--frame-main-color);
+}
+::v-deep .el-descriptions__title {
+    color: var(--frame-main-color);
+}
+::v-deep .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+    background-color: var(--frame-main-background-2);
+    color: var(--frame-main-color)
+}
+::v-deep .ds-list .el-descriptions__content {
+    background-color: var(--frame-main-background-2);
+    color: var(--frame-main-color);
+}
+::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
+    border-color: var(--frame-main-border1)
+}
+::v-deep .dialog-footer-center {
+    padding-bottom: 15px;
+
+}

package/formdesigner/formdesigner.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="designer">
+    <v-form-designer
+      ref="vFormRef"
+      :field-list-data="fieldListData"
+      :designer-config="designerConfig"
+      :form-templates="modal"
+      :showType="designerType"
+    ></v-form-designer>
+
+  </div>
+</template>
+
+<script>
+import formTemplates from './templatesConfig.js'
+
+export default {
+  props: ['fieldListData'],
+  data() {
+    return {
+      designerType: 'PC',
+      designerConfig: {
+        languageMenu: true,
+        externalLink: false,
+        eventCollapse: true,
+        formTemplates: true,
+        logoHeader: false,
+        exportCodeButton: false,
+        generateSFCButton: false,
+        chartLib: true,
+        resetFormJson: true
+      },
+      modal: formTemplates,
+    }
+  },
+  created() {},
+  beforeUnmount() {
+    this.clearDesigner();
+  },
+  methods: {
+    // 设置表单数据
+    setDesignerData(data) {
+      this.$refs.vFormRef.setFormJson(data)
+    },
+    // 获取表单设计
+    getDesignerData() {
+      return this.$refs.vFormRef.getFormJson()
+    },
+    getFieldWidgets() {
+      return this.$refs.vFormRef.getFieldWidgets()
+    },
+    clearDesigner() {
+      return this.$refs.vFormRef.clearDesigner()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped src="./formdesigner.scss"></style>

package/formdesigner/templatesConfig.js

@@ -0,0 +1,79 @@
+import fixedTableForm from './assets/json/fixedTableForm.json'
+import questionnaire from './assets/json/questionnaire.json'
+import singleExampleForm from './assets/json/singleExampleForm.json'
+import multiColumnForm from './assets/json/multiColumnForm.json'
+import groupForm from './assets/json/groupForm.json'
+import tabForm from './assets/json/tabForm.json'
+import masterSlaveForm from './assets/json/masterSlaveForm.json'
+import responsiveForm from './assets/json/responsiveForm.json'
+import fixedTableFormImg from './assets/img/fixedTableForm.png'
+import questionnaireImg from './assets/img/questionnaire.png'
+import singleExampleFormImg from './assets/img/singleExampleForm.png'
+import multiColumnFormImg from './assets/img/multiColumnForm.png'
+import groupFormImg from './assets/img/groupForm.png'
+import tabFormImg from './assets/img/tabForm.png'
+import masterSlaveFormImg from './assets/img/masterSlaveForm.png'
+import responsiveFormImg from './assets/img/responsiveForm.png'
+const formTemplates = [
+    {
+      title: '单列表单',
+      imgUrl: singleExampleFormImg,
+      jsonStr: JSON.stringify(singleExampleForm),
+    },
+
+    {
+      title: '多列表单',
+      imgUrl: multiColumnFormImg,
+      jsonStr: JSON.stringify(multiColumnForm),
+    },
+
+    {
+      title: '分组表单',
+      imgUrl: groupFormImg,
+      jsonStr: JSON.stringify(groupForm),
+    },
+
+    {
+      title: '标签页表单',
+      imgUrl: tabFormImg,
+      jsonStr: JSON.stringify(tabForm),
+    },
+
+    {
+      title: '主从表单',
+      imgUrl: masterSlaveFormImg,
+      jsonStr: JSON.stringify(masterSlaveForm),
+    },
+
+    {
+      title: '响应式表单',
+      imgUrl: responsiveFormImg,
+      jsonStr: JSON.stringify(responsiveForm),
+    },
+
+    {
+      title: '问卷调查表',
+      imgUrl: questionnaireImg,
+      jsonStr: JSON.stringify(questionnaire),
+    },
+
+    {
+      title: '固定表格表单',
+      imgUrl: fixedTableFormImg,
+      jsonStr: JSON.stringify(fixedTableForm),
+    },
+  ]
+
+  export default formTemplates;
+
+//   export function clearFormTemplates() {
+//     formTemplates.splice(0, formTemplates.length)
+//   }
+
+//   export function addFormTemplate(newFormTemplate) {
+//     formTemplates.push(newFormTemplate)
+//   }
+
+//   export function getAllFormTemplates() {
+//     return formTemplates
+//   }