cd_form_editor_web/packages/KFormDesign/module/selectModal.vue

<template>
  <a-modal
    title="请选择表单关联的数据表"
    :visible="visible"
    @ok="handleImportJson"
    @cancel="handleCancel"
    cancelText="关闭"
    :destroyOnClose="true"
    wrapClassName="code-modal-9136076486841527"
    style="top:20px;"
    width="850px"
  >
  <div class="copy-btn-box-9136076486841527">
      数据库表名：
      <a-input placeholder="请输入表名" style="width:20%;" v-model="businessTable" />&nbsp;
    </div>
  </a-modal>
</template>
<script>
import { getFormByBusinessTable } from '../../api/api';
/*
 * author kcz
 * date 2019-11-20
 * description 导入json Modal
 */
export default {
  name: "selectModal",
  data() {
    return {
      visible: false,
      jsonData: {},
      handleSetSelectItem: null,
      text:"",//表单标题
      businessTable:""//数据库表名称
      ,formData:{}
    };
  },
  methods: {
    handleCancel() {
      this.visible = false;
    },
    beforeUpload(e) {
      // 通过json文件导入
      const _this = this;
      const reader = new FileReader();
      reader.readAsText(e);
      reader.onload = function() {
        _this.jsonFormat = this.result;
        _this.handleImportJson();
      };
      return false;
    },
    handleImportJson() {
      // 查询JSON
      try {
        //判断是否填写数据库表明
        if(!this.businessTable){
          this.$message.error("请输入数据库表明");
          return;
        }
        //调用查询接口
        getFormByBusinessTable(this.businessTable).then(res=>{
          if(res.data.success){
            //获取Json字符串装json格式
            const editorJsonData = res.data.result.jsonContent;
            //获取json展示的数据
            this.jsonData.list = editorJsonData.list;
            this.jsonData.config = editorJsonData.config;
            this.jsonData.config.layout = editorJsonData.config.layout;
            //当前填写数据存储，用于其他页面获取
            this.formData.businessTable=this.businessTable;//数据库表明
             this.formData.text=res.data.result.text;//表单标题
            this.businessTable="";//清空
            this.handleCancel();
            this.$message.success("查询成功");
          }else{
            this.$message.error(res.data.message);
          }
        })        
        // const editorJsonData = JSON.parse(this.jsonFormat);
        // this.jsonData.list = editorJsonData.list;
        // this.jsonData.config = editorJsonData.config;
        // this.jsonData.config.layout = editorJsonData.config.layout;
        // this.handleCancel();
        // // 导入之后，需要清除已选择key
        // this.handleSetSelectItem({ key: "" });

        // this.$message.success("导入成功");
      } catch (error) {
        console.error(error);
        this.$message.error("导入失败，数据格式不对");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.hint-box {
  background: #e9e9e9;
  margin: 0;
  border-bottom: 2px solid #fff;
}
</style>