@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/router.js

@@ -1,111 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-const Layout = () => import('@/components/Layout/Layout.vue')
-
-
-export const constantRouterMap = [
-  {
-    path: '/',
-    redirect: '/comsDesiger',
-  },
-  {
-    path: '/create',
-    component: () => import('@/views/form/create')
-  },
-  // {
-  //   path: '/demo',
-  //   component: () => import('@/views/demo/demo2'),
-  //   meta: { title: '测试' },
-  // },
-
-  {
-    id: 'document',
-    path: '/document',
-    component: Layout,
-    meta: { title: '开发指南' },
-    children: [{
-      id: 'document',
-      path: '/document',
-      component: () => import('@/views/document/index.vue'),
-      meta: { title: '介绍与安装' },
-    },]
-  },
-  {
-    id: 'components',
-    path: '/components',
-    component: Layout,
-    meta: { title: '组件' },
-    children: [
-      {
-        id: 'comsDesiger',
-        path: '/comsDesiger',
-        component: () => import('@/views/coms/comsDesiger.vue'),
-        meta: { title: 'FGDesigner 表单编辑器' }
-      },
-      {
-        id: 'comsFormPc',
-        path: '/comsFormPc',
-        component: () => import('@/views/coms/comsFormPc.vue'),
-        meta: { title: 'FGPcForm 表单渲染(PC端)' }
-      },
-
-      {
-        id: 'comsFormPhone',
-        path: '/comsFormPhone',
-        component: () => import('@/views/coms/comsFormPhone.vue'),
-        meta: { title: 'FGPhoneForm 表单渲染(移动端)' }
-      },
-
-      {
-        id: 'comsShowPc',
-        path: '/comsShowPc',
-        component: () => import('@/views/coms/comsShowPc.vue'),
-        meta: { title: 'FGPcShow 表单详情(PC端)' }
-      },
-
-      {
-        id: 'comsShowPhone',
-        path: '/comsShowPhone',
-        component: () => import('@/views/coms/comsShowPhone.vue'),
-        meta: { title: 'FGPhoneShow 表单详情(移动端)' }
-      },
-    ],
-  },
-  {
-    path: '/config',
-    component: Layout,
-    meta: { title: '配置属性' },
-    children: [
-      {
-        path: '/config',
-        component: () => import('@/views/config/config.vue'),
-        meta: { title: '配置属性参数说明' },
-      },
-
-    ]
-  },
-]
-
-
-export default new Router({
-  // mode: 'history', //后端支持可开
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRouterMap.concat()
-})
-
-// 兼容路由报错
-const originalPush = Router.prototype.push
-const originalReplace = Router.prototype.replace
-// push
-Router.prototype.push = function push(location, onResolve, onReject) {
-  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
-  return originalPush.call(this, location).catch(err => err)
-}
-// replace
-Router.prototype.replace = function push(location, onResolve, onReject) {
-  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
-  return originalReplace.call(this, location).catch(err => err)
-}

package/src/store/index.js

@@ -1,14 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import app from './modules/app'
-import user from './modules/user'
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  modules: {
-    app, user
-  },
-})
-
-export default store

package/src/store/modules/app.js

@@ -1,54 +0,0 @@
-import { getRGBNum } from "@/components/formGenerator/utils";
-
-const app = {
-  state: {
-    formData: null, // 表单设计预览存储内容
-    activeData: '', // 选中数据
-    activeId: '', // 选中id
-    drawingList: [], // 用于存储拖拽过程中的表单组件列表
-    cssList: [], // 用于存储全部样式
-    eventList: [], // 用于存储全部事件
-    themeColor: '', // 主题色
-    selectedColor: '',
-    header: {}, // 请求头数据
-    refresh: false, // 刷新
-  },
-
-  mutations: {
-    SET_FORMDATA(state, formData) {
-      state.formData = formData
-    },
-    SET_ACTIVEDATA(state, activeData) {
-      if (activeData?.__config__?.formId) {
-        state.activeId = activeData.__config__.formId
-      }
-      state.activeData = activeData
-    },
-    SET_ACTIVEID(state, activeId) {
-      state.activeId = activeId
-    },
-    SET_CSSLIST(state, cssList) {
-      state.cssList = cssList
-    },
-    SET_EVENTLIST(state, eventList) {
-      state.eventList = eventList
-    },
-    SET_THEMECOLOR(state, themeColor) {
-      state.themeColor = themeColor
-      const { r, g, b } = getRGBNum(themeColor);
-      const selectedColor = `rgba(${r}, ${g}, ${b}, 0.08)`
-      state.selectedColor = selectedColor
-    },
-    SET_HEADER(state, header) {
-      state.header = header
-    },
-    SET_REFRESH(state) {
-      state.refresh = !state.refresh
-    },
-  },
-  actions: {
-
-  }
-}
-
-export default app

package/src/store/modules/user.js

