yqform-edit 1.0.0

package/src/components/dynamic-form/index.js

@@ -0,0 +1,40 @@
+import DynamicForm from './dynamic-form'
+// import store from '../../store/index'
+import 'element-ui/lib/theme-chalk/index.css'
+
+const components = [DynamicForm]
+
+/* DynamicForm.install = (Vue) => {
+  Vue.component(DynamicForm.name, DynamicForm)
+} */
+
+/* const install = function (Vue) {   
+  // 全局注册所有的组件  
+  components.forEach(item => { Vue.component(item.name, item) }) 
+}
+if (typeof window !== 'undefined' && window.Vue) {   
+  install(window.Vue) 
+}  */
+
+// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
+if (typeof window !== "undefined" && window.Vue) {
+  window.Vue.component("v-drawer", components);
+}
+// opts是用户传入的store
+const install = function(Vue) {
+ /*  if (!opts.store) {
+    console.log("Please provide a store!");
+  }
+  // 动态注册store
+  opts.registerModule("store", store); */
+
+  components.map(component => {
+    Vue.component(component.name, component);
+  });
+};
+
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+
+export default { install, DynamicForm }

package/src/index.js

@@ -0,0 +1,69 @@
+import Vue from 'vue'
+import E7ingForm from './App.vue'
+import formStore from './store/e7ingForm.js'
+import 'vant/lib/index.css'
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/global.scss'
+import '@vant/touch-emulator'
+import {
+  Area,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  DatetimePicker,
+  CellGroup,
+  Field,
+  Icon,
+  Picker,
+  Popup,
+  Radio,
+  RadioGroup,
+  Rate,
+  Slider,
+  Switch,
+  Uploader,
+  Calendar,
+  Image as VanImage,
+  DropdownMenu,
+  DropdownItem
+} from 'vant'
+import {
+  DatePicker,
+  Dialog,
+  Tooltip,
+  TimePicker,
+  Cascader,
+  Upload,
+  Select,
+  Option,
+  Popover,
+  Input
+} from 'element-ui'
+
+const vantComponents = [Button, Field, Icon, Switch, Picker, Popup, RadioGroup,
+  Radio, Checkbox, CheckboxGroup, DatetimePicker, Uploader, Rate, Slider, Area,
+  CellGroup, Calendar, VanImage, DropdownMenu, DropdownItem]
+const elementComponent = [DatePicker, Dialog, Tooltip, TimePicker, Cascader, Upload, Select, Option, Popover, Input]
+vantComponents.forEach(item => Vue.use(item))
+elementComponent.forEach(item => Vue.use(item))
+
+Vue.config.productionTip = false
+
+const components = [E7ingForm]
+
+const install = function(Vue, opts = {}) {
+  if (!opts.store) {
+    console.log("请为组件传入一个store!", opts);
+  }
+  components.map(component => {
+    Vue.component(component.name, component);
+  });
+  // 将表单组件中的store注册到父组件中
+  opts.store?.registerModule("e7ingForm", formStore);
+};
+
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+
+export default { install, E7ingForm }

package/src/main.js

@@ -0,0 +1,62 @@
+import Vue from 'vue'
+import E7ingForm from './App.vue'
+import store from './store'
+import 'vant/lib/index.css'
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/global.scss'
+import '@vant/touch-emulator'
+import {
+  Area,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  DatetimePicker,
+  CellGroup,
+  Field,
+  Icon,
+  Picker,
+  Popup,
+  Radio,
+  RadioGroup,
+  Rate,
+  Slider,
+  Switch,
+  Uploader,
+  Calendar,
+  Image as VanImage,
+  DropdownMenu,
+  DropdownItem,
+} from 'vant'
+import { DatePicker, Dialog, Tooltip, TimePicker, Cascader, Upload, Select, Option, Popover, Input } from 'element-ui'
+
+const vantComponents = [
+  Button,
+  Field,
+  Icon,
+  Switch,
+  Picker,
+  Popup,
+  RadioGroup,
+  Radio,
+  Checkbox,
+  CheckboxGroup,
+  DatetimePicker,
+  Uploader,
+  Rate,
+  Slider,
+  Area,
+  CellGroup,
+  Calendar,
+  VanImage,
+  DropdownMenu,
+  DropdownItem,
+]
+const elementComponent = [DatePicker, Dialog, Tooltip, TimePicker, Cascader, Upload, Select, Option, Popover, Input]
+vantComponents.forEach((item) => Vue.use(item))
+elementComponent.forEach((item) => Vue.use(item))
+
+Vue.config.productionTip = false
+new Vue({
+  store,
+  render: (h) => h(E7ingForm),
+}).$mount('#app')

package/src/store/e7ingForm.js

@@ -0,0 +1,10 @@
+import state from './state'
+import mutations from './mutations'
+import getters from './getters'
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  getters
+}

package/src/store/getters.js

