index.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <div id="index">
  3. <el-row>
  4. <el-col :span="24" class="main">
  5. <list-frame
  6. v-if="onShow == '1'"
  7. @toAdd="toAdd"
  8. @toEdit="toEdit"
  9. ></list-frame>
  10. <form-frame
  11. v-else-if="onShow == '2'"
  12. @toBack="toBack"
  13. :id="id"
  14. ></form-frame>
  15. </el-col>
  16. </el-row>
  17. </div>
  18. </template>
  19. <script>
  20. import listFrame from "./list-frame.vue";
  21. import formFrame from "./form-frame.vue";
  22. import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
  23. export default {
  24. name: "index",
  25. props: {},
  26. components: {
  27. listFrame,
  28. formFrame,
  29. },
  30. data: function () {
  31. return {
  32. // 显示
  33. onShow: "1",
  34. id: "",
  35. };
  36. },
  37. async created() {},
  38. methods: {
  39. // 新增
  40. toAdd() {
  41. this.$set(this, `onShow`, "2");
  42. },
  43. // 修改
  44. toEdit(data) {
  45. this.$set(this, `id`, data._id);
  46. this.$set(this, `onShow`, "2");
  47. },
  48. // 返回
  49. toBack() {
  50. this.$set(this, `onShow`, "1");
  51. },
  52. },
  53. computed: {
  54. ...mapGetters(["user_id"]),
  55. },
  56. metaInfo() {
  57. return { title: this.$route.meta.title };
  58. },
  59. watch: {
  60. test: {
  61. deep: true,
  62. immediate: true,
  63. handler(val) {},
  64. },
  65. },
  66. };
  67. </script>
  68. <style lang="less" scoped>
  69. .main {
  70. padding: 25px 30px 30px;
  71. }
  72. </style>