|
@@ -5,27 +5,32 @@
|
|
|
<div style="width: 1020px">
|
|
|
<el-breadcrumb
|
|
|
separator-class="el-icon-arrow-right"
|
|
|
- style="width: 320px;display: inline-block"
|
|
|
+ style="max-width: 470px;display: inline-block"
|
|
|
>
|
|
|
<el-breadcrumb-item>所有分类</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>给排水专业</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>燃气系统</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>品牌名称</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>{{this.$route.query.major}}</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>{{this.$route.query.system}}</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>{{this.$route.query.class}}</el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
<span v-for="(item,index) in allSelect" v-if="item.check" class="select">{{item.BrandCname}}
|
|
|
<i class="el-icon-close" @click="deleteCurrent(item,index)"></i></span>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <span class="total poa">共<b>42</b>件相关产品</span>
|
|
|
+ <span class="total poa">共<b>{{total}}</b>件相关产品</span>
|
|
|
</div>
|
|
|
<div class="device-sys">
|
|
|
<div class="left">品牌:</div>
|
|
|
|
|
|
<div class="main" :class="more=='收起'? 'mt30':''">
|
|
|
<ul v-if="more=='更多'">
|
|
|
- <li v-for="(item,index) in allDate" :key="index" v-if="index < 8" @click="handleCurrentBrand(item,index)"
|
|
|
- :class="item.check ?'light':''">
|
|
|
+ <li
|
|
|
+ v-for="(item,index) in allDate"
|
|
|
+ :key="index"
|
|
|
+ v-if="index < 9"
|
|
|
+ @click="handleCurrentBrand(item,index)"
|
|
|
+ v-show="item.name != '全部'"
|
|
|
+ :class="item.check ?'light':''">
|
|
|
{{item.BrandCname}}
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -39,32 +44,34 @@
|
|
|
> {{letter}}</span>
|
|
|
</div>
|
|
|
<ul>
|
|
|
- <li v-for="(item,index) in allDate" :key="index" @click="handleCurrentBrand(item,index)"
|
|
|
- :class="item.check ?'light':''">{{item.BrandCname}}
|
|
|
+ <li
|
|
|
+ v-for="(item,index) in allDate"
|
|
|
+ :key="index"
|
|
|
+ @click="handleCurrentBrand(item,index)"
|
|
|
+ v-show="item.name != '全部'"
|
|
|
+ :class="item.check ?'light':''">{{item.BrandCname}}
|
|
|
</li>
|
|
|
</ul>
|
|
|
-
|
|
|
</template>
|
|
|
-
|
|
|
</div>
|
|
|
- <div class="right" @click="allData" :class="more == '更多' ? 'dark' :'light'" style="position:relative;">
|
|
|
+ <div class="right" :class="more == '更多' ? 'dark' :'light'" style="position:relative;">
|
|
|
<el-dropdown @command="handleCommand" style="line-height: 40px;" v-show="more=='收起'"
|
|
|
:class="more=='收起'?'pos-drop':''">
|
|
|
<span class="el-dropdown-link">
|
|
|
- {{sort}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ {{sortName}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
- <p style="cursor: pointer;" :class="more=='收起'? 'pos-down':''">{{more}}
|
|
|
+ <p style="cursor: pointer;" @click="allData" :class="more=='收起'? 'pos-down':''">{{more}}
|
|
|
<span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="saga-brand-box mt20">
|
|
|
- <detailTable/>
|
|
|
+ <detailTable :table="table"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -72,38 +79,18 @@
|
|
|
|
|
|
<script>
|
|
|
import detailTable from "../../public/detailTable";
|
|
|
- import brandList from "@/data/brandList"
|
|
|
+ import {prodTypeQuery} from "@/api/brand"
|
|
|
+ import {brandQueryByClass} from "@/api/product"
|
|
|
+ import {mapGetters} from "vuex"
|
|
|
+
|
|
|
|
|
|
export default {
|
|
|
- components: {detailTable},
|
|
|
- created() {
|
|
|
- this.brandList = Object.assign({
|
|
|
- '全部': [{
|
|
|
- id: 0,
|
|
|
- name: '全部'
|
|
|
- }
|
|
|
- ]
|
|
|
- }, brandList)
|
|
|
-
|
|
|
- for (let key in this.brandList) {
|
|
|
- if (Array.isArray(brandList[key])) {
|
|
|
- let list = this.temporary.concat(brandList[key])
|
|
|
- list.map(i => this.$set(i, 'check', false))
|
|
|
- this.temporary = list
|
|
|
- this.allDate = list
|
|
|
- this.allSelect = list
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
idx: 0,
|
|
|
more: '更多',
|
|
|
- // limitSys: 18,
|
|
|
isShow: true,
|
|
|
- brandList: {},
|
|
|
+ brandList: [],
|
|
|
allDate: [],
|
|
|
temporary: [],//全部数据
|
|
|
allSelect: [],//选择的数据
|
|
@@ -111,14 +98,71 @@
|
|
|
zh: "中文排序",
|
|
|
en: "英文排序",
|
|
|
},
|
|
|
- sort: "中文排序",
|
|
|
+ sortName: "中文排序",
|
|
|
+ sort: "zh",
|
|
|
+ total: 0,
|
|
|
+ table: []
|
|
|
|
|
|
}
|
|
|
},
|
|
|
- computed: {},
|
|
|
+ components: {detailTable},
|
|
|
+ created() {
|
|
|
+ this.getDate()
|
|
|
+ this.getProductList()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('layout', ['dictionary']),
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ getDate() {
|
|
|
+ let param = {
|
|
|
+ GroupId: this.dictionary.groupId,
|
|
|
+ ProjectId: this.dictionary.projectId,
|
|
|
+ Type: this.sort,
|
|
|
+ ClassCode: this.$route.query.code,
|
|
|
+ Orders: 'name asc, createTime desc'
|
|
|
+ }
|
|
|
+ brandQueryByClass(param, res => {
|
|
|
+ this.brandList = res.Content ? res.Content[0] : []
|
|
|
+ this.brandList = Object.assign({
|
|
|
+ '全部': [{
|
|
|
+ name: '全部'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, this.brandList)
|
|
|
+ this.temporary = []
|
|
|
+ this.allDate = []
|
|
|
+ this.allSelect = []
|
|
|
+ for (let key in this.brandList) {
|
|
|
+ if (Array.isArray(this.brandList[key])) {
|
|
|
+ let list = this.temporary.concat(this.brandList[key])
|
|
|
+ list.map(i => this.$set(i, 'check', false))
|
|
|
+ this.temporary = list
|
|
|
+ this.allDate = list
|
|
|
+ this.allSelect = list
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getProductList() {
|
|
|
+ let params = {
|
|
|
+ "Cascade": [
|
|
|
+ {"Name": "brand"}
|
|
|
+ ],
|
|
|
+ Filters: `prodCode='${this.$route.query.code}'`
|
|
|
+ }
|
|
|
+ prodTypeQuery(params, res => {
|
|
|
+ this.total = res.Total
|
|
|
+ this.table = res.Content.map(i => ({...i, brandName: this.$route.query.BrandCname}))
|
|
|
+ })
|
|
|
+ },
|
|
|
handleCommand(command) {// 切换排序方式
|
|
|
- this.sort = this.sortMap[command]
|
|
|
+ this.sortName = this.sortMap[command]
|
|
|
+ this.sort = command
|
|
|
+ this.getDate()
|
|
|
+ this.getProductList()
|
|
|
},
|
|
|
allData() {
|
|
|
this.isShow = !this.isShow
|
|
@@ -142,6 +186,7 @@
|
|
|
i.check = item.check
|
|
|
}
|
|
|
})
|
|
|
+ this.handleQuery(this.allSelect)
|
|
|
},
|
|
|
deleteCurrent(item, index) {
|
|
|
item.check = false
|
|
@@ -150,7 +195,26 @@
|
|
|
i.check = item.check
|
|
|
}
|
|
|
})
|
|
|
+ this.handleQuery(this.allSelect)
|
|
|
+ },
|
|
|
+ handleQuery(arr) {
|
|
|
+ let filter = this.allSelect.filter(i => i.check), str = ''
|
|
|
+ str = filter.map(i => `brandID='${i.BrandID}'`).join(' or ')
|
|
|
+ if (str) {
|
|
|
+ let params = {
|
|
|
+ "Cascade": [
|
|
|
+ {"Name": "brand"}
|
|
|
+ ],
|
|
|
+ Filters: `prodCode='${this.$route.query.code}';(${str})`
|
|
|
|
|
|
+ }
|
|
|
+ prodTypeQuery(params, res => {
|
|
|
+ this.total = res.Total
|
|
|
+ this.table = res.Content.map(i => ({...i, brandName: this.$route.query.BrandCname}))
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.getProductList()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|