@@ -0,0 +1,22 @@
+export default {
+  // 当前页数据
+  // currentPage: (state) => {
+  //   return state.form.groups[state.currentPageIndex]
+  // },
+  // // 当前表单的信息
+  // currentFormSpec: (state) => {
+  //   return state.form.spec
+  // },
+  // // 当前分组信息
+  // currentSpec: (state) => {
+  //   return state.form.groups[state.currentPageIndex].spec
+  // },
+  // // 当前选中的表单项
+  // currentItem: (state) => {
+  //   return state.form.groups[state.currentPageIndex].items.find((item) => item.key === state.currentItemKey)
+  // },
+  // // 总页数
+  // totalPage: (state) => {
+  //   return state.form.groups.length
+  // }
+}

package/src/store/index.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import e7ingForm from './e7ingForm.js'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  namespaced: true,
+  modules: { e7ingForm }
+})

package/src/store/mutations.js

@@ -0,0 +1,106 @@
+// import { generateGid } from '@/utils'
+
+export default {
+  // 页码归位
+  // resetPage(state) {
+  //   state.currentPageIndex = 0
+  //   state.currentItemKey = ''
+  // },
+  // // 跳转到指定页
+  // goPage(state, value) {
+  //   state.currentPageIndex = value
+  // },
+  // /** 下一页 */
+  // nextPage(state) {
+  //   state.currentPageIndex++
+  //   state.currentItemKey = ''
+  // },
+  // /** 上一页 */
+  // prevPage(state) {
+  //   state.currentPageIndex--
+  //   state.currentItemKey = ''
+  // },
+  // /** 删除页面 */
+  // removePage(state) {
+  //   state.form.groups.splice(state.currentPageIndex, 1)
+  //   if (state.currentPageIndex === state.form.groups.length) {
+  //     state.currentPageIndex--
+  //   }
+  // },
+  // /** 前移页面 */
+  // forwardPage(state) {
+  //   let data = state.form.groups[state.currentPageIndex - 1]
+  //   state.form.groups[state.currentPageIndex - 1] = state.form.groups[state.currentPageIndex]
+  //   state.form.groups[state.currentPageIndex] = data
+  //   state.movePage++
+  // },
+  // /** 后移页面 */
+  // backwardsPage(state) {
+  //   let data = state.form.groups[state.currentPageIndex + 1]
+  //   state.form.groups[state.currentPageIndex + 1] = state.form.groups[state.currentPageIndex]
+  //   state.form.groups[state.currentPageIndex] = data
+  //   state.movePage++
+  // },
+  // /** 创建页面 */
+  // createPage(state) {
+  //   state.form.groups.push({
+  //     gid: generateGid(),
+  //     spec: {
+  //       title: '',
+  //       subtitle: '',
+  //       unit: '页',
+  //     },
+  //     items: [],
+  //   })
+  //   state.currentPageIndex = state.form.groups.length - 1
+  //   state.currentItemKey = ''
+  // },
+  // /** 请求回来的表单 */
+  // setCurrentForm(state, value) {
+  //   state.form = value
+  // },
+  // /** 设置当前选中表单项 */
+  // setCurrentItemKey(state, value) {
+  //   state.currentItemKey = value
+  // },
+  // /** 删除表单项 */
+  // removeItem(state, value) {
+  //   const index = state.form.groups[state.currentPageIndex].items.findIndex((item) => item.key === value)
+  //   state.form.groups[state.currentPageIndex].items.splice(index, 1)
+  //   state.currentItemKey = ''
+  // },
+  // /** 更新表单信息 */
+  // updateFormSpec(state, value) {
+  //   state.form.spec = value
+  // },
+  // /** 更新分组信息 */
+  // updateGroupSpec(state, value) {
+  //   state.form.groups[state.currentPageIndex].spec = value
+  // },
+  // /** 更新选项信息 */
+  // updataGroupItem(state, value) {
+  //   const index = state.form.groups[state.currentPageIndex].items.findIndex((item) => item.key === state.currentItemKey)
+  //   state.form.groups[state.currentPageIndex].items[index] = value
+  // },
+  // /* 向当前页添加指定数量的题目 */
+  // addItemsToCurrentPage(state, value) {
+  //   state.form.groups[state.currentPageIndex].items.push(value)
+  // },
+  // /** 记录依赖项 */
+  // setDependValue(state, value) {
+  //   const index = state.dependValues.findIndex((item) => item.key === value.key)
+  //   index >= 0 ? state.dependValues.splice(index, 1, value) : state.dependValues.push(value)
+  // },
+  // // 清空依赖项
+  // clearDepends(state) {
+  //   state.dependValues = []
+  // },
+  // // 标记已经粘贴过内容了
+  // hasCopyed(state) {
+  //   state.isAleadyCopy = true
+  // },
+  // // 标记粘贴题目弹窗的打开
+  // modalShow(state) {
+  //   state.pasteModalShow = !state.pasteModalShow
+  // },
+}

package/src/store/state.js

