添加导入代码功能

支持 json 数据转表单 json错误处理待开发
dream2023 · Feb 5, 2020 · 1acd55e · 1acd55e
1 parent ada93f6
commit 1acd55e
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 2 deletions.
diff --git a/src/components/app-main/components/main-center.vue b/src/components/app-main/components/main-center.vue
@@ -118,6 +118,7 @@ export default {
     },
     // 新增
     handleAdd(res) {
+      console.log(res)
       this.updateSelectIndex(res.newIndex)
     },
     // 移动开始
@@ -134,6 +135,7 @@ export default {
     },
     // 表单提交
     handleSubmit(data) {
+      console.log(111, this.formDesc)
       return Promise.resolve()
     },
     // 请求成功

diff --git a/src/components/app-main/components/main-header.vue b/src/components/app-main/components/main-header.vue
@@ -7,6 +7,9 @@
     <el-button @click="isShowData = true" icon="el-icon-upload2" type="text"
       >生成数据</el-button
     >
+    <el-button @click="isShowCodePen = true" icon="el-icon-download" type="text"
+      >导入代码</el-button
+    >
     <el-button @click="isShowCode = true" icon="el-icon-tickets" type="text"
       >生成代码</el-button
     >
@@ -42,6 +45,38 @@
       </div>
     </el-dialog>
 
+    <!-- 导入数据弹框 -->
+    <el-dialog
+      :visible.sync="isShowCodePen"
+      append-to-body
+      title="导入数据"
+      v-if="isShowCodePen"
+      width="600px"
+    >
+      <el-dialog
+        width="90%"
+        title="预览表单"
+        :visible.sync="innerDialogShow"
+        append-to-body>
+        <ele-form
+          style="background: #f8f8f8"
+          v-if="innerDialogShow"
+          :form-desc="jsonFormDesc"
+          :formData="{}"
+          :request-fn="handleRequest"
+          @request-success="handleRequestSuccess"
+          v-bind="jsonTempFormAttr"
+        ></ele-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="confirmGen">生成表单</el-button>
+        </div>
+      </el-dialog>
+      <json-editor @input="jsonInput" :value="jsonPenData"></json-editor>
+      <div style="text-align: center;margin-top: 20px">
+        <el-button @click="handleJson" type="primary">导入数据</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 生成代码弹框 -->
     <el-dialog
       :visible.sync="isShowCode"
@@ -82,6 +117,10 @@ export default {
       }
       return formAttr
     },
+    // jsonFormDesc() {
+    //   console.log({ formDesc: this.jsonPenData.formDesc })
+    //   return { formDesc: this.jsonPenData.formDesc }
+    // },
     formDesc() {
       // 以 field 为 key, 转为对象
       const formDesc = _.keyBy(_.cloneDeep(this.list), 'field')
@@ -146,12 +185,21 @@ export default {
       formData: {},
       isShowData: false,
       isShowCode: false,
-      isPreview: false
+      isPreview: false,
+      isShowCodePen: false,
+      innerDialogShow: false,
+      jsonPenData: {},
+      jsonFormDesc: {},
+      jsonTempFormAttr: {}
     }
   },
   methods: {
-    ...mapMutations(['clearList', 'updateFormAttr']),
+    ...mapMutations(['clearList', 'updateFormAttr', 'updateList']),
     // 处理数据
+    jsonInput(json) {
+      this.jsonData = _.cloneDeep(json)
+      this.jsonFormDesc = _.cloneDeep(json).formDesc
+    },
     processData(obj, defaultObj = {}, assistProperty = [], formatterObj = {}) {
       obj = _.cloneDeep(obj)
       for (let key of Reflect.ownKeys(obj)) {
@@ -179,6 +227,43 @@ export default {
       this.clearList()
       this.updateFormAttr(formAttrDefault)
     },
+    // 处理粘贴的json
+    handleJson() {
+      this.jsonTempFormAttr = Object.assign(formAttrDefault, this.jsonData) // 临时预览的 formAttr
+      this.innerDialogShow = true
+    },
+    // 确认生成表单
+    confirmGen() {
+      this.json2Form()
+      this.isShowCodePen = false
+      this.innerDialogShow = false
+    },
+    // 处理json数据，将json 映射到操作面板 （list)
+    json2Form() {
+      // 清空原有list （待优化）
+      this.clearForm()
+      // 1.分离 formAttr （表单配置数据）
+      let formAttr = Object.assign(formAttrDefault, this.jsonData) // 覆盖原有数据
+      this.updateFormAttr(formAttr)
+      // 2.更新 formDesc（组件通用配置数据）
+      let list = Object.entries(this.jsonFormDesc).map(([key, val]) => {
+        // 3.处理 formDesc.attr（组件属性配置数据）
+        if (val.attrs === undefined) {
+          return {
+            attrs: {},
+            field: key,
+            ...val
+          }
+        } else {
+          return {
+            field: key,
+            ...val
+          }
+        }
+      })
+      // 更新 list
+      this.updateList(list)
+    },
     // 复制数据
     handleCopyData() {
       copy(serialize(this.codeData, { space: 2 }))

diff --git a/src/store/index.js b/src/store/index.js
@@ -41,6 +41,10 @@ export default new Vuex.Store({
     // 删除列表项
     deleteItemByIndex (state, index) {
       state.list.splice(index, 1)
+    },
+    // 修改列表
+    updateList (state, newList) {
+      state.list = newList
     }
   },
   plugins: persistedstate()