yqform-edit 1.0.0

package/src/components/dynamic-form/components/component-type.vue

@@ -0,0 +1,588 @@
+<template>
+  <div class="container">
+    <div class="import-btn">
+      <button @click="showModal = true">
+        导入问卷
+        <el-tooltip class="item" effect="dark" placement="right">
+          <template slot="content">
+            <div>导入说明：</div>
+            <div>1、如果当前问卷中已经有题目，则只能为当前页导入题目，不能导入新的页面</div>
+            <div>2、如果当前问卷中没有题目，则可以为其导入题目，也可以导入分好页的问卷</div>
+            <div>3、目前只支持导入输入类题目、单选和多选题目</div>
+            <div>4、不支持直接在弹出框中编写题目</div>
+            <div>导入格式：</div>
+            <div>1、各页面之间、题目之间要用空行做区分；题目和选项都要在新的行中编写</div>
+            <div>2、输入类题目的输入框用“___”来代替</div>
+            <div>3、多选题要在题目后面标注“多选”字样说明</div>
+          </template>
+          <i class="el-icon-warning-outline"></i>
+        </el-tooltip>
+      </button>
+    </div>
+    <div class="title">基本类型</div>
+    <div>
+      <draggable
+        :list="baseTypes"
+        :group="{ name: 'form', pull: 'clone', put: 'false' }"
+        :sort="false"
+        class="content"
+        :clone="handleClone">
+        <div class="content-item" v-for="(item, index) in baseTypes" :key="index" :ref="'item' + (index + 1)">
+          {{ item.label }}
+        </div>
+      </draggable>
+    </div>
+    <div class="title">时间相关</div>
+    <div>
+      <draggable
+        :list="timeTypes"
+        :group="{ name: 'form', pull: 'clone', put: 'false' }"
+        :sort="false"
+        class="content"
+        :clone="handleClone">
+        <div class="content-item" v-for="(item, index) in timeTypes" :key="index" :ref="'item' + (index + 1)">
+          {{ item.label }}
+        </div>
+      </draggable>
+    </div>
+    <div class="title">其它</div>
+    <div>
+      <draggable
+        :list="otherTypes"
+        :group="{ name: 'form', pull: 'clone', put: 'false' }"
+        :sort="false"
+        class="content"
+        :clone="handleClone">
+        <div class="content-item" v-for="(item, index) in otherTypes" :key="index" :ref="'item' + (index + 1)">
+          {{ item.label }}
+        </div>
+      </draggable>
+    </div>
+    <div class="title" v-if="showCustomizeType">自定义类型</div>
+    <div v-if="showCustomizeType">
+      <draggable
+        :list="customizeTypes"
+        :group="{ name: 'form', pull: 'clone', put: 'false' }"
+        :sort="false"
+        class="content"
+        :clone="handleClone">
+        <div class="content-item" v-for="(item, index) in customizeTypes" :key="index" :ref="'item' + (index + 1)">
+          {{ item.label }}
+        </div>
+      </draggable>
+    </div>
+    <div class="float" ref="float"></div>
+    <el-dialog title="导入问卷" :visible.sync="showModal" :close-on-click-modal="false">
+      <div class="dialog-content">
+        <div class="submit-btn" @click="doneCopy">完成</div>
+        <div id="modalTextarea" class="left-copy">
+          <el-input type="textarea" :rows="rowCount" placeholder="请输入内容" v-model="itemContent"> </el-input>
+        </div>
+        <div class="center-border"></div>
+        <div class="right-preview">
+          <ComponentContent
+            :noControl="true"
+            :modalContentHeight="modalContentHeight"
+            :form="singlePageObj"
+            :currentKey="currentKey"
+            @onSelect="selectPreviewItem" />
+        </div>
+        <div class="center-border" v-if="currentKey"></div>
+        <div class="right-options" v-if="currentKey">
+          <ComponentOptions :copyPreview="true" :item="currentCopyItem" :form="form" />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { generateGid, generateKey, randomIdFactory } from '@/utils'
+import draggable from 'vuedraggable'
+import ComponentContent from '@/components/dynamic-form/components/component-content'
+import ComponentOptions from './component-options.vue'
+import _ from 'lodash'
+
+export default {
+  name: 'component-type',
+  components: { draggable, ComponentContent, ComponentOptions },
+  inject: ['expendQuestion'],
+  props: ['currentPageIndex', 'form'],
+  data() {
+    return {
+      list2: [],
+      showCustomizeType: false, // 标记是否展示自定义的题目
+      customizeTypes: [],
+      dragItem: null,
+      moveItem: null,
+      showModal: false,
+      rowCount: 15,
+      modalContentHeight: 0,
+      itemContent: '',
+      singlePageObj: {}, // 不是第一次粘贴时将粘贴的数据保存在该对象中
+      copyDoneClick: false, // 标志是否点击了完成按钮
+      currentCopyItem: {}, // 当前选中粘贴中的项目
+      currentKey: '', // 当前选中的粘贴中的项目key
+      copyPageIndex: 0,
+    }
+  },
+  computed: {
+    ...mapState('e7ingForm', ['baseTypes', 'timeTypes', 'otherTypes']),
+  },
+  watch: {
+    itemContent: {
+      handler(newContent) {
+        if (newContent) {
+          this.getFormWithCopyStr(newContent)
+        }
+      },
+    },
+    showModal(newShowValue) {
+      // 如果在第一次打开弹窗时问卷中已经有题目了，则要重置数据
+      if (newShowValue) {
+        this.copyDoneClick = false
+        this.initModalData()
+        this.currentCopyItem = {}
+        setTimeout(() => {
+          const height = document.getElementById('modalTextarea').offsetHeight
+          this.modalContentHeight = height - 20
+          // 弹窗打开时计算左侧能够展示的行数
+          this.rowCount = Math.ceil(height / 23)
+        })
+      } else {
+        this.currentKey = ''
+      }
+    },
+  },
+  mounted() {
+    if (this.expendQuestion && this.expendQuestion.length > 0) {
+      this.expendQuestion.forEach((q) => {
+        if (q === 'picker') {
+          const pickerObj = {
+            label: '自定义下拉',
+            key: '',
+            type: 'customizePicker',
+            title: '请输入题目名称',
+            subtitle: '',
+            placeholder: '请选择',
+            required: true,
+            emsg: '当前题目答案不能为空',
+            weight: false,
+            depends: [],
+            options: [
+              {
+                id: randomIdFactory(),
+                content: '选项1',
+                default: true,
+              },
+            ],
+          }
+          this.customizeTypes.push(pickerObj)
+          this.showCustomizeType = true
+        }
+      })
+    }
+  },
+  methods: {
+    // 判断是否需要重置数据
+    isInitData() {
+      if (
+        this.form.groups.length > 1 ||
+        (this.form.groups.length === 1 && this.form.groups[0].gid !== 'templeteData')
+      ) {
+        this.initModalData()
+      }
+    },
+    // 判断弹窗当前页面是否有数据
+    hasDialogObj() {},
+    // 初始化弹窗中的数据
+    initModalData() {
+      const tempForm = {
+        spec: {
+          name: '',
+          theme: {
+            name: 'show',
+            color: '#07c160',
+            header: '',
+            footer: '',
+          },
+          unit: '页',
+        },
+        groups: [
+          {
+            gid: 'fjkdslafjsda',
+            spec: {
+              title: '',
+              subtitle: '',
+              unit: '页',
+            },
+            items: [],
+          },
+        ],
+      }
+      this.singlePageObj = tempForm
+      this.itemContent = ''
+      this.aleadyCopy = true
+    },
+    /** 剔除label属性，添加key */
+    handleClone(cloneData) {
+      const data = _.omit(_.cloneDeep(cloneData), ['label'])
+      this.$set(data, 'key', generateKey())
+      return data
+    },
+    down(item, index) {
+      let div = this.$refs['item' + (index + 1)][0]
+      let float = this.$refs.float
+      console.log(this.$refs, item, index)
+      console.log(float, div)
+      float.innerHTML = item.label
+      float.style.display = 'block'
+      document.onmousemove = (e) => {
+        float.style.left = e.pageX - 54 + 'px'
+        float.style.top = e.pageY - 16 + 'px'
+        // console.log(e.offsetX,e.offsetY,float.style.left)
+      }
+      document.onmouseup = () => {
+        float.innerHTML = ''
+        float.style.display = 'none'
+      }
+    },
+    // 判断一行文字是否是分组标题
+    isPartTitle(line) {
+      let tag = false
+      const reg = /^第[\u4e00-\u9fa5]{1}(部分|阶段|组|页)/g
+      if (reg.test(line)) {
+        tag = true
+      }
+      return tag
+    },
+    // 判断解析出的第一部分是否是项目题目
+    isProjectTitle(partArr) {
+      let isTitle = false
+      if (partArr.length <= 3) {
+        /* 如果第一行不为空并且第一行不是分组标题并且不是输入类题目
+        那么久有理由认为这是标题数组 */
+        if (
+          partArr[0] &&
+          !this.isPartTitle(partArr[0]) &&
+          (!partArr[1].includes('————') || !partArr[1].includes('___'))
+        ) {
+          isTitle = true
+        }
+      }
+      return isTitle
+    },
+    // 由题目数组得到题目对象
+    getFormatItemData(questionArray) {
+      if (questionArray.length === 2 && (questionArray[1].includes('————') || questionArray[1].includes('___'))) {
+        // 判断是否是输入框题目
+        const inputObj = this.handleClone(this.baseTypes.find((item) => item.type === 'text'))
+        const inputTitle = questionArray[0]
+        const itemIndexStr = inputTitle.match(/^\d+(.|、| ){0,1}/)
+        if (itemIndexStr) {
+          // 如果自己写了标号，则将其去掉
+          inputObj.title = inputTitle.split(itemIndexStr[0])[1]
+        } else {
+          inputObj.title = inputTitle
+        }
+        return inputObj
+      } else if (questionArray[0].includes('多选')) {
+        // 判断是否是多选题
+        return this.getRadioOrCheckboxObj('checkbox', questionArray)
+      } else {
+        return this.getRadioOrCheckboxObj('radio', questionArray)
+      }
+    },
+    // 获取单选或多选题对象
+    getRadioOrCheckboxObj(type, questionArray) {
+      const checkBoxObj = this.handleClone(this.baseTypes.find((item) => item.type === type))
+      checkBoxObj.options.pop()
+      questionArray.forEach((item, index) => {
+        if (index === 0) {
+          // 匹配问题前面的标号
+          const itemIndexStr = item.match(/^\d+(.|、| ){0,1}/)
+          if (itemIndexStr) {
+            // 如果自己写了标号，则将其去掉
+            checkBoxObj.title = item.split(itemIndexStr[0])[1]
+          } else {
+            checkBoxObj.title = item
+          }
+        } else {
+          const itemObj = {
+            id: randomIdFactory(),
+            content: item,
+            default: true,
+          }
+          checkBoxObj.options.push(itemObj)
+        }
+      })
+      return checkBoxObj
+    },
+    // 将粘贴的字符串解析为表单的数据结构
+    getFormWithCopyStr(formStr) {
+      const form = {
+        spec: {
+          name: '', // 问卷名
+          theme: {
+            name: 'show',
+            color: '#07c160',
+            header: '',
+            footer: '',
+          },
+          unit: '',
+        },
+        groups: [],
+      }
+      const everyLineArr = formStr.split('\n')
+      // 分离出每个部分
+      const partArr = []
+      let start = 0
+      let end = 0
+      everyLineArr.forEach((item, index) => {
+        if (this.isPartTitle(item)) {
+          end = index
+          partArr.push(everyLineArr.slice(start, end))
+          start = end
+        }
+      })
+      if (end + 1 < everyLineArr.length) {
+        partArr.push(everyLineArr.slice(end))
+      }
+      // 如果最开始的部分为空行则删除掉
+      if (partArr[0].length === 0) {
+        partArr.shift()
+      }
+      // 如果识别出第一部分为项目标题，则删除掉
+      if (this.isProjectTitle(partArr[0])) {
+        partArr.shift()
+      }
+      // 分离出每一个题目
+      partArr.forEach((item1) => {
+        // 过滤掉可能为空的部分
+        if (item1.length > 0) {
+          let isTitle = false
+          const partObj = {
+            gid: generateGid(),
+            spec: {
+              title: '',
+              subtitle: '',
+              unit: '',
+            },
+            items: [],
+          }
+          const sliceIndex = [0, 0] // 一个题目前后空行的index值
+          item1.forEach((item2, index2) => {
+            // 判断每一部分的第一行是否是部分名称
+            if (index2 === 0 && this.isPartTitle(item2)) {
+              const unitStr = item2.match(/^第[\u4e00-\u9fa5]{1}(部分|阶段|组|页)(:|：| ){0,1}/g)
+              if (unitStr.length > 0) {
+                const unit = unitStr[0].match(/部分|阶段|组|页/g)
+                partObj.spec.title = item2.split(unitStr[0])[1]
+                partObj.spec.unit = unit[0]
+                form.spec.unit = unit[0]
+              }
+            } else if (item2 === '') {
+              sliceIndex.shift()
+              sliceIndex.push(index2 + 1)
+              // 截取出一个题目，用数组保存
+              const questionArray = item1.slice(sliceIndex[0], sliceIndex[1] - 1)
+              /* 忽略多个换行导致的空数组问题(所以要大于0)
+              忽略项目标题所占的数组（所以要大于1）
+              题目的标题不能是是分页标题 */
+              if (questionArray.length > 1 && !this.isPartTitle(questionArray[0])) {
+                const itemObj = this.getFormatItemData(questionArray)
+                partObj.items.push(itemObj)
+              }
+            }
+          })
+          if (sliceIndex[1] < item1.length) {
+            const itemObj = this.getFormatItemData(item1.slice(sliceIndex[1]))
+            partObj.items.push(itemObj)
+          }
+          if (!partObj.spec.unit) {
+            partObj.spec.unit = '页'
+          }
+          if (isTitle) {
+            form.spec.name = item1.join(' ').trim()
+          } else {
+            form.groups.push(partObj)
+          }
+        }
+      })
+      if (this.aleadyCopy) {
+        // 如果粘贴过题目，则只有一页数据，将该页数据传递给展示组件
+        this.singlePageObj = form
+        console.log('this.singlePageObj', this.singlePageObj)
+        this.currentCopyItem = form.groups[this.copyPageIndex].items[0]
+        this.currentKey = this.currentCopyItem.key
+      } else {
+        // 如果没有粘贴过题目，则更新整个表单项数据
+        console.log('[ form ] >', form)
+      }
+    },
+    // 粘贴完成的回调
+    doneCopy() {
+      this.showModal = false
+      this.copyDoneClick = true
+      if (this.aleadyCopy) {
+        let page = this.singlePageObj.groups[this.copyPageIndex]
+        // 如果已经粘贴过，则将这次粘贴的一页题目添加到问卷的当前页中
+        if (page.items && page.items.length > 0) {
+          page.items.forEach((item) => {
+            this.addItemsToCurrentPage(item)
+          })
+        }
+      }
+    },
+    // 选择弹框中的项目
+    selectPreviewItem(key) {
+      console.log('key', key)
+      this.currentCopyItem = this.singlePageObj.groups[0].items.find((item) => item.key === key)
+      this.currentKey = key
+    },
+    addItemsToCurrentPage(item) {
+      this.form.groups[this.currentPageIndex].items.push(item)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+::-webkit-scrollbar {
+  width: 0;
+}
+.container {
+  width: 100%;
+  .import-btn {
+    margin-bottom: 10px;
+    button {
+      height: 30px;
+      width: 100px;
+      border: none;
+      color: white;
+      background: rgb(20, 157, 248);
+    }
+  }
+  .title {
+    text-align: left;
+    font-size: 18.08px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    color: rgba(128, 128, 128, 1);
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(159, 237, 232, 1);
+  }
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-top: 3px;
+    margin-bottom: 20px;
+
+    .content-item {
+      width: 108px;
+      height: 35px;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      color: rgba(56, 56, 56, 1);
+      line-height: 35px;
+      border: 1px solid rgba(166, 166, 166, 1);
+      margin-top: 13px;
+      cursor: move;
+    }
+  }
+
+  .float {
+    display: none;
+    width: 108px;
+    height: 35px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    color: rgba(56, 56, 56, 1);
+    line-height: 35px;
+    border: 1px solid rgba(166, 166, 166, 1);
+    margin-top: 13px;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .demo {
+    position: relative;
+
+    .demo-item {
+      position: absolute;
+      width: 108px;
+      height: 35px;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      color: rgba(56, 56, 56, 1);
+      line-height: 35px;
+      border: 1px solid rgba(166, 166, 166, 1);
+    }
+  }
+  :deep(.el-dialog) {
+    width: 70%;
+    height: 60%;
+  }
+  :deep(.el-dialog__wrapper) {
+    overflow: hidden;
+  }
+  :deep(.el-dialog__body) {
+    height: calc(100% - 60px);
+    padding: 5px 20px 0 20px;
+    .dialog-content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      .submit-btn {
+        position: absolute;
+        width: 60px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        top: -45px;
+        right: 50px;
+        z-index: 999;
+        color: white;
+        background: rgb(20, 157, 248);
+        cursor: pointer;
+      }
+      .left-copy {
+        // width: 33%;
+        flex: 1;
+        height: 100%;
+        // padding-right: 10px;
+      }
+      .center-border {
+        height: 97%;
+        width: 10px;
+        border: 1px dotted black;
+        background: rgb(238, 229, 229);
+        margin: 0 10px;
+      }
+      .right-preview {
+        // width: 34%;
+        flex: 1;
+        height: 760px;
+        overflow: auto;
+        // margin-left: 10px;
+      }
+      .right-options {
+        // width: 33%;
+        flex: 1;
+        height: 100%;
+        overflow-y: scroll;
+      }
+    }
+  }
+}
+</style>

package/src/components/dynamic-form/dynamic-form.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="dynamic-form-container">
+    <ComponentType :currentPageIndex="currentPageIndex" :form="form" />
+    <ComponentContent
+      :currentKey="currentItemKey"
+      :currentPageIndex="currentPageIndex"
+      :form="form"
+      @onSelect="setItemIndex" />
+    <ComponentOptions
+      :item="currentItem"
+      :currentItemKey="currentItemKey"
+      :currentPageIndex="currentPageIndex"
+      :form="form" />
+  </div>
+</template>
+
+<script>
+import ComponentType from '@/components/dynamic-form/components/component-type'
+import ComponentContent from '@/components/dynamic-form/components/component-content'
+import ComponentOptions from '@/components/dynamic-form/components/component-options'
+
+export default {
+  name: 'DynamicForm',
+  components: { ComponentOptions, ComponentContent, ComponentType },
+  data() {
+    return {
+      currentPageIndex: 0,
+      currentItemKey: '',
+      currentPage: {
+        gid: 'templeteData',
+        spec: {
+          title: '',
+          subtitle: '',
+          unit: '页',
+        },
+        items: [],
+      },
+      currentItem: {},
+      currentSpec: {},
+      dependValues: [],
+      movePage: 0,
+    }
+  },
+  props: {
+    form: {
+      type: Object,
+      required: false,
+    },
+  },
+  provide() {
+    return {
+      form: this.form,
+      currentItem: () => this.currentItem,
+      setPageIndex: this.setPageIndex,
+      currentFormSpec: this.currentFormSpec,
+      currentSpec: this.currentSpec,
+      dependValues: this.dependValues,
+    }
+  },
+  computed: {
+    currentFormSpec() {
+      return this.form.spec
+    },
+  },
+  watch: {
+    currentItemKey: {
+      handler(key) {
+        this.currentItem = this.form.groups[this.currentPageIndex].items.find((item) => item.key === key)
+      },
+      immediate: true,
+    },
+    currentPageIndex: {
+      handler(index) {
+        this.currentItem = this.form.groups[index].items.find((item) => item.key === this.currentItemKey)
+        this.currentSpec = this.form.groups[index].spec
+      },
+    },
+    form: {
+      handler() {
+        // console.log('[ newForm ] >', JSON.stringify(newForm))
+        // this.totalPage = newForm.groups.length
+        this.currentItem = this.form.groups[this.currentPageIndex].items.find(
+          (item) => item.key === this.currentItemKey,
+        )
+      },
+      deep: true,
+    },
+    dependValues: {
+      handler(newValues) {
+        console.log('[ newValues ] >', newValues)
+      },
+    },
+  },
+  methods: {
+    setItemIndex(index) {
+      this.currentItemKey = index
+    },
+    setPageIndex(index) {
+      this.currentPageIndex = index
+    },
+    resetPage() {
+      this.currentPageIndex = 0
+      this.currentItemKey = ''
+    },
+    clearDepend() {
+      this.dependValues = []
+    },
+  },
+  mounted() {},
+}
+</script>
+
+<style scoped lang="scss">
+.dynamic-form-container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 22% 32% 22%;
+  gap: 12%;
+}
+</style>