Commit 4f8d01dc authored by 姬鋆屾's avatar 姬鋆屾
parents b5903736 439cd50e
......@@ -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",
......
......@@ -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");
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment