|
|
@@ -0,0 +1,175 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- <el-button size="small" type="primary" @click="dialogTableVisible = true">设置营销分类</el-button> -->
|
|
|
+<!-- <el-dropdown-item @click.native="onShow()">设置营销分类</el-dropdown-item>-->
|
|
|
+ <el-button size="mini" @click="onShow()">设置营销分类</el-button>
|
|
|
+ <el-dialog title="设置营销分类" append-to-body :visible.sync="dialogTableVisible">
|
|
|
+ <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"></tree>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
|
|
|
+ <el-button size="small" type="warning" class="normal-btn-width btn-warning" @click="onSubmit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tree from '../components/classTree.vue'
|
|
|
+import {mapGetters} from 'vuex'
|
|
|
+export default {
|
|
|
+ props:['data'],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dialogTableVisible:false,
|
|
|
+ classList:[],
|
|
|
+ activeBrandData:[],
|
|
|
+ haveBindClass:[],
|
|
|
+ activeid:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ tree
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapGetters({
|
|
|
+ checks:'checks'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ onShow () {
|
|
|
+ this.saleClass(()=>{
|
|
|
+ this.dialogTableVisible = true
|
|
|
+ this.bindSaleClass()
|
|
|
+ console.log("营销分类")
|
|
|
+ console.log(this.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ createMenu (array) {
|
|
|
+ let arr = []
|
|
|
+ function convertToElementTree(node) {
|
|
|
+ // 新节点
|
|
|
+ var elNode = {
|
|
|
+ label:node['itemclassname'],
|
|
|
+ value:node['itemclassid'],
|
|
|
+ itemclassnum:node['itemclassnum'],
|
|
|
+ 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]));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return elNode;
|
|
|
+ }
|
|
|
+ array.forEach((element) => {
|
|
|
+ arr.push(convertToElementTree(element))
|
|
|
+ });
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ //点击品牌
|
|
|
+ brandClick (item) {
|
|
|
+ this.activeid = item.value
|
|
|
+ this.activeBrandData = item.children
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交授权数据
|
|
|
+ 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)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // this.saleClass()
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+</style>
|
|
|
+<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: red;
|
|
|
+}
|
|
|
+</style>
|
qymljy