cd_form_editor_web/packages/KFormDesign/module/selectTbTableInfoModal.vue

<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">
      
          <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-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: "type",
          scopedSlots: { customRender: "type" }
        },
        {
          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>