@@ -0,0 +1,321 @@
+import { generateGid } from '@/utils'
+
+export default {
+  // 基本类型
+  baseTypes: [
+    // 开关
+    {
+      label: '开关',
+      key: '', // 表单项的ID
+      type: 'switch', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      // 依赖的其他表单项：当依赖项满足条件时，才会显示当前项
+      depends: [],
+      options: [
+        {
+          id: '1',
+          content: true,
+        },
+        {
+          id: '2',
+          content: false,
+        },
+      ],
+    },
+    // 下拉
+    {
+      label: '下拉',
+      key: '', // 表单项的ID
+      type: 'picker', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '请选择',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      // 依赖的其他表单项：当依赖项满足条件时，才会显示当前项
+      depends: [],
+      options: [
+        {
+          id: generateGid(),
+          content: '选项1',
+          default: true,
+        },
+      ],
+    },
+    // 文字
+    {
+      label: '文字',
+      key: '', // 表单项的ID
+      type: 'text', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      range: {
+        min: '',
+        max: '',
+      },
+      limit: '',
+    },
+    // 单选框
+    {
+      label: '单选项',
+      key: '', // 表单项的ID
+      type: 'radio', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      options: [
+        {
+          id: generateGid(),
+          content: '选项1',
+          default: true,
+        },
+      ],
+    },
+    // 多选框
+    {
+      label: '多选项',
+      key: '', // 表单项的ID
+      type: 'checkbox', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      options: [
+        {
+          id: generateGid(),
+          content: '选项1',
+          default: true,
+        },
+      ],
+    },
+    // 整数
+    {
+      label: '整数',
+      key: '', // 表单项的ID
+      type: 'integer', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      range: {
+        min: '',
+        max: '',
+      },
+    },
+    // 小数
+    {
+      label: '小数',
+      key: '', // 表单项的ID
+      type: 'float', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      range: {
+        min: '',
+        max: '',
+      },
+      digits: 1,
+    },
+  ],
+  // 时间相关
+  timeTypes: [
+    // 时间点
+    {
+      label: '时间点',
+      key: '', // 表单项的ID
+      type: 'instant', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      range: {
+        min: '',
+        max: '',
+      },
+    },
+    // 时间段
+    {
+      label: '时间段',
+      key: '', // 表单项的ID
+      type: 'period', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      range: {
+        min: '',
+        max: '',
+      },
+      limit: '',
+    },
+    // 文件
+    {
+      label: '文件',
+      key: '', // 表单项的ID
+      type: 'file', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      limit: '1',
+      size: '2', // 评分、文件、图片大小
+      accept: '.docx,.xlsx,.pptx,.pdf,.txt', // 文件类型
+      uploadTip: '',
+    },
+    // 图片
+    {
+      label: '图片',
+      key: '', // 表单项的ID
+      type: 'image', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      limit: '1',
+      size: '2', // 评分、文件、图片大小
+      accept: 'image/jpeg,image/png,image/gif', // 文件类型
+      uploadTip: '',
+    },
+    // 手机号
+    {
+      label: '手机号',
+      key: '', // 表单项的ID
+      type: 'phone', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+    },
+    // 密码
+    {
+      label: '密码',
+      key: '', // 表单项的ID
+      type: 'password', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      range: {
+        min: '',
+        max: '',
+      },
+      limit: '',
+    },
+  ],
+  // 其他类型
+  otherTypes: [
+    // 评分
+    {
+      label: '评分',
+      key: '', // 表单项的ID
+      type: 'rate', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      size: 5, // 评分、文件、图片大小
+      options: [
+        {
+          id: '0',
+          content: '0分',
+        },
+        {
+          id: '1',
+          content: '1分',
+        },
+        {
+          id: '2',
+          content: '2分',
+        },
+        {
+          id: '3',
+          content: '3分',
+        },
+        {
+          id: '4',
+          content: '4分',
+        },
+        {
+          id: '5',
+          content: '5分',
+        },
+      ],
+    },
+    // 滑块
+    {
+      label: '滑块',
+      key: '', // 表单项的ID
+      type: 'slider', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+      range: {
+        min: 5,
+        max: 10,
+      },
+    },
+    // 	省市县
+    {
+      label: '省市县',
+      key: '', // 表单项的ID
+      type: 'area', // 表单项类型ID
+      title: '请输入题目名称',
+      subtitle: '',
+      placeholder: '',
+      required: true,
+      emsg: '当前题目答案不能为空', // 必填项未填写时的提示信息
+      weight: false, // 主要信息将予以展示，非主要信息将只会展示在详情中。若不设置，则列表会展示所有项目，不利于查看。
+      depends: [],
+    },
+  ],
+}

package/src/utils/index.js

@@ -0,0 +1,23 @@
+/**
+ * 随机生成6位 id 包含数字、大小写字母
+ * @returns {string}
+ */
+export function randomIdFactory () {
+  return Math.random().toString(36).substr(2, 6)
+}
+
+/**
+ * 生成组id
+ * @returns {string}
+ */
+export function generateGid () {
+  return 'g' + randomIdFactory()
+}
+
+/**
+ * 生成表单项key
+ * @returns {string}
+ */
+export function generateKey () {
+  return 'key' + randomIdFactory()
+}