表单编辑器

packages/KFormDesign/index.vue

@@ -124,6 +124,8 @@
           <previewModal ref="previewModal" />
           <!-- 查询弹框 -->
           <queryModal ref="queryModal" />
+          <!-- 同表多个表单先择弹框 -->
+          <selectTbTableInfoModal ref="selectTbTableInfoModal"/>
         </section>
         <!-- 中间面板区域 end -->
 
@@ -165,6 +167,7 @@ import kCodeModal from "./module/codeModal";
 import collapseItem from "./module/collapseItem";
 import importJsonModal from "./module/importJsonModal";
 import queryModal from "./module/queryModal";
+import selectTbTableInfoModal from "./module/selectTbTableInfoModal";
 import previewModal from "../KFormPreview/index.vue";
 import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
 
@@ -308,7 +311,8 @@ export default {
     kFormComponentPanel,
     formItemProperties,
     formProperties,
-    queryModal
+    queryModal,
+    selectTbTableInfoModal
   },
   watch: {
     data: {
@@ -601,18 +605,30 @@ export default {
       //有则根据表明查询表单json以及相关数据
       getFormByBusinessTable(this.$route.query.tableName).then(res => {
         if (res.data.success) {
-          //获取Json字符串装json格式
-          const editorJsonData = res.data.result.jsonContent;
-          const jsonData = {};
-          //获取json展示的数据
-          jsonData.list = editorJsonData.list;
-          jsonData.config = editorJsonData.config;
-          jsonData.config.layout = editorJsonData.config.layout;
-          this.data = jsonData;
-          //当前填写数据存储，用于其他页面获取
-          this.formData.businessTable = this.$route.query.tableName; //数据库表明
-          this.formData.text = res.data.result.text; //表单标题
-          // this.$message.success("查询成功");
+
+          if(res.data.result.tbTableInfoList!=null&&res.data.result.tbTableInfoList.length>1){
+            // 打开查询模态框
+            // this.$refs.queryModal.jsonData = this.data;
+            // this.$refs.queryModal.formData = this.formData;
+            // this.$refs.queryModal.previewWidth = this.previewOptions.width;
+            this.$refs.selectTbTableInfoModal.visible = true;
+            this.$refs.selectTbTableInfoModal.dataSource=res.data.result.tbTableInfoList;
+            this.$refs.selectTbTableInfoModal.jsonData = this.data;//表单json
+            this.$refs.selectTbTableInfoModal.formData = this.formData;//表单相关字段数据
+          }else{
+            //获取Json字符串装json格式
+            const editorJsonData = res.data.result.jsonContent;
+            const jsonData = {};
+            //获取json展示的数据
+            jsonData.list = editorJsonData.list;
+            jsonData.config = editorJsonData.config;
+            jsonData.config.layout = editorJsonData.config.layout;
+            this.data = jsonData;
+            //当前填写数据存储，用于其他页面获取
+            this.formData.businessTable = this.$route.query.tableName; //数据库表明
+            this.formData.text = res.data.result.text; //表单标题
+            // this.$message.success("查询成功");
+          }
         } else {
           this.$message.error(res.data.message);
         }

packages/KFormDesign/module/queryModal.vue

@@ -10,14 +10,35 @@
     style="top:20px;"
     width="850px"
   >
-  <div class="copy-btn-box-9136076486841527">
-      数据库表名：
-      <a-input placeholder="请输入表名" style="width:20%;" v-model="businessTable" />&nbsp;
-    </div>
+    <a-row :gutter="24">
+      <a-col :md="24" :sm="24">
+        <!-- <div class="copy-btn-box-9136076486841527"> -->
+          数据库表名：
+          <a-input placeholder="请输入表名" style="width:20%;" v-model="businessTable" />&nbsp;
+        <!-- </div> -->
+      </a-col>
+    </a-row>
+    <a-row :gutter="24">
+      <a-col :md="24" :sm="24">
+        <a-table
+          v-if="dataSource.length>0"
+          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 } from '../../api/api';
+import { getFormByBusinessTable } from "../../api/api";
 /*
  * author kcz
  * date 2019-11-20
@@ -27,12 +48,33 @@ export default {
   name: "queryModal",
   data() {
     return {
+      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:{}
+      text: "", //表单标题
+      businessTable: "", //数据库表名称
+      formData: {}
     };
   },
   methods: {
@@ -50,33 +92,50 @@ export default {
       };
       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){
+        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();
+        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.businessTable = ""; //清空
+              this.dataSource=[];
+              this.handleCancel();
+            }
             this.$message.success("查询成功");
-          }else{
+          } else {
             this.$message.error(res.data.message);
           }
-        })        
+        });
         // const editorJsonData = JSON.parse(this.jsonFormat);
         // this.jsonData.list = editorJsonData.list;
         // this.jsonData.config = editorJsonData.config;

packages/KFormDesign/module/selectTbTableInfoModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-modal
+    title="选择展示"
+    :visible="visible"
+    :destroyOnClose="true"
+    wrapClassName="code-modal-9136076486841527"
+    style="top:20px;"
+    width="850px"
+    :footer="null"
+    @cancel="handleCancel"
+  >
+  <a-alert message="目前该数据库表关联的表单存在多个，请选择其中一个！" type="info" banner/><br>
+    <a-table bordered :data-source="dataSource" :columns="columns" :rowKey='record=>record.id' :pagination="false">
+        <template slot="operation" slot-scope="text, record">
+          <a href="javascript:;" @click="textClick(record)">确定</a>
+        </template>
+    </a-table>
+  </a-modal>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 导入json Modal
+ */
+export default {
+  name: "selectTbTableInfoModal",
+  data() {
+    return {
+      dataSource:[],
+      columns:[
+        {
+          title: '表单名称',
+          dataIndex: 'text',
+          scopedSlots: { customRender: 'text' },
+        },
+        {
+          title: '数据库表名',
+          dataIndex: 'businessTable',
+        },
+        {
+          title: '表单描述',
+          dataIndex: 'stepMemo',
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operation' },
+        }
+      ],
+      visible: false,
+      jsonData: {},
+      text:"",//表单标题
+      businessTable:""//数据库表名称
+      ,formData:{}
+    };
+  },
+  methods: {
+    handleCancel() {
+      this.visible = 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();
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.hint-box {
+  background: #e9e9e9;
+  margin: 0;
+  border-bottom: 2px solid #fff;
+}
+</style>