sagaBrandDetail.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  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. this.$emit('systemCode', def[k].Code)
  127. }
  128. }
  129. }
  130. let params = {
  131. GroupId: this.dictionary.groupId,
  132. Type: this.dictionary.dictionaryType,
  133. ProjectId: this.dictionary.projectId,
  134. Filters: `prodCode='${val.Code}';BrandID='${this.$route.query.BrandID}'`
  135. }
  136. prodTypeQuery(params, res => {
  137. this.total = res.Total
  138. this.table = res.Content.map(i => ({...i, Brand: this.$route.query}))
  139. })
  140. },
  141. deleteCurrent(index) {
  142. for (let i = 0; i < this.system.length; i++) {
  143. for (let j = 0; j < this.system[i].length; j++) {
  144. let def = this.system[i][j].DefClass
  145. for (let k = 0; k < def.length; k++) {
  146. def[k].show = k == index ? false : true
  147. }
  148. }
  149. }
  150. this.getProductList()
  151. }
  152. }
  153. }
  154. </script>
  155. <style lang="scss" scoped>
  156. .mt90 {
  157. margin-top: 90px;
  158. }
  159. .mt20 {
  160. margin-top: 20px;
  161. }
  162. .por {
  163. position: relative;
  164. }
  165. .poa {
  166. position: absolute;
  167. }
  168. .saga-brand-box {
  169. width: 100%;
  170. padding: 16px;
  171. box-sizing: border-box;
  172. background: rgba(255, 255, 255, 1);
  173. .breadcrumb-content {
  174. display: flex;
  175. border-bottom: 1px solid #EFF0F1;
  176. padding-bottom: 20px;
  177. .total {
  178. text-align: right;
  179. color: #8D9399;
  180. right: 0;
  181. margin-right: 30px;
  182. b {
  183. color: #1F2429;
  184. }
  185. }
  186. .select {
  187. margin-left: 20px;
  188. display: inline-block;
  189. background: #EFF0F1;
  190. padding: 0 10px;
  191. line-height: 22px;
  192. cursor: pointer;
  193. margin-top: -3px;
  194. }
  195. }
  196. .device-sys {
  197. display: flex;
  198. margin-top: 10px;
  199. border-bottom: 1px solid #EFF0F1;
  200. padding-bottom: 10px;
  201. .left {
  202. padding-top: 6px;
  203. color: #8D9399;
  204. width: 120px;
  205. }
  206. .right {
  207. width: 100px;
  208. text-align: center;
  209. padding-top: 6px;
  210. }
  211. .main {
  212. color: #1F2429;
  213. width: 1020px;
  214. ul {
  215. li {
  216. display: inline-block;
  217. line-height: 25px;
  218. max-width: 98px;
  219. /*min-width: 80px;*/
  220. text-align: left;
  221. overflow: hidden;
  222. text-overflow: ellipsis;
  223. white-space: nowrap;
  224. cursor: pointer;
  225. margin-right: 40px;
  226. }
  227. }
  228. }
  229. }
  230. /deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner:first-child {
  231. color: #8D9399
  232. }
  233. .dark {
  234. color: #8D9399
  235. }
  236. .light {
  237. color: #3A8DDE;
  238. }
  239. }
  240. </style>