yqform-edit 1.0.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "yqform-edit",
+  "version": "1.0.0",
+  "private": false,
+  "main": "dist/yqform-edit.umd.min.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib src/index.js"
+  },
+  "dependencies": {
+    "@vant/area-data": "^1.3.2",
+    "@vant/touch-emulator": "^1.4.0",
+    "babel-plugin-component": "^1.1.1",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.11.5",
+    "element-ui": "^2.15.10",
+    "lodash": "^4.17.21",
+    "vant": "^2.12.50",
+    "vue": "^2.6.14",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.17",
+    "@vue/cli-plugin-eslint": "~4.5.17",
+    "@vue/cli-plugin-vuex": "~4.5.17",
+    "@vue/cli-service": "~4.5.17",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.5",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.54.9",
+    "sass-loader": "10.1.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "_id": "questionnaire@0.1.0",
+  "readme": "ERROR: No README data found!"
+}

package/src/App.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="app">
+    <DynamicForm :form="form" ref="dynamicForm" />
+  </div>
+</template>
+
+<script>
+import DynamicForm from '@/components/dynamic-form/dynamic-form.vue'
+
+export default {
+  name: 'E7ingForm',
+  emits: ['handleCoverImg'],
+  components: { DynamicForm },
+  props: {
+    pid: {
+      type: String,
+      required: false,
+    },
+    // 自定义题目的类型数组
+    expendQuestion: {
+      type: Array,
+      required: false,
+    },
+    // 请求下拉框数据的函数
+    remotePicker: {
+      type: Function,
+      required: false,
+    },
+    // 传入的表单
+    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 {
+      formData: {
+        spec: {
+          name: '',
+          theme: {
+            name: 'show',
+            color: '#07c160',
+            header: '',
+            footer: '',
+          },
+          unit: '页',
+        },
+        groups: [
+          {
+            gid: 'templeteData',
+            spec: {
+              title: '',
+              subtitle: '',
+              unit: '页',
+            },
+            items: [],
+          },
+        ],
+      },
+    }
+  },
+  provide() {
+    return {
+      getImgFile: this.emitsImgsFun,
+      pid: this.pid,
+      expendQuestion: this.expendQuestion,
+      remotePicker: this.remotePicker,
+    }
+  },
+  methods: {
+    emitsImgsFun(file, type, handle) {
+      this.$emit('handleCoverImg', file, type, handle)
+    },
+    resetPage() {
+      this.$refs.dynamicForm.resetPage()
+    },
+    goPage(index) {
+      this.$refs.dynamicForm.setPageIndex(index)
+    },
+    clearDepend() {
+      this.$refs.dynamicForm.clearDepend()
+    },
+    setCurrentKey(key) {
+      this.$refs.dynamicForm.setItemIndex(key)
+    },
+  },
+  created() {
+    if (Object.keys(this.form).length == 0) {
+      this.form.spec = this.formData.spec
+      this.form.groups = this.formData.groups
+    }
+  },
+  mounted() {},
+}
+</script>
+<style lang="scss" scoped>
+#app {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+</style>

package/src/assets/global.scss

@@ -0,0 +1,12 @@
+.van-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.van-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+}

package/src/components/common/content/components/form-item/components/Picker.vue

@@ -0,0 +1,144 @@
+<template>
+  <!-- 下拉框 -->
+  <div class="picker-box" v-if="item.type === 'picker'">
+    <div class="picker-text-area" :class="pickerVisible ? 'visible-style' : ''" @click="itemClick">
+      <div class="text">
+        <span class="placeholder" v-if="!textValue">{{ item.placeholder }}</span>
+        <span class="time-text" v-else>{{ textValue }}</span>
+      </div>
+      <div class="icon">
+        <van-icon name="arrow-up" v-if="pickerVisible" />
+        <van-icon name="arrow-down" v-else />
+      </div>
+    </div>
+    <div class="select-area" v-if="pickerVisible">
+      <div
+        class="picker-option"
+        :class="index === item.options.length - 1 ? 'last-option' : ''"
+        v-for="option, index of item.options"
+        :key="option.key"
+        @click="selectPicker(option)"
+      >
+        <div class="content">{{ option.content }}</div>
+        <div class="check">
+          <van-icon name="success" v-if="option.id === pickerSelected.id" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'picker-box',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+  },
+  data() {
+    return {
+      pickerOption: [],
+      textValue: '',
+      // 已选下拉
+      pickerSelected: {},
+      // 下拉
+      pickerVisible: false,
+    }
+  },
+  watch: {
+    item: {
+      handler (newItem) {
+        if (newItem.type === 'picker') {
+          this.pickerOption = []
+          newItem.options.forEach(i => {
+            this.pickerOption.push({
+              text: i.content,
+              value: i.label
+            })
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // 选择下拉
+    selectPicker (option) {
+      this.pickerSelected = option
+      this.textValue = option.content
+      this.pickerVisible = false
+    },
+    // 点击选项时
+    itemClick () {
+      this.pickerVisible = !this.pickerVisible
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.picker-box {
+  .picker-text-area {
+    box-sizing: content-box;
+    height: 25px;
+    line-height: 25px;
+    padding: 10px 16px;
+    border: 1px solid rgba(225, 225, 230, 1);
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+    .text {
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      color: rgba(54, 54, 54, 1);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+      .placeholder {
+        color: rgba(200, 201, 204, 1);
+      }
+    }
+    .icon {
+      color: rgba(150, 151, 153, 1);
+    }
+  }
+  .visible-style {
+    border-bottom: none;
+    border-bottom-left-radius: none;
+    border-bottom-right-radius: none;
+  }
+  .select-area {
+    width: 100%;
+    border: 1px solid rgba(225, 225, 230, 1);
+    border-top: none;
+    overflow: hidden;
+    .picker-option {
+      display: flex;
+      justify-content: space-between;
+      width: 90%;
+      margin: 5px auto;
+      min-height: 25px;
+      line-height: 25px;
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      word-break: break-all;
+      color: rgba(54, 54, 54, 1);
+      border-bottom: 1px solid rgba(225, 225, 230, 1);
+      .check {
+        margin: auto 5px;
+        color: rgba(29, 184, 123, 1);
+      }
+    }
+    .last-option {
+      border-bottom: none;
+    }
+  }
+}
+</style>