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>
    <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="表单名">
            <a-input v-model="formData.text" placeholder="请输入表名" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="数据库表名">
            <a-select
              v-model="formData.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-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item>
            <span slot="label">
              表单描述&nbsp;
              <a-tooltip>
                <template slot="title">用来明确表单的使用含义</template>
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </span>

            <a-input placeholder="请输入表单描述" v-model="formData.stepMemo" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="表单类型">
            <a-radio-group v-model="formData.type" :disabled="disabled">
              <a-radio value="1">PC端</a-radio>
              <a-radio value="2">钉钉端</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- <div style="padding-top: 8px">
      表单名：
      <a-input placeholder="请输入表名" style="width:20%;" v-model="formData.text" />&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: [], //数据库下拉列表数据
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      disabled:false
    };
  },
  created() {
    this.initial();
    //获取数据库表名下拉数据
    getTableList().then(res => {
      if (res.data.success) {
        this.tableList = res.data.result;
      }
    });
  },
  components: {
    codemirror
  },
  methods: {
    initial(){
      //判断是否修改进入，修改进入则禁用修改表单类型
      if(this.formData.text){
        this.disabled=true;
      }else{
        this.formData.type='1'//默认表单类型为PC端
      }
    }
    ,
    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;
      }
      if(!this.formData.type){
        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,
        type: this.formData.type
      };
      console.log(formData);
      //保存接口
      formAdd(formData).then(res => {
        if (res.data.success) {
          this.$message.config({top: '600px'})
          this.$message.success("保存成功");
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    handleCopyJson() {
      // 复制数据
      const clipboard = new Clipboard(".copy-btn");
      clipboard.on("success", () => {
        this.$message.success("复制成功");
      });
      clipboard.on("error", () => {
        this.$message.error("复制失败");
      });
      setTimeout(() => {
        // 销毁实例
        clipboard.destroy();
      }, 122);
    }
  }
};
</script>