调整

packages/KFormDesign/index.vue

@@ -394,7 +394,7 @@ export default {
     handleOpenJsonModal() {
       // 打开json预览模态框
       this.$refs.jsonModal.jsonData = this.data;
-      this.$refs.jsonModal.formData = this.formData;
+      this.$refs.jsonModal.formData =JSON.parse(JSON.stringify(this.formData));
       this.$refs.jsonModal.visible = true;
     },
     handleOpenCodeModal() {

packages/KFormDesign/module/queryModal.vue

@@ -13,20 +13,31 @@
     <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; -->
-          
+        数据库表名：
+        <!-- <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-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-alert message="目前该数据库表关联的表单存在多个，请选择其中一个！" type="info" banner />
+        <br />
         <a-table
           bordered
           :data-source="dataSource"
@@ -35,6 +46,10 @@
           :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>
@@ -44,7 +59,7 @@
   </a-modal>
 </template>
 <script>
-import { getFormByBusinessTable,getTableList } from "../../api/api";
+import { getFormByBusinessTable, getTableList } from "../../api/api";
 /*
  * author kcz
  * date 2019-11-20
@@ -54,26 +69,31 @@ export default {
   name: "queryModal",
   data() {
     return {
-      tableList:[],
-      dataSource:[],
-      columns:[
+      tableList: [],
+      dataSource: [],
+      columns: [
+        {
+          title: "表单名称",
+          dataIndex: "text",
+          scopedSlots: { customRender: "text" }
+        },
         {
-          title: '表单名称',
-          dataIndex: 'text',
-          scopedSlots: { customRender: 'text' },
+          title: "数据库表名",
+          dataIndex: "businessTable"
         },
         {
-          title: '数据库表名',
-          dataIndex: 'businessTable',
+          title: "表单描述",
+          dataIndex: "stepMemo"
         },
         {
-          title: '表单描述',
-          dataIndex: 'stepMemo',
+          title: "表单类型",
+          dataIndex: "type",
+          scopedSlots: { customRender: "type" }
         },
         {
-          title: '操作',
-          dataIndex: 'operation',
-          scopedSlots: { customRender: 'operation' },
+          title: "操作",
+          dataIndex: "operation",
+          scopedSlots: { customRender: "operation" }
         }
       ],
       visible: false,
@@ -84,11 +104,11 @@ export default {
       formData: {}
     };
   },
-  created(){
+  created() {
     //获取数据库表名下拉数据
-    getTableList().then(res=>{
-      if(res.data.success){
-        this.tableList=res.data.result;
+    getTableList().then(res => {
+      if (res.data.success) {
+        this.tableList = res.data.result;
       }
     });
   },
@@ -107,16 +127,18 @@ export default {
       };
       return false;
     },
-    textClick(data){
-      console.log(data)
+    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.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() {
@@ -130,9 +152,12 @@ export default {
         //调用查询接口
         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{
+            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展示的数据
@@ -142,9 +167,10 @@ export default {
               //当前填写数据存储，用于其他页面获取
               this.formData.businessTable = this.businessTable; //数据库表明
               this.formData.text = res.data.result.text; //表单标题
-               this.formData.stepMemo=res.data.result.stepMemo;//表单备注
+              this.formData.stepMemo = res.data.result.stepMemo; //表单备注
+              this.formData.type=res.data.result.type; //表单类型
               this.businessTable = ""; //清空
-              this.dataSource=[];
+              this.dataSource = [];
               this.handleCancel();
             }
             this.$message.success("查询成功");

packages/PreviewCode/index.vue

@@ -3,28 +3,81 @@
     <div class="json-box-9136076486841527">
       <codemirror style="height:100%;" ref="myEditor" :value="editorJson"></codemirror>
     </div>
-    <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>
 
-    </div>
-    <div class="copy-btn-box-9136076486841527">
+            <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-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-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>
+        <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> -->
     <div class="copy-btn-box-9136076486841527" style="text-align:right">
-      <a-divider style="margin: 5px 0;"/>
+      <a-divider style="margin: 5px 0;" />
       <a-button
         @click="handleCopyJson"
         type="primary"
@@ -64,14 +117,18 @@ export default {
       visible: false,
       businessTable: "",
       text: "",
-      tableList:[]//数据库下拉列表数据
+      tableList: [], //数据库下拉列表数据
+      labelCol: { span: 8 },
+      wrapperCol: { span: 16 },
+      disabled:false
     };
   },
-  created(){
+  created() {
+    this.initial();
     //获取数据库表名下拉数据
-    getTableList().then(res=>{
-      if(res.data.success){
-        this.tableList=res.data.result;
+    getTableList().then(res => {
+      if (res.data.success) {
+        this.tableList = res.data.result;
       }
     });
   },
@@ -79,6 +136,15 @@ export default {
     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;
@@ -108,10 +174,14 @@ export default {
         this.$message.error("请输入表单名");
         return;
       }
-      if(!this.formData.stepMemo){
+      if (!this.formData.stepMemo) {
         this.$message.error("请输入表单描述");
         return;
       }
+      if(!this.formData.type){
+        this.$message.error("请选择表单类型");
+        return;
+      }
       console.log(this.editorJson);
       //定义保存数据格式
       const formData = {
@@ -119,7 +189,8 @@ export default {
         routeName: "自定义$" + this.formData.businessTable,
         businessTable: this.formData.businessTable,
         jsonContent: JSON.parse(this.editorJson),
-        stepMemo:this.formData.stepMemo
+        stepMemo: this.formData.stepMemo,
+        type: this.formData.type
       };
       console.log(formData);
       //保存接口
@@ -127,7 +198,7 @@ export default {
         if (res.data.success) {
           this.$message.success("保存成功");
         } else {
-          this.$message.errore("保存失败");
+          this.$message.error("保存失败");
         }
       });
     },