sagaBrandDetail.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <div>
  3. <div class="saga-brand-box mt90 por">
  4. <div class="breadcrumb-content">
  5. <el-breadcrumb separator-class="el-icon-arrow-right">
  6. <el-breadcrumb-item>所有品牌</el-breadcrumb-item>
  7. <el-breadcrumb-item>{{this.$route.query.BrandCname}}:</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. <template v-for="i in system">
  10. <span v-for="classItem in i.DefClass" :key="classItem.Code" v-show="classItem.show" class="select">{{classItem.AliasName}}
  11. <i class="el-icon-close" @click="deleteCurrent(classItem)"></i>
  12. </span>
  13. </template>
  14. <span class="total poa">共<b>{{total}}</b>件相关产品</span>
  15. </div>
  16. <div class="device-sys" v-for="systemItem in system" :key="systemItem.Code">
  17. <div class="left">{{systemItem.AliasName}}:</div>
  18. <div class="main">
  19. <ul>
  20. <li v-for="(group,index) in systemItem.DefClass"
  21. style="cursor: pointer"
  22. :key="group.Code"
  23. v-show="index < limitSys"
  24. @click="currentSys(group)"
  25. :class="group.show ? 'light':''">
  26. {{group.AliasName}}
  27. </li>
  28. </ul>
  29. </div>
  30. <div class="right" @click="allData(systemItem)" :class="systemItem.more? 'dark' :'light'">
  31. <p style="cursor: pointer;">{{systemItem.more?'更多':'收起'}}
  32. <span :class="systemItem.more?'el-icon-caret-bottom':'el-icon-caret-top'"></span>
  33. </p>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="saga-brand-box mt20">
  38. <detailTable :table="table" @deleteProdType="deleteProdType"/>
  39. </div>
  40. </div>
  41. </template>
  42. <script>
  43. import detailTable from "../../public/detailTable";
  44. import {mapGetters} from "vuex"
  45. import {classQueryByBrand, prodTypeDelete, prodTypeQuery} from "@/api/product"
  46. export default {
  47. components: {detailTable},
  48. created() {
  49. this.getDate()
  50. this.getProductList()
  51. },
  52. mounted() {
  53. },
  54. data() {
  55. return {
  56. limitSys: 14,
  57. system: [],
  58. total: 0,
  59. table: [],
  60. defClassList: [],
  61. }
  62. },
  63. computed: {
  64. ...mapGetters('layout', ['dictionary']),
  65. },
  66. methods: {
  67. getDate() {
  68. let param = {
  69. GroupId: this.dictionary.groupId,
  70. Type: this.dictionary.dictionaryType,
  71. ProjectId: this.dictionary.projectId,
  72. BrandID: this.$route.query.BrandID,
  73. Orders: 'name asc, createTime desc'
  74. }
  75. classQueryByBrand(param, res => {
  76. this.system = res.Content ? res.Content.map(j => {
  77. j.more = true
  78. j.DefClass.forEach((k, index) => {
  79. k.show = false
  80. })
  81. return j
  82. }) : []
  83. })
  84. },
  85. getProductList() {
  86. let params = {
  87. GroupId: this.dictionary.groupId,
  88. Type: this.dictionary.dictionaryType,
  89. ProjectId: this.dictionary.projectId,
  90. Filters: `BrandID='${this.$route.query.BrandID}'`
  91. }
  92. prodTypeQuery(params, res => {
  93. this.total = res.Total
  94. this.table = res.Content.map(i => ({...i, Brand: this.$route.query}))
  95. })
  96. },
  97. deleteProdType(val) {
  98. let {Brand, ...params} = val
  99. prodTypeDelete([params], res => {
  100. this.$message.success('删除成功')
  101. this.getProductList()
  102. this.getDate()
  103. })
  104. },
  105. allData(systemItem) {
  106. systemItem.more = systemItem.more?false:true
  107. },
  108. currentSys(group) {
  109. this.defClassList = []
  110. this.system.forEach(item => {
  111. if (item.DefClass) {
  112. this.defClassList = this.defClassList.concat(item.DefClass)
  113. }
  114. })
  115. this.defClassList.forEach(item => {
  116. item.show = item.Code == group.Code?true:false
  117. })
  118. let params = {
  119. GroupId: this.dictionary.groupId,
  120. Type: this.dictionary.dictionaryType,
  121. ProjectId: this.dictionary.projectId,
  122. Filters: `prodCode='${group.Code}';BrandID='${this.$route.query.BrandID}'`
  123. }
  124. prodTypeQuery(params, res => {
  125. this.total = res.Total
  126. this.table = res.Content.map(i => ({...i, Brand: this.$route.query}))
  127. })
  128. },
  129. deleteCurrent(group) {
  130. group.show = false
  131. this.getProductList()
  132. }
  133. }
  134. }
  135. </script>
  136. <style lang="scss" scoped>
  137. .mt90 {
  138. margin-top: 90px;
  139. }
  140. .mt20 {
  141. margin-top: 20px;
  142. }
  143. .por {
  144. position: relative;
  145. }
  146. .poa {
  147. position: absolute;
  148. }
  149. .saga-brand-box {
  150. width: 100%;
  151. padding: 16px;
  152. box-sizing: border-box;
  153. background: rgba(255, 255, 255, 1);
  154. .breadcrumb-content {
  155. display: flex;
  156. border-bottom: 1px solid #EFF0F1;
  157. padding-bottom: 20px;
  158. .total {
  159. text-align: right;
  160. color: #8D9399;
  161. right: 0;
  162. margin-right: 30px;
  163. b {
  164. color: #1F2429;
  165. }
  166. }
  167. .select {
  168. margin-left: 20px;
  169. display: inline-block;
  170. background: #EFF0F1;
  171. padding: 0 10px;
  172. line-height: 22px;
  173. cursor: pointer;
  174. margin-top: -3px;
  175. }
  176. }
  177. .device-sys {
  178. display: flex;
  179. margin-top: 10px;
  180. border-bottom: 1px solid #EFF0F1;
  181. padding-bottom: 10px;
  182. .left {
  183. padding-top: 6px;
  184. color: #8D9399;
  185. width: 120px;
  186. }
  187. .right {
  188. width: 100px;
  189. text-align: center;
  190. padding-top: 6px;
  191. }
  192. .main {
  193. color: #1F2429;
  194. width: 1020px;
  195. ul {
  196. li {
  197. display: inline-block;
  198. line-height: 25px;
  199. max-width: 98px;
  200. /*min-width: 80px;*/
  201. text-align: left;
  202. overflow: hidden;
  203. text-overflow: ellipsis;
  204. white-space: nowrap;
  205. cursor: pointer;
  206. margin-right: 40px;
  207. }
  208. }
  209. }
  210. }
  211. /deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner:first-child {
  212. color: #8D9399
  213. }
  214. .dark {
  215. color: #8D9399
  216. }
  217. .light {
  218. color: #3A8DDE;
  219. }
  220. }
  221. </style>