推送

attendance-performance-manager-ui/admin/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@chenfengyuan/vue-qrcode": "^1.0.2",
+    "@form-create/designer": "^1.0.10",
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@vue/babel-preset-app": "^4.5.13",

attendance-performance-manager-ui/admin/src/main.js

@@ -12,6 +12,9 @@ import Global from "./assets/utils/global.js";
 import VueClipboard from "vue-clipboard2";
 import VueAMap from "vue-amap";
 import * as echarts from "echarts";
+import formCreate from "@form-create/element-ui";
+import FcDesigner from "@form-create/designer";
+
 // 将自动注册所有组件为全局组件
 import dataV from "@jiaminghi/data-view";
 
@@ -25,23 +28,25 @@ Vue.use(Filter);
 Vue.use(GlobalComponents); // 全局组件
 Vue.use(VueClipboard);
 Vue.use(VueAMap);
+Vue.use(formCreate);
+Vue.use(FcDesigner);
 VueAMap.initAMapApiLoader({
-  key: "f45cca59553214543a5a77e50a7e04df",
-  plugin: [
-    "AMap.Scale",
-    "AMap.OverView",
-    "AMap.ToolBar",
-    "AMap.MapType",
-    "AMap.PlaceSearch",
-    "AMap.Geolocation",
-    "AMap.Geocoder",
-  ],
-  v: "1.4.4",
-  uiVersion: "1.0",
+    key: "f45cca59553214543a5a77e50a7e04df",
+    plugin: [
+        "AMap.Scale",
+        "AMap.OverView",
+        "AMap.ToolBar",
+        "AMap.MapType",
+        "AMap.PlaceSearch",
+        "AMap.Geolocation",
+        "AMap.Geocoder",
+    ],
+    v: "1.4.4",
+    uiVersion: "1.0",
 });
 Vue.prototype.Global = Global;
 new Vue({
-  router,
-  store,
-  render: (h) => h(App),
+    router,
+    store,
+    render: (h) => h(App),
 }).$mount("#app");

attendance-performance-manager-ui/admin/src/views/feedback/addQuestion/list.vue

 <template>
     <div class="page">
         <div class="top">
+            <el-button class="backBtn" @click="$router.back()">返回上一级</el-button>
             <el-tabs v-model="tabs">
                 <el-tab-pane label="设计问卷" name="1">
-                    <iframe style="width: 100%;height: 80vh;" src="https://wurong19870715.gitee.io/formdesigner/#/" frameborder="0"></iframe>
+                    <fc-designer style="height: 75vh;" ref="designer" />
+                    <div class="tool">
+                        <!--功能按钮-->
+                        <el-row>
+                            <el-button icon="el-icon-download" type="primary" size="small" @click="getFormJson()"
+                                round>生成表单JSON</el-button>
+                            <el-button icon="el-icon-download" type="success" size="small" @click="getFormOption()"
+                                round>生成表单配置</el-button>
+                            <el-button icon="el-icon-upload" type="success" size="small" @click="getFormOption()"
+                                round>预览</el-button>
+                        </el-row>
+                    </div>
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -16,10 +28,65 @@ export default {
         return {
             tabs: '1'
         }
+    },
+    methods: {
+        getFormJson() {
+            //FcDesigner 生成的`JSON`
+            const FcDesignerRule = this.$refs.designer.getRule();
+            console.log(FcDesignerRule)
+
+        },
+        getFormOption() {
+            //FcDesigner 生成的`options`
+            const FcDesignerOptions = this.$refs.designer.getOption();
+            console.log(FcDesignerOptions)
+        }
     }
 }
 </script>
 
 <style lang="less" scoped>
-.top {}
+.backBtn{
+    position: absolute;
+    right: 20px;
+    z-index: 99;
+}
+.tool {
+    margin-top: 20px;
+    text-align: center;
+}
+
+/* 侧边滚动条 */
+/deep/.el-aside::-webkit-scrollbar {
+    width: 3px;
+}
+
+/* 滚动条上的滚动滑块 */
+/deep/.el-aside::-webkit-scrollbar-thumb {
+    background: #CCCCCC;
+    border-radius: 4px;
+}
+
+/* 滚动条轨道 */
+/deep/.el-aside::-webkit-scrollbar-track {
+    background: #EEEEEE;
+    border-radius: 4px;
+}
+
+/* 侧边滚动条 */
+/deep/.el-main::-webkit-scrollbar {
+    width: 3px;
+}
+
+/* 滚动条上的滚动滑块 */
+/deep/.el-main::-webkit-scrollbar-thumb {
+    background: #CCCCCC;
+    border-radius: 4px;
+}
+
+/* 滚动条轨道 */
+/deep/.el-main::-webkit-scrollbar-track {
+    background: #EEEEEE;
+    border-radius: 4px;
+}
 </style>
\ No newline at end of file