sagaBrandDetail.vue 6.6 KB

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