|
@@ -1,170 +1,122 @@
|
|
|
|
+
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
- <!-- <el-button size="small" type="primary" @click="dialogTableVisible = true">设置营销分类</el-button> -->
|
|
|
|
-<!-- <el-dropdown-item @click.native="onShow()">设置营销分类</el-dropdown-item>-->
|
|
|
|
- <ul class="flex-align-center">
|
|
|
|
- <li class="brand-item" :class="activeid === item.value?'act':''" v-for="item in classList" :key="item.index" @click="brandClick(item)">{{item.label}}</li>
|
|
|
|
- </ul>
|
|
|
|
- <div>
|
|
|
|
- <tree :data="activeBrandData" node-key="itemclassid" :check-strictly="false"></tree>
|
|
|
|
|
|
+ <div style="display:flex;align-items:center">
|
|
|
|
+ <el-input
|
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
|
+ v-model="params.content.where.condition"
|
|
|
|
+ style="width:200px"
|
|
|
|
+ size="mini"
|
|
|
|
+ class="input-with-select inline-16"
|
|
|
|
+ @keyup.native.enter="listData(params.content.pageNumber=1)"
|
|
|
|
+ @clear="clearData"
|
|
|
|
+ clearable>
|
|
|
|
+ </el-input>
|
|
|
|
+ <slot name="addClass" :data="{checkArr:checkArr,data:data}"></slot>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-top: 15px">
|
|
|
|
+ <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" :width="false" :height="tableHieght" fixedName="operation">
|
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
|
+ <div v-if="scope.column.columnname == 'price'">
|
|
|
|
+ <el-input size="small" v-if="currentProduct.sa_aftersalesmag_itemsid == scope.column.data.sa_aftersalesmag_itemsid" v-model="scope.column.data.price"></el-input>
|
|
|
|
+ <span v-else>{{scope.column.data.price}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else-if="scope.column.columnname == 'qty'">
|
|
|
|
+ <el-input size="small" v-if="currentProduct.sa_aftersalesmag_itemsid == scope.column.data.sa_aftersalesmag_itemsid" v-model="scope.column.data.qty"></el-input>
|
|
|
|
+ <span v-else>{{scope.column.data.qty}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else-if="scope.column.columnname == 'reason'">
|
|
|
|
+ <div v-if="currentProduct.sa_aftersalesmag_itemsid == scope.column.data.sa_aftersalesmag_itemsid">
|
|
|
|
+ <el-input type="textarea" size="mini" v-model="scope.column.data.reason"></el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else>{{scope.column.data.reason ? scope.column.data.reason : '--'}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
|
|
|
|
+ <p v-if="!scope.column.data[scope.column.columnname] && scope.column.data[scope.column.columnname] !== 0 && scope.column.columnname != 'operation'&& scope.column.columnname != 'reason'">--</p>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-slot:opreation="scope">
|
|
|
|
+ <slot name="delProduct" :data="scope.data"></slot>
|
|
|
|
+ </template>
|
|
|
|
+ </tableLayout>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-top:16px;text-align:right">
|
|
|
|
+ <el-pagination
|
|
|
|
+ background
|
|
|
|
+ small
|
|
|
|
+ @size-change="handleSizeChange"
|
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
|
+ :current-page="params.content.pageNumber"
|
|
|
|
+ :page-size="params.content.pageSize"
|
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
|
+ :total="total">
|
|
|
|
+ </el-pagination>
|
|
</div>
|
|
</div>
|
|
- <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import tree from './components/classTree.vue'
|
|
|
|
-import {mapGetters} from 'vuex'
|
|
|
|
export default {
|
|
export default {
|
|
- props:['data'],
|
|
|
|
|
|
+ props:["data"],
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
- dialogTableVisible:false,
|
|
|
|
- classList:[],
|
|
|
|
- activeBrandData:[],
|
|
|
|
- haveBindClass:[],
|
|
|
|
- activeid:0
|
|
|
|
|
|
+ tableHieght:"calc(100vh - 380px)",
|
|
|
|
+ tablecols:[],
|
|
|
|
+ list:[],
|
|
|
|
+ total:0,
|
|
|
|
+ params:{
|
|
|
|
+ "id": 20220927090202,
|
|
|
|
+ "content": {
|
|
|
|
+ "itemid": "",
|
|
|
|
+ "itemno": "",
|
|
|
|
+ "pageNumber": 1,
|
|
|
|
+ "pageSize": 20,
|
|
|
|
+ "where": {
|
|
|
|
+ "condition": ""
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ options:[
|
|
|
|
+ ],
|
|
|
|
+ productList:'',
|
|
|
|
+ currentProduct:{},
|
|
|
|
+ checkArr:[]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- components:{
|
|
|
|
- tree
|
|
|
|
- },
|
|
|
|
- computed:{
|
|
|
|
- ...mapGetters({
|
|
|
|
- checks:'checks'
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
methods:{
|
|
methods:{
|
|
- onShow () {
|
|
|
|
- this.saleClass(()=>{
|
|
|
|
- this.dialogTableVisible = true
|
|
|
|
- this.bindSaleClass()
|
|
|
|
- })
|
|
|
|
|
|
+ async listData(){
|
|
|
|
+ this.params.content.itemid = this.data.itemid
|
|
|
|
+ this.params.content.itemno = this.data.itemno
|
|
|
|
+ const res = await this.$api.requested(this.params)
|
|
|
|
+ this.list = res.data
|
|
|
|
+ this.total = res.total
|
|
|
|
+ this.checkArr = this.list.map(item => item.itemclassid)
|
|
|
|
+ console.log(this.list)
|
|
},
|
|
},
|
|
- async saleClass (fn) {
|
|
|
|
- const res = await this.$api.requested({
|
|
|
|
- "id": "20220922110403",
|
|
|
|
- "version":1,
|
|
|
|
- "content": {
|
|
|
|
- "sa_brandid":0
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- let arr = res.data.map(e=>{
|
|
|
|
- return {
|
|
|
|
- itemclassname:e.brandname,
|
|
|
|
- itemclassid:e.sa_brandid,
|
|
|
|
- subdep:e.ttemclass
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- this.classList = this.createMenu(arr)
|
|
|
|
- this.activeid = this.classList[0].value
|
|
|
|
- this.activeBrandData = this.classList[0].children
|
|
|
|
- fn()
|
|
|
|
|
|
+ handleSizeChange(val) {
|
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
|
+ this.params.content.pageSize = val
|
|
|
|
+ this.listData()
|
|
},
|
|
},
|
|
- createMenu (array) {
|
|
|
|
- let arr = []
|
|
|
|
- function convertToElementTree(node) {
|
|
|
|
- // 新节点
|
|
|
|
- var elNode = {
|
|
|
|
- label:node['itemclassname'],
|
|
|
|
- value:node['itemclassid'],
|
|
|
|
- itemclassnum:node['itemclassnum'],
|
|
|
|
- itemclassid:node['itemclassid'],
|
|
|
|
- hasChild:true,
|
|
|
|
- checked:false
|
|
|
|
- }
|
|
|
|
- if (node.subdep && node.subdep.length > 0) {
|
|
|
|
- // 如果存在子节点
|
|
|
|
- elNode.children = []
|
|
|
|
- for (var index = 0; index < node.subdep.length; index++) {
|
|
|
|
- // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
|
|
|
|
- elNode.children.push(convertToElementTree(node.subdep[index]));
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- elNode.hasChild = false
|
|
|
|
- }
|
|
|
|
- return elNode;
|
|
|
|
- }
|
|
|
|
- array.forEach((element) => {
|
|
|
|
- arr.push(convertToElementTree(element))
|
|
|
|
- });
|
|
|
|
- return arr
|
|
|
|
|
|
+ handleCurrentChange(val) {
|
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
|
+ this.params.content.pageNumber = val
|
|
|
|
+ this.listData()
|
|
},
|
|
},
|
|
- //点击品牌
|
|
|
|
- brandClick (item) {
|
|
|
|
- this.activeid = item.value
|
|
|
|
- this.activeBrandData = item.children
|
|
|
|
|
|
+ clearData(){
|
|
|
|
+ this.listData()
|
|
},
|
|
},
|
|
-
|
|
|
|
- // 提交授权数据
|
|
|
|
- async onSubmit () {
|
|
|
|
- const res = await this.$api.requested({
|
|
|
|
- "id": 20220927090102,
|
|
|
|
- "content": {
|
|
|
|
- "itemclassids":this.checks,
|
|
|
|
- "itemid": this.data.itemid,
|
|
|
|
- "itemno":this.data.itemno
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- this.tool.showMessage(res,()=>{
|
|
|
|
- this.dialogTableVisible = false
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 查询已绑定分类
|
|
|
|
- async bindSaleClass () {
|
|
|
|
- var that = this
|
|
|
|
- const res = await this.$api.requested({
|
|
|
|
- "id": 20220927090202,
|
|
|
|
- "content": {
|
|
|
|
- "itemid": this.data.itemid,
|
|
|
|
- "itemno":this.data.itemno
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- this.haveBindClass = res.data
|
|
|
|
- // 设置已绑定的id,用于check显示
|
|
|
|
- res.data.filter(e=>{
|
|
|
|
- this.$store.dispatch('checkClass',e.itemclassid)
|
|
|
|
- })
|
|
|
|
- // 递归,遍历数组设置勾选状态
|
|
|
|
- function convertToElementTree(node) {
|
|
|
|
- that.haveBindClass.forEach(e=>{
|
|
|
|
- if (e.itemclassid === node.value) {
|
|
|
|
- node.checked = true
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- if (node.children && node.children.length > 0) {
|
|
|
|
- for (var index = 0; index < node.children.length; index++) {
|
|
|
|
- convertToElementTree(node.children[index])
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- this.classList.forEach((element) => {
|
|
|
|
- convertToElementTree(element)
|
|
|
|
- });
|
|
|
|
|
|
+ queryClick(){
|
|
|
|
+ this.listData()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- mounted () {
|
|
|
|
- this.onShow()
|
|
|
|
|
|
+ created() {
|
|
|
|
+ this.listData()
|
|
|
|
+ this.tablecols = this.tool.tabelCol(this.$route.name).salerClassTable.tablecols
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</script>
|
|
-<style>
|
|
|
|
-</style>
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
-.brand-item{
|
|
|
|
- padding-left:40px ;
|
|
|
|
- margin-right:20px;
|
|
|
|
- margin-bottom: 15px;
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 16px;
|
|
|
|
- font-weight: 600;
|
|
|
|
- cursor: pointer;
|
|
|
|
-}
|
|
|
|
-.act{
|
|
|
|
- color: #3874f6;
|
|
|
|
-}
|
|
|
|
|
|
+
|
|
</style>
|
|
</style>
|