d350d695be1385ae13d64a21ab744a5ae7b4cf2a.svn-base 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <j-modal
  3. title="详细信息"
  4. :width="1200"
  5. :visible="visible"
  6. @ok="handleOk"
  7. @cancel="close"
  8. switch-fullscreen
  9. :fullscreen.sync="fullscreen"
  10. >
  11. <transition name="fade">
  12. <div v-if="visible">
  13. <slot name="mainForm" :row="row" :column="column"/>
  14. <slot name="subForm" :row="row" :column="column"/>
  15. </div>
  16. </transition>
  17. </j-modal>
  18. </template>
  19. <script>
  20. import { cloneObject } from '@/utils/util'
  21. export default {
  22. name: 'JVxeDetailsModal',
  23. inject: ['superTrigger'],
  24. data() {
  25. return {
  26. visible: false,
  27. fullscreen: false,
  28. row: null,
  29. column: null,
  30. }
  31. },
  32. created() {
  33. },
  34. methods: {
  35. open(event) {
  36. let {row, column} = event
  37. this.row = cloneObject(row)
  38. this.column = column
  39. this.visible = true
  40. },
  41. close() {
  42. this.visible = false
  43. },
  44. handleOk() {
  45. this.superTrigger('detailsConfirm', {
  46. row: this.row,
  47. column: this.column,
  48. callback: (success) => {
  49. this.visible = !success
  50. },
  51. })
  52. },
  53. },
  54. }
  55. </script>
  56. <style lang="less">
  57. .fade-enter-active,
  58. .fade-leave-active {
  59. opacity: 1;
  60. transition: opacity 0.5s;
  61. }
  62. .fade-enter,
  63. .fade-leave-to {
  64. opacity: 0;
  65. }
  66. </style>