yqform-edit 1.0.0

package/src/components/common/content/components/form-item/index.js

@@ -0,0 +1,5 @@
+import FormItem from './form-item.vue'
+
+FormItem.install = (Vue) => {
+  Vue.component(FormItem.name, FormItem)
+}

package/src/components/common/content/components/input-box/input-box.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="input-box" :class="{active:active}">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputBox',
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.input-box {
+  padding: 15px 10px 10px 15px;
+  border-radius: 5px;
+  border: 1px solid rgba(202, 218, 237, 1);
+
+  &.active {
+    border: 1px solid rgba(42, 130, 228, 1);
+  }
+}
+</style>

package/src/components/common/content/content.vue

@@ -0,0 +1,504 @@
+<template>
+  <div>
+    <main class="main" id="form-content">
+      <div class="content-topimg">
+        <div class="header-img" v-if="form && form.spec.theme.header">
+          <van-image width="100%" :src="form.spec.theme.header" />
+        </div>
+        <div class="header" v-if="form">
+          <div class="title">{{ currentPage.spec.title }}</div>
+          <div class="page" v-show="totalPage > 1">
+            ( 第{{ pageIndex + 1 }}{{ unit }}，共{{ totalPage }}{{ unit }} )
+          </div>
+        </div>
+        <div class="sub-header" v-if="form && currentPage.spec.subtitle">
+          {{ currentPage.spec.subtitle }}
+        </div>
+        <div>
+          <draggable
+            class="item-container"
+            style="width: 100%; min-height: 330px"
+            v-model="currentPage.items"
+            group="form"
+            @start="drag = true"
+            @change="draggableChange"
+            @end="drag = false"
+            v-bind="dragOptions">
+            <div class="item" v-for="(item, index) of currentPage.items" :key="item.key">
+              <div :id="item.key">
+                <FormItem
+                  ref="formItem"
+                  :item="item"
+                  :indexTag="getindexTag(index)"
+                  :itemIndex="index"
+                  :editItem="canEdit"
+                  :currentKey="currentKey"
+                  :currentPageIndex="currentPageIndex"
+                  :noAnswer="noAnswer"
+                  :isEdit="isEdit"
+                  :dependValues="dependValues"
+                  :form="form"
+                  @selectItem="selectItem" />
+              </div>
+            </div>
+            <div v-if="!notControl" class="tip" :class="!form.spec.theme.footer ? 'hasBottom' : ''">
+              <div class="plus-icon">
+                <img src="@/assets/images/content/item_plus.png" alt="" />
+              </div>
+              <div class="text">从左侧拖动类型到此，添加问卷题目</div>
+            </div>
+            <div v-else class="tip-shadow"></div>
+          </draggable>
+        </div>
+      </div>
+      <div class="footer-img" v-if="form && form.spec.theme.footer">
+        <van-image width="100%" :src="form.spec.theme.footer" />
+      </div>
+    </main>
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+import FormItem from './components/form-item/form-item.vue'
+export default {
+  name: 'Content',
+  emits: ['onSelect'],
+  components: { FormItem, draggable },
+  props: {
+    pageIndex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    currentKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    // 是否可拖入题目
+    noControl: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // 是否可编辑题目
+    editItem: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    isEdit: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    form: {
+      type: Object,
+      default: function () {
+        return {
+          spec: {
+            name: '',
+            theme: {
+              name: 'show',
+              color: '#07c160',
+              header: '',
+              footer: '',
+            },
+            unit: '页',
+          },
+          groups: [
+            {
+              gid: 'templeteData',
+              spec: {
+                title: '',
+                subtitle: '',
+                unit: '页',
+              },
+              items: [],
+            },
+          ],
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      notControl: false,
+      dragOptions: {
+        handle: '.move',
+        ghostClass: 'ghost',
+        filter: '.tip',
+      },
+      currentPage: {},
+      item: {},
+      totalPage: 1,
+      noAnswer: '',
+      dependValues: [],
+      currentItemKey: '',
+      canEdit: false,
+      currentPageIndex: 0,
+    }
+  },
+  watch: {
+    isEdit: {
+      handler(value) {
+        if (!value) {
+          this.notControl = true
+          this.canEdit = false
+        } else {
+          this.notControl = this.noControl
+          this.canEdit = this.editItem
+        }
+      },
+      immediate: true,
+    },
+    pageIndex: {
+      handler(newIndex) {
+        if (this.form) {
+          this.currentPage = this.form.groups[newIndex]
+        }
+        if (this.currentPageIndex !== newIndex) {
+          this.currentPageIndex = newIndex
+        }
+      },
+      immediate: true,
+    },
+    currentKey: {
+      handler(key) {
+        if (key) {
+          this.currentItemKey = key
+        }
+      },
+      immediate: true,
+    },
+    form: {
+      handler(newForm) {
+        if (newForm) {
+          console.log(newForm.groups[0])
+          this.totalPage = newForm.groups.length
+          this.currentPage = newForm.groups[this.pageIndex]
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  provide() {
+    return {
+      addFile: this.addFile,
+      deleteFile: this.deleteFile,
+    }
+  },
+  computed: {
+    unit() {
+      return this.form?.spec.unit
+    },
+  },
+  methods: {
+    selectItem(key) {
+      this.$emit('onSelect', key)
+      this.currentItemKey = key
+    },
+    draggableChange(data) {
+      if (data.added) {
+        this.$emit('onSelect', data.added.element.key)
+        this.currentItemKey = data.added.element.key
+      }
+    },
+    goPage(index) {
+      this.currentPageIndex = index
+      this.$emit('getPage', index)
+    },
+    // 计算题号
+    getindexTag(index) {
+      if (this.pageIndex === 0) {
+        return index + 1
+      } else {
+        const groups = this.form.groups
+        let count = 0
+        for (let i = 0; i < this.pageIndex; i++) {
+          count += groups[i].items.length
+        }
+        count += index + 1
+        return count
+      }
+    },
+    // 检查输入类题目是否符合要求
+    checkInputText(item, newText, page, index, key) {
+      let min, max
+      // 手机号没有最小最大值配置，需要单独判断
+      if (item.type !== 'phone') {
+        min = item.range.min
+        max = item.range.max
+      }
+      // 优先判断内容是否为空
+      if (newText.length === 0) {
+        if (item.required) {
+          this.goPage(page)
+          this.selectItem(key)
+          this.noAnswerKey = ''
+          setTimeout(() => {
+            this.noAnswerKey = key
+          })
+          this.itemPosition(key)
+          return false
+        } else {
+          // 非必填项对空数据不做判断
+          return true
+        }
+      } else if (item.type === 'text' || item.type === 'password') {
+        const len = newText.length
+        if ((min && len < min * 1) || (max && len > max * 1)) {
+          this.goPage(page)
+          this.selectItem(key)
+          this.itemPosition(key)
+          return false
+        } else {
+          return true
+        }
+      } else if (item.type === 'integer' || item.type === 'float') {
+        if ((min && newText * 1 < min * 1) || (max && newText * 1 > max * 1)) {
+          this.goPage(page)
+          this.selectItem(key)
+          this.itemPosition(key)
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return true
+      }
+    },
+    // 题目不合法时定位到该题目
+    itemPosition(key) {
+      setTimeout(() => {
+        const pageDom = document.getElementById('form-content')
+        const itemDom = document.getElementById(key)
+        const offsetTop = itemDom.offsetTop // 题目上边所在的位置
+        const clientHeight = itemDom.clientHeight // 题目区域的高度
+        if (offsetTop < clientHeight) {
+          pageDom.scrollTo(0, offsetTop - 40)
+        } else if (offsetTop + clientHeight < pageDom.scrollHeight) {
+          pageDom.scrollTo(0, offsetTop)
+        } else {
+          pageDom.scrollTo(0, offsetTop + clientHeight)
+        }
+      }, 50)
+    },
+    // 检查问卷
+    getAnswer() {
+      console.log('this.dependValues', this.dependValues)
+      const answerObj = {}
+      const fileItem = []
+      const imgItem = []
+      // 遍历页面
+      for (let r = 0; r < this.form.groups.length; r++) {
+        let itemArr = this.form.groups[r].items
+        let gid = this.form.groups[r].gid
+        if (itemArr.length > 0) {
+          // 遍历该页题目
+          for (let i = 0; i < itemArr.length; i++) {
+            let hasAnswer = false
+            const key = itemArr[i].key
+            // 遍历答案数组
+            for (let j = 0; j < this.dependValues.length; j++) {
+              let answer = this.dependValues[j]
+              if (gid === answer.gid && itemArr[i].key === answer.key) {
+                // 如果答案中存在对应的页面gid和题号key，则保存该题目的答案
+                hasAnswer = true
+                if (this.showTitleLimit.includes(itemArr[i].type) || itemArr[i].type === 'phone') {
+                  // 如果输入类题目内容不合法则中断提交
+                  if (!this.checkInputText(itemArr[i], answer.value, r, i, key)) {
+                    return
+                  }
+                }
+                if (this.hasOptionTypes.includes(itemArr[i].type)) {
+                  if (itemArr[i].type === 'radio' || itemArr[i].type === 'rate') {
+                    console.log('answer.value', answer)
+                    let option = itemArr[i].options.find((item) => item.id == answer.value)
+                    answerObj[`${answer.key}`] = [{ id: option.id, content: option.content }]
+                  } else if (itemArr[i].type === 'checkbox') {
+                    let key = answer.key
+                    answerObj[`${key}`] = []
+                    answer.value.forEach((item) => {
+                      let option = itemArr[i].options.find((it) => it.id == item)
+                      answerObj[`${key}`].push({ id: option.id, content: option.content })
+                    })
+                  } else if (itemArr[i].type === 'switch') {
+                    let option = itemArr[i].options.find((item) => item.content === answer.value)
+                    answerObj[`${answer.key}`] = [{ id: option.id, content: option.content }]
+                  } else if (itemArr[i].type === 'picker') {
+                    let option = itemArr[i].options.find((item) => item.id === answer.value.id)
+                    answerObj[`${answer.key}`] = [{ id: option.id, content: option.content }]
+                  }
+                } else if (itemArr[i].type === 'area') {
+                  answerObj[`${answer.key}`] = [{ id: answer.value.code, content: answer.value.value }]
+                } else if (itemArr[i].type === 'file') {
+                  const urlArr = []
+                  answer.value.forEach((item) => {
+                    urlArr.push({ url: item.url, name: item.name })
+                  })
+                  fileItem.push(answer)
+                  answerObj[`${answer.key}`] = [{ content: urlArr }]
+                } else if (itemArr[i].type === 'image') {
+                  const urlArr = []
+                  answer.value.forEach((item) => {
+                    urlArr.push({ url: item.url })
+                  })
+                  imgItem.push(answer)
+                  answerObj[`${answer.key}`] = [{ content: urlArr }]
+                } else {
+                  answerObj[`${answer.key}`] = [{ content: answer.value }]
+                }
+              }
+            }
+            // 如果当前题目没有匹配到答案且该题目是必填项
+            if (!hasAnswer && itemArr[i].required) {
+              if (itemArr[i].depends.length > 0) {
+                // 如果该题目没有答案则判断其是否有依赖选项
+                let depends = itemArr[i].depends
+                for (let k = 0; k < depends.length; k++) {
+                  let index = this.dependValues.findIndex(
+                    (item) => item.key === depends[k].item && item.gid === depends[k].group,
+                  )
+                  // 找到所依赖的题目
+                  if (index > -1) {
+                    let hasId = false
+                    let vals = depends[k].vals
+                    // 遍历依赖的选项
+                    for (let h = 0; h < vals.length; h++) {
+                      console.log('this.dependValues[index]', this.dependValues[index].value)
+                      // 判断答案中是否有所依赖的选项
+                      if (typeof this.dependValues[index].value === 'string') {
+                        // 处理单选题
+                        if (this.dependValues[index].value === vals[h].id) {
+                          hasId = true
+                          break
+                        }
+                        // 处理多选题
+                      } else if (this.dependValues[index].value.findIndex((item) => item === vals[h].id) > -1) {
+                        hasId = true
+                        break
+                      }
+                    }
+                    if (hasId) {
+                      this.goPage(r)
+                      this.setCurrentItemKey(key)
+                      this.noAnswer = ''
+                      setTimeout(() => {
+                        this.noAnswer = key
+                      })
+                      this.itemPosition(key)
+                      return
+                    }
+                  }
+                }
+                hasAnswer = true
+              }
+              if (!hasAnswer) {
+                // 用户没有作答该题
+                this.goPage(r)
+                this.setCurrentItemKey(key)
+                // 每次都重置未作答题目的key值（因为两次可能会是同一题，导致第二次不会触发）
+                this.noAnswer = ''
+                // 异步更改key值，否则隔页不会触发key的更改
+                setTimeout(() => {
+                  this.noAnswer = key
+                })
+                this.itemPosition(key)
+                return
+              }
+            }
+          }
+        }
+      }
+      return {
+        files: fileItem,
+        imgs: imgItem,
+        answer: answerObj,
+      }
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.main {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  .content-topimg {
+    padding: 0 12px;
+    box-sizing: border-box;
+    .header {
+      display: flex;
+      justify-content: space-between;
+      flex-shrink: 0;
+      align-items: center;
+      line-height: 20px;
+      margin: 12px 0;
+
+      .title {
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: 0px;
+        word-break: break-all;
+        color: rgba(24, 144, 255, 1);
+      }
+
+      .page {
+        text-align: right;
+        min-width: 40%;
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0px;
+        color: rgba(153, 153, 153, 1);
+      }
+    }
+    .sub-header {
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: 0px;
+      word-break: break-all;
+      color: rgba(153, 153, 153, 1);
+    }
+    .item-container {
+      padding: 5px;
+      box-sizing: border-box;
+    }
+    .tip {
+      height: 98px;
+      margin-top: 10px;
+      justify-content: center;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      line-height: 20px;
+      color: rgba(166, 166, 166, 1);
+      border: 1px dashed rgba(24, 144, 255, 1);
+      .plus-icon {
+        margin-top: 20px;
+        margin-bottom: 5px;
+      }
+    }
+    .tip-shadow {
+      height: 50px;
+    }
+    .hasBottom {
+      margin-bottom: 50px;
+    }
+  }
+  .footer-img {
+    margin-bottom: 50px;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
+</style>

package/src/components/common/content/index.js

@@ -0,0 +1,5 @@
+import FormItem from './form-item.vue'
+
+FormItem.install = (Vue) => {
+  Vue.component(FormItem.name, FormItem)
+}