@@ -1,23 +0,0 @@
-const user = {
-  state: {
-    token: sessionStorage.getItem('token'),
-    systemType: sessionStorage.getItem('systemType'),
-  },
-
-  mutations: {
-    SET_TOKEN: (state, token) => {
-      state.token = token
-      sessionStorage.setItem('token', token)
-    },
-    SET_SYSTEMTYPE: (state, systemType) => {
-      state.systemType = systemType
-      sessionStorage.setItem('systemType', systemType)
-    },
-  },
-
-  actions: {
-  }
-}
-
-export default user
-

package/src/style/color.scss

@@ -1,10 +0,0 @@
-$gray-3: #ebedf0;
-$gray-5: #c8c9cc;
-$gray-6: #969799;
-$gray-7: #646566;
-$blue: #478df4;
-
-// 导出颜色变量，以供在 js 中使用
-:export {
-  blue: $blue;
-}

package/src/style/main.scss

@@ -1,78 +0,0 @@
-.pc, body, html {
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-
-$textColor0:#1f2f3d;
-$textColor1:#5e6d82;
-
-
-body, html {
-  margin: 0;
-  padding: 0;
-  // color:$textColor0;
-  // font-size: 14px;
-}
-
-.text-color {
-  color:$textColor0;
-}
-.text-color1 {
-  color:$textColor1;
-}
-.text1 {
-  color:$textColor1;
-  font-size: 14px;
-}
-
-.introduce {
-  line-height: 30px;
-  color:$textColor0;
-}
-.introduce-item {
-  line-height: 30px;
-  font-size: 14px;
-  color:$textColor1;
-  .el-link.el-link--default {
-    color:$textColor1;
-  }
-}
-
-.coms-page {
-  >.el-card {
-    margin-top: 22px;
-  }
-}
-
-// .text {
-//   color:#1f2f3d;
-// }
-
-
-a:focus {
-  outline: none;
-}
-
-.clearfix::before,
-.clearfix::after {
-  content: "";
-  clear: both;
-  display: block;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {/*滚动条整体样式*/
-  width: 5px;
-  height: 5px;;
-}
-::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-  background-color: #cfcfcf;
-  border-radius: 5px;
-}
-::-webkit-scrollbar-track-piece {
-  background: 0 0;
-}
-
-
-

package/src/utils/comsData.js

@@ -1,279 +0,0 @@
-import { data } from "./defaultValue"
-export const desigerAttributes = [
-  {
-    param: "value / v-model",
-    remark: "为表单编辑器生成的动态表单数据转换的JSON字符串",
-    type: "String",
-    value: "-",
-  },
-  {
-    param: "options",
-    remark: "表单配置项",
-    type: "Object",
-    value: "-",
-    children: [
-      {
-        param: "themeColor",
-        remark: "主题色",
-        type: "String",
-        value: "#409EFF",
-      },
-      {
-        param: "header",
-        remark: "请求头配置，可以在此处传入token等数据，以对象形式传入直接添加到请求头上",
-        type: "Object",
-        value: "如：{token:'xxxxx'}",
-      },
-    ]
-  }
-  // {
-  //   param: "form",
-  //   remark: "为包含表单组件对应的key和value",
-  //   type: "Object",
-  //   value: "-",
-  // },
-  // {
-  //   param: "enabled",
-  //   remark: "在表单画板处，编辑器控件是否可以交互操作",
-  //   type: "Boolean",
-  //   value: "false",
-  // }, {
-  //   param: "hideSaveBtn",
-  //   remark: "隐藏保存按钮",
-  //   type: "Boolean",
-  //   value: "false",
-  // },
-  // {
-  //   param: "defaultComs",
-  //   remark: "表单编辑器组件库",
-  //   type: "Object",
-  //   value: "-",
-  // },
-]
-
-export const desigerMethods = [
-  {
-    method: 'validate',
-    remark: '对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个个参数：校验是否通过、校验提示语',
-    param: 'Function(callback: Function(Boolean,Array))'
-  },
-  {
-    method: 'submit',
-    remark: '对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值',
-    param: 'Function(callback: Function(object))'
-  },
-]
-
-export const desigerEvents = [
-  {
-    event: 'save',
-    remark: '点击保存按钮触发',
-    param: '新状态的value值，新状态的组件列表，新状态的表单属性'
-  },
-  {
-    event: 'change',
-    remark: '数据更改触发',
-    param: '新状态的value值'
-  },
-]
-
-export const desigerCode =
-  `<template>
-  <FGDesigner v-model="formConf" @save="handleSave" @change="handleChange"/>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      formConf: {},
-    };
-  },
-  methods: {
-    handleSave(form) {
-      console.log("数据发布：",form)
-    },
-    handleChange(form) {
-      console.log("数据更新：",form)
-    }
-  }
-};
-</script> `
-
-export const formAttributes = [
-  {
-    param: "value / v-model",
-    remark: "为表单编辑器生成的动态表单数据转换的JSON字符串",
-    type: "String",
-    value: "-",
-  },
-  {
-    param: "form",
-    remark: "为包含表单组件对应的key和value",
-    type: "Object",
-    value: "-",
-  },
-]
-
-export const formMethods = [
-  {
-    method: 'validateForm',
-    remark: '对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入三个参数：校验是否通过、表单的form值、表单的value值',
-    param: 'Function(callback: Function(valid, form, value))'
-  },
-  // {
-  //   method: 'submitForm',
-  //   remark: '对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值',
-  //   param: 'Function(callback: Function(object))'
-  // },
-  { method: 'resetForm', remark: '对整个表单进行重置，将所有字段值重置为初始值', param: '-' },
-]
-
-export const pcFormCode =
-  `<template>
-  <FGPcForm ref="FGPcForm" v-model="data"  />
-  <div style="text-align: center">
-    <el-button type="primary" @click="submitForm">提交</el-button>
-    <el-button @click="resetForm">重置</el-button>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      data: '${JSON.stringify(data)}',
-    };
-  },
-
-  methods: {
-    submitForm() {
-      this.$refs["FGPcForm"].validateForm((valid, form) => {
-        if (valid) {
-          // 表单校验通过  
-        } else {
-          console.log("表单校验失败");
-        }
-      });
-    },
-    resetForm() {
-      this.$refs["FGPcForm"].resetForm();
-    },
-  },
-};
-</script> `
-
-export const phoneFormCode =
-  `<template>
-  <FGPhoneForm ref="FGPhoneForm" v-model="form" />
-  <div style="margin: 16px">
-    <van-button round block type="info" @click="submitForm"
-      >提交</van-button
-    >
-    <van-button round plain block  style="margin-top: 15px" type="info" @click="resetForm"
-      >重置</van-button
-    >
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      data: '${JSON.stringify(data)}',
-    };
-  },
-
-  methods: {
-    submitForm() {
-      this.$refs["FGPhoneForm"].validateForm((valid, form) => {
-        if (valid) {
-          // 表单校验通过  
-        } else {
-          console.log("表单校验失败");
-        }
-      });
-    },
-    resetForm() {
-      this.$refs["FGPhoneForm"].resetForm();
-    },
-  },
-};
-</script> `
-
-export const showAttributes = [
-  {
-    param: "value",
-    remark: "为表单编辑器生成的动态表单数据转换的JSON字符串",
-    type: "String",
-    value: "-",
-  },
-  {
-    param: "form",
-    remark: "为包含表单组件对应的key和value",
-    type: "Object",
-    value: "-",
-  },
-]
-
-export const pcShowCode =
-  `<template>
-  <FGPcShow :value="data" />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      data: '${JSON.stringify(data)}',
-    };
-  },
-};
-</script>`
-
-export const phoneShowCode =
-  `<template>
-  <FGPhoneShow :value="data" />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      data: '${JSON.stringify(data)}',
-    };
-  },
-};
-</script>`
-
-export const formTable = [
-  { param: 'formRef', required: '是', remark: '表单名' },
-  { param: 'formModel', required: '是', remark: '表单模型' },
-  { param: 'formRules', required: '是', remark: '校验模型	' },
-  { param: 'size', required: '否', remark: '表单尺寸' },
-  { param: 'labelPosition', required: '否', remark: '标签对齐	' },
-  { param: 'labelWidth', required: '否', remark: '标签宽度' },
-  { param: 'gutter', required: '是', remark: '栅格间隔' },
-  { param: 'disabled', required: '是', remark: '是否禁用表单	' },
-  { param: 'unFocusedComponentBorder', required: '是', remark: '是否显示未选中组件边框' },
-  { param: 'list', required: '是', remark: '用于存放组件配置参数	' },
-
-]
-
-export const configTable = [
-  { param: '__config__.tagType', required: '是', remark: '组件类型' },
-  { param: '__vModel__', required: '是', remark: '表单字段的属性名，可自定义	系统自增' },
-  { param: '__config__.defaultValue', required: '否', remark: '默认值；与__vModel__对应使用，可指定表单字段的默认值；可用于表单数据回填	' },
-  { param: '__config__.tag', required: '是', remark: '组件名称	' },
-  { param: '__config__.changeTag', required: '是', remark: '是否允许显示切换组件面板	' },
-  { param: '__config__.tagIcon', required: '是', remark: '组件svg图标名称	' },
-  { param: '__config__.label', required: '是', remark: '表单标题	' },
-  { param: '__config__.showLabel', required: '是', remark: '是否显示表单标题	' },
-  { param: '__config__.labelWidth', required: '是', remark: '表单标题区域宽度(px)	' },
-  { param: '__config__.required', required: '是', remark: '是否要求表单校验	' },
-  { param: '__config__.regList', required: '否', remark: '表单正则校验；赋值为数组时，显示配置项	' },
-  { param: '__config__.span', required: '是', remark: '24栅格系统，表示组件的栅格数	' },
-  { param: '__config__.layoutTree', required: '否', remark: '是否显示布局树，仅布局组件“行容器”存在	' },
-  { param: 'children', required: '否', remark: '子组件，仅布局组件“行容器”存在	' },
-  { param: '其余属性', required: '否', remark: '根据不同组件的属性灵活配置。不同组件属性名称及作用与elementUI一致，可参考：<a href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blank" type="primary" >https://element.eleme.cn/#/zh-CN/component/installation</a>' }
-]
-
-