design.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div class="webapp">
  3. <basic-container>
  4. <avue-form-design :option="option"
  5. @submit="handleSubmit">
  6. </avue-form-design>
  7. </basic-container>
  8. </div>
  9. </template>
  10. <script>
  11. import {getForm, postForm} from '@/api/gen/gen'
  12. import {validatenull} from "../../util/validate";
  13. export default {
  14. data() {
  15. return {
  16. box: true,
  17. option: {
  18. column: []
  19. }
  20. }
  21. },
  22. created() {
  23. this.getFormInfo()
  24. },
  25. methods: {
  26. handleSubmit(json) {
  27. let params = this.$route.query;
  28. if (validatenull(params)) {
  29. return false
  30. }
  31. let result = JSON.stringify(json)
  32. postForm(result, params.tableName, params.dsId).then(response => {
  33. this.$message.success('生成并保存成功')
  34. })
  35. },
  36. getFormInfo() {
  37. let params = this.$route.query;
  38. if (validatenull(params)) {
  39. return false
  40. }
  41. getForm(params.tableName, params.dsId).then(response => {
  42. if (!validatenull(response.data.data)) {
  43. this.option = JSON.parse(response.data.data)
  44. }
  45. })
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss">
  51. .webapp {
  52. background-color: #fff;
  53. position: relative;
  54. width: 100%;
  55. height: 100%;
  56. .form-designer {
  57. height: 800px;
  58. }
  59. .form-designer .widget-config-container .el-tabs__header {
  60. position: relative;
  61. }
  62. }
  63. </style>