cd_form_editor_web/packages/KFormDesign/module/queryModal.vue

<template>
  <a-modal
    title="查询"
    :visible="visible"
    @ok="handleImportJson"
    @cancel="handleCancel"
    cancelText="关闭"
    :destroyOnClose="true"
    wrapClassName="code-modal-9136076486841527"
    style="top:20px;"
    width="850px"
  >
    <a-row :gutter="24">
      <a-col :md="4" :sm="24">
        <!-- <div class="copy-btn-box-9136076486841527"> -->
          数据库表名：
          <!-- <a-input placeholder="请输入表名" style="width:20%;" v-model="businessTable" />&nbsp; -->
          
        <!-- </div> -->
      </a-col>
      <a-col :md="18" :sm="24">
        <a-select v-model="businessTable" style="width: 30%" placeholder="请选择数据库表名" allowClear show-search >
            <a-select-option v-for="(item) in tableList"  :key="item.tableName" :value="item.tableName">{{item.tableName}}{{item.tableComment}}</a-select-option>
          </a-select>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="dataSource.length>0">
      <a-col :md="24" :sm="24">
        <a-alert  message="目前该数据库表关联的表单存在多个，请选择其中一个！" type="info" banner/><br>
        <a-table
          bordered
          :data-source="dataSource"
          :columns="columns"
          :rowKey="record=>record.id"
          :pagination="false"
          style="margin-top:5px"
        >
          <template slot="operation" slot-scope="text, record">
            <a href="javascript:;" @click="textClick(record)">确定</a>
          </template>
        </a-table>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
import { getFormByBusinessTable,getTableList } from "../../api/api";
/*
 * author kcz
 * date 2019-11-20
 * description 导入json Modal
 */
export default {
  name: "queryModal",
  data() {
    return {
      tableList:[],
      dataSource:[],
      columns:[
        {
          title: '表单名称',
          dataIndex: 'text',
          scopedSlots: { customRender: 'text' },
        },
        {
          title: '数据库表名',
          dataIndex: 'businessTable',
        },
        {
          title: '表单描述',
          dataIndex: 'stepMemo',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        }
      ],
      visible: false,
      jsonData: {},
      handleSetSelectItem: null,
      text: "", //表单标题
      businessTable: "", //数据库表名称
      formData: {}
    };
  },
  created(){
    //获取数据库表名下拉数据
    getTableList().then(res=>{
      if(res.data.success){
        this.tableList=res.data.result;
      }
    });
  },
  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;
    },
    textClick(data){
      console.log(data)
      //获取json展示的数据
      this.jsonData.list = data.jsonContent.list;
      this.jsonData.config = data.jsonContent.config;
      this.jsonData.config.layout = data.jsonContent.config.layout;
      //当前填写数据存储，用于其他页面获取
      this.formData.businessTable=data.businessTable;//数据库表明
      this.formData.text=data.text;//表单标题
      this.formData.stepMemo=data.stepMemo;//表单标题
      this.handleCancel();
    },
    handleImportJson() {
      // 查询JSON
      try {
        //判断是否填写数据库表明
        if (!this.businessTable) {
          this.$message.error("请输入数据库表明");
          return;
        }
        //调用查询接口
        getFormByBusinessTable(this.businessTable).then(res => {
          if (res.data.success) {
            if(res.data.result.tbTableInfoList!=null&&res.data.result.tbTableInfoList.length>1){
              this.dataSource=res.data.result.tbTableInfoList;
            }else{
              //获取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.formData.stepMemo=res.data.result.stepMemo;//表单备注
              this.businessTable = ""; //清空
              this.dataSource=[];
              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>