chooseProduct.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <div class="chooseProductEdit-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="chooseProductEdit-back">
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="chooseProductEdit-back-btn" href="javascript:;" @click="handleBack">
  8. <a-icon type="left" />
  9. 返回列表
  10. </a>
  11. <span style="margin: 0 15px;color: #666;font-weight: bold;">类目名称:{{ detailsData&&detailsData.categoryName }}</span>
  12. </template>
  13. </a-page-header>
  14. <a-card size="small" :bordered="false" class="chooseProductEdit-cont table-page-search-wrapper">
  15. <!-- 主要内容 -->
  16. <main-content ref="mainCon" :itemCategorySn="$route.params.sn"></main-content>
  17. </a-card>
  18. </a-spin>
  19. </div>
  20. </template>
  21. <script>
  22. import { commonMixin } from '@/utils/mixin'
  23. // 组件
  24. import mainContent from '@/views/easyPassManagement/shoppingProducts/list'
  25. // 接口
  26. import { shopCategoryDetail } from '@/api/shopCategory'
  27. export default {
  28. name: 'ChooseProductEdit',
  29. mixins: [commonMixin],
  30. components: { mainContent },
  31. data () {
  32. return {
  33. spinning: false,
  34. detailsData: null, // 类目详情
  35. tableHeight: 0 // 表格高度
  36. }
  37. },
  38. methods: {
  39. // 返回列表并刷新
  40. handleBack () {
  41. this.$router.push({ name: 'shoppingManagementList', query: { closeLastOldTab: true } })
  42. this.$refs.mainCon.closeProductModal()
  43. },
  44. // 获取目录详情
  45. getCategoryDetail () {
  46. this.spinning = true
  47. shopCategoryDetail({ categorySn: this.$route.params.sn }).then(res => {
  48. if (res.status == 200) {
  49. this.detailsData = res.data || {}
  50. }
  51. this.spinning = false
  52. })
  53. }
  54. },
  55. mounted () {
  56. if (!this.$store.state.app.isNewTab) {
  57. // 页签刷新时调用
  58. this.getCategoryDetail()
  59. }
  60. },
  61. activated () {
  62. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  63. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  64. this.getCategoryDetail()
  65. }
  66. },
  67. beforeRouteEnter (to, from, next) {
  68. next(vm => {})
  69. }
  70. }
  71. </script>
  72. <style lang="less">
  73. .chooseProductEdit-wrap {
  74. position: relative;
  75. height: 100%;
  76. box-sizing: border-box;
  77. > .ant-spin-nested-loading {
  78. height: 100%;
  79. }
  80. .chooseProductEdit-cont {
  81. margin-top: 6px;
  82. }
  83. }
  84. </style>