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: 100%"
          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"
        >
          <span slot="type" slot-scope="text, record">
            <a-tag color="cyan" v-if="record.type=='1'">PC端</a-tag>
            <a-tag color="blue" v-if="record.type=='2'">钉钉端</a-tag>
          </span>
          <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: "type",
          scopedSlots: { customRender: "type" }
        },
        {
          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=data;//获取确定的对象
      this.formData.businessTable = data.businessTable; //数据库表明
      this.formData.text = data.text; //表单标题
      this.formData.stepMemo = data.stepMemo; //表单标题
      this.formData.type=data.type//类型
      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.formData.type=res.data.result.type; //表单类型
              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>