cd_form_editor_web/packages/PreviewCode/index.vue

<template>
  <div>
    <div class="json-box-9136076486841527">
      <codemirror style="height:100%;" ref="myEditor" :value="editorJson"></codemirror>
    </div>
    <div>

    </div>
    <div class="copy-btn-box-9136076486841527">
      表单名：
      <a-input placeholder="请输入表名" style="width:20%;" v-model="formData.text" />&nbsp;
      数据库表名：
      <!-- <a-input placeholder="请输入表名" style="width:20%;" v-model="formData.businessTable" />&nbsp; -->
      <a-select v-model="formData.businessTable" style="width: 20%" 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-tooltip>
        <template slot="title">
          用来明确表单的使用含义
        </template>
        <a-icon type="question-circle-o" />
      </a-tooltip>：
      <a-input placeholder="请输入表单描述" style="width:20%;" v-model="formData.stepMemo" />&nbsp;
    </div>
    <div class="copy-btn-box-9136076486841527" style="text-align:right">
      <a-divider style="margin: 5px 0;"/>
      <a-button
        @click="handleCopyJson"
        type="primary"
        class="copy-btn"
        data-clipboard-action="copy"
        :data-clipboard-text="editorJson"
      >复制数据</a-button>
      <a-button @click="handleExportJson" type="primary">导出代码</a-button>&nbsp;
      <a-button @click="save" type="primary">保存</a-button>
    </div>
  </div>
</template>
<script>
// 剪切板组件
import Clipboard from "clipboard";
import { codemirror } from "vue-codemirror-lite";
import { getIdcsList, formAdd, getTableList } from "../api/api";
export default {
  name: "PreviewCode",
  props: {
    fileFormat: {
      type: String,
      default: "json"
    },
    editorJson: {
      type: String,
      default: ""
    },
    formData: {
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      visible: false,
      businessTable: "",
      text: "",
      tableList:[]//数据库下拉列表数据
    };
  },
  created(){
    //获取数据库表名下拉数据
    getTableList().then(res=>{
      if(res.data.success){
        this.tableList=res.data.result;
      }
    });
  },
  components: {
    codemirror
  },
  methods: {
    exportData(data, fileName = `demo.${this.fileFormat}`) {
      let content = "data:text/csv;charset=utf-8,";
      content += data;
      var encodedUri = encodeURI(content);
      var actions = document.createElement("a");
      actions.setAttribute("href", encodedUri);
      actions.setAttribute("download", fileName);
      actions.click();
    },
    handleExportJson() {
      // 导出JSON
      getIdcsList();
      console.log(this.editorJson);
      this.exportData(this.editorJson);
    },
    save() {
      const json = JSON.stringify(this.editorJson).toString();
      if (json.indexOf("div") != -1) {
        this.$message.error("保存数据不是json格式");
        return;
      }
      if (!this.formData.businessTable) {
        this.$message.error("请输入数据库表名");
        return;
      }
      if (!this.formData.text) {
        this.$message.error("请输入表单名");
        return;
      }
      if(!this.formData.stepMemo){
        this.$message.error("请输入表单描述");
        return;
      }
      console.log(this.editorJson);
      //定义保存数据格式
      const formData = {
        text: this.formData.text,
        routeName: "自定义$" + this.formData.businessTable,
        businessTable: this.formData.businessTable,
        jsonContent: JSON.parse(this.editorJson),
        stepMemo:this.formData.stepMemo
      };
      console.log(formData);
      //保存接口
      formAdd(formData).then(res => {
        if (res.data.success) {
          this.$message.success("保存成功");
        } else {
          this.$message.errore("保存失败");
        }
      });
    },
    handleCopyJson() {
      // 复制数据
      const clipboard = new Clipboard(".copy-btn");
      clipboard.on("success", () => {
        this.$message.success("复制成功");
      });
      clipboard.on("error", () => {
        this.$message.error("复制失败");
      });
      setTimeout(() => {
        // 销毁实例
        clipboard.destroy();
      }, 122);
    }
  }
};
</script>