selectTbTableInfoModal.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <a-modal
  3. title="选择展示"
  4. :visible="visible"
  5. :destroyOnClose="true"
  6. wrapClassName="code-modal-9136076486841527"
  7. style="top:20px;"
  8. width="850px"
  9. :footer="null"
  10. @cancel="handleCancel"
  11. >
  12. <a-alert message="目前该数据库表关联的表单存在多个,请选择其中一个!" type="info" banner/><br>
  13. <a-table bordered :data-source="dataSource" :columns="columns" :rowKey='record=>record.id' :pagination="false">
  14. <template slot="operation" slot-scope="text, record">
  15. <a href="javascript:;" @click="textClick(record)">确定</a>
  16. </template>
  17. </a-table>
  18. </a-modal>
  19. </template>
  20. <script>
  21. /*
  22. * author kcz
  23. * date 2019-11-20
  24. * description 导入json Modal
  25. */
  26. export default {
  27. name: "selectTbTableInfoModal",
  28. data() {
  29. return {
  30. dataSource:[],
  31. columns:[
  32. {
  33. title: '表单名称',
  34. dataIndex: 'text',
  35. scopedSlots: { customRender: 'text' },
  36. },
  37. {
  38. title: '数据库表名',
  39. dataIndex: 'businessTable',
  40. },
  41. {
  42. title: '表单描述',
  43. dataIndex: 'stepMemo',
  44. },
  45. {
  46. title: '操作',
  47. dataIndex: 'operation',
  48. scopedSlots: { customRender: 'operation' },
  49. }
  50. ],
  51. visible: false,
  52. jsonData: {},
  53. text:"",//表单标题
  54. businessTable:""//数据库表名称
  55. ,formData:{}
  56. };
  57. },
  58. methods: {
  59. handleCancel() {
  60. this.visible = false;
  61. },
  62. textClick(data){
  63. console.log(data)
  64. //获取json展示的数据
  65. this.jsonData.list = data.jsonContent.list;
  66. this.jsonData.config = data.jsonContent.config;
  67. this.jsonData.config.layout = data.jsonContent.config.layout;
  68. //当前填写数据存储,用于其他页面获取
  69. this.formData.businessTable=data.businessTable;//数据库表明
  70. this.formData.text=data.text;//表单标题
  71. this.formData.stepMemo=data.stepMemo;//表单标题
  72. this.handleCancel();
  73. }
  74. }
  75. };
  76. </script>
  77. <style lang="less" scoped>
  78. .hint-box {
  79. background: #e9e9e9;
  80. margin: 0;
  81. border-bottom: 2px solid #fff;
  82. }
  83. </style>