zfire-newmall-admin/src/views/mallManagement/goods/newclassify_set/index.vue

<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="分类配置" style="margin-bottom: 20px"></el-page-header>
    <el-divider></el-divider>

    <div class="form-container">
      <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="90px">
        <el-form-item :label="'主标题:'" prop="mainTitle">
          <el-input style="width: 250px" disabled v-model="mainForm.mainTitle"></el-input>
        </el-form-item>
        <el-form-item :label="'副标题:'" prop="subtitle">
          <el-input style="width: 250px" disabled v-model="mainForm.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="商品类别" prop="goodsType">
          <el-select v-model="mainForm.goodsType" placeholder="请选择商品类别" style="width: 250px" disabled>
            <el-option label="普通商品" :value="1"></el-option>
            <el-option label="套购商品" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-group">
      <el-button size="small" type="primary" @click="addClassify" v-if="mainForm.goodsType === 1">选择分类</el-button>
      <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
    </div>

    <div class="diy-table" v-if="mainForm.goodsType === 1">
      <div class="table-head clearfix">
        <div class="item goods">商品名称</div>
        <div class="right">
          <div class="item name">规格</div>
          <div class="item input">划线价格</div>
          <div class="item input">销售价</div>
          <div class="item input">分销金额</div>
          <div class="item input">佣金比例</div>
          <div class="item input">内部分销金额</div>
          <div class="item input">内部佣金比例</div>
          <div class="item input">库存</div>
          <div class="item input">销量</div>
        </div>
        <div class="blank">操作</div>
      </div>
      <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <div class="goods-info">
          <img :src="$showImgUrl(item.imgUrl)" alt="" />
          {{ item.goodsName }}
        </div>
        <div class="spec-list">
          <div class="spec-item" v-for="(it, idx) in item.goodsSpecs" :key="idx">
            <div class="col name">{{ it.name }}-{{ it.specValue }}</div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.orgPrice"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.price"></el-input></div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.shareAmount"></el-input>
            </div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input>
            </div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.innerShareAmount"></el-input>
            </div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input>
            </div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.stockNum"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.soldNum"></el-input></div>
          </div>
        </div>
        <div class="operation">
          <el-button type="text" style="color: #f56c6c" @click="deleteGoods(item.goodsId, index)">删除</el-button>
        </div>
      </div>
      <div class="empty-text" v-if="goodsList.length < 1">暂无数据</div>
    </div>

    <div v-if="mainForm.goodsType === 2" style="margin-top: 20px">
      <el-table :data="goodsList" border fit highlight-current-row stripe>
        <el-table-column align="center" label="商品图片" prop="imgUrl" width="85">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px; display: block"
              :src="$showImgUrl(scope.row.imgUrl)"
              :preview-src-list="[$showImgUrl(scope.row.imgUrl)]"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200"></el-table-column>
        <el-table-column
          align="center"
          label="最低销售价"
          prop="packageMinAmount"
          min-width="120"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="最低分佣金额"
          prop="packageMinShareAmount"
          min-width="130"
          sortable
        ></el-table-column>
        <el-table-column align="center" label="库存" prop="stockNum" min-width="110"></el-table-column>
        <el-table-column align="center" label="销量" prop="soldNum" min-width="110"></el-table-column>

        <el-table-column align="center" label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" style="color: #f56c6c" @click="deleteGoods(scope.row.goodsId, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button type="primary" @click="submitMainForm" :loading="formLoading">{{
          formLoading ? '提交中 ...' : '提 交'
        }}</el-button>
        <el-button @click="goBack">关 闭</el-button>
      </div>
    </div>

    <!-- 选择商品 -->
    <el-dialog
      title="选择商品"
      :visible.sync="addGoodsVisible"
      :show-close="false"
      width="50%"
      :close-on-click-modal="false"
    >
      <div class="dialog-container clearfix">
        <div class="left fl">
          <div class="item" @click="changeClassify('')">全部分类</div>
          <div class="group" v-for="(item, index) in classifyList" :key="index">
            <div class="item" @click="toggleOpen(index)">
              <i :class="item.isOpen ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i> {{ item.name }}
            </div>
            <div class="child" v-if="item.isOpen">
              <div
                class="item"
                v-for="(childItem, childIndex) in item.children"
                :key="childIndex"
                @click="changeClassify(childItem.categoryId)"
              >
                {{ childItem.name }}
              </div>
            </div>
          </div>
        </div>

        <div class="right fl">
          <div class="search">
            <el-input
              placeholder="请输入商品名称进行搜索"
              v-model="keyword"
              class="input-with-select"
              clearable
              size="small"
              style="width: 250px"
            >
              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
            </el-input>
          </div>
          <div class="table" style="margin: 10px 0 20px">
            <el-table
              v-loading="table_listLoading"
              :data="table_dataList"
              element-loading-text="Loading"
              tooltip-effect="dark"
              style="width: 100%"
              max-height="270"
              @selection-change="handleChooseGoods"
            >
              <el-table-column
                align="center"
                type="selection"
                :selectable="checkboxSelect"
                width="45"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="goodsName"
                label="商品名称"
                min-width="200"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
            </el-table>
          </div>
          <div class="pagination clearfix">
            <div class="fr">
              <el-pagination
                @current-change="handleTableCurrentChange"
                :current-page="table_currentPage"
                :page-size="table_pageSize"
                background
                layout="prev, pager, next"
                :total="table_listTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
        <el-button @click="cancelAddGoods">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择分类 -->
    <el-dialog
      title="选择分类"
      :visible.sync="addClassifyVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="classify-list">
        <el-tree
          :data="classifyList"
          show-checkbox
          default-expand-all
          node-key="categoryId"
          ref="tree"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddClassify">保 存</el-button>
        <el-button @click="cancelAddClassify">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getactivityGoodsDetail,
  addActiveGoods,
  getEnterpriseTemplate,
  getClassifyList,
  getGoodsList,
  getMoreGoodsList
} from '@/api/special'
export default {
  data() {
    return {
      objectId: '', // 小程序模板id
      type: '', // 类型
      companyWechatId: '',
      useTemplate: '',
      formLoading: false,
      mainForm: {
        mainTitle: '', // 主标题
        subtitle: '', // 副标题
        goodsType: 1
      },
      mainFormRules: {
        mainTitle: [{ required: true, message: '请输入主标题', trigger: 'blur' }],
        subtitle: [{ required: true, message: '请输入副标题', trigger: 'blur' }],
        goodsType: [{ required: true, message: '请选择商品类别', trigger: 'change' }]
      },
      goodsList: [], // 列表数据

      addGoodsVisible: false,

      classifyList: [],
      classifyCurrent: '',
      keyword: '',
      table_dataList: null, // 列表数据
      table_listLoading: true, // 列表加载loading
      table_currentPage: 1, // 当前页码
      table_pageSize: 10, // 每页数量
      table_listTotal: 0, // 列表总数
      table_chooseGoods: [], // table中 当前选择商品

      addClassifyVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {},
  created() {
    if (this?.$route?.params?.pageCode) {
      const item = JSON.parse(this?.$route?.params?.pageCode)
      this.mainForm.mainTitle = item.mainTitle
      this.mainForm.subtitle = item.subTitle
      this.mainForm.goodsType = item.type
      this.objectId = item.goodsNewsCategoryId
    }

    this.getEnterpriseTemplate()
    this.getactivityGoodsDetail()
  },

  methods: {
    // 添加活动商品
    addActiveGoods(params) {
      addActiveGoods(params).then(res => {
        if (res.code == 200) {
          this.$router.go(-1)
        }
      })
    },

    //获取企业下模板
    getEnterpriseTemplate() {
      this.companyWechatId = JSON.parse(localStorage.getItem('greemall_user')).companyWechatId
      this.useTemplate = JSON.parse(localStorage.getItem('greemall_user')).useTemplate
      const parmas = {
        companyId: this.companyWechatId
      }
      getEnterpriseTemplate(parmas).then(res => {
        console.log('获取企业下模板', res)
      })
    },

    // 获取活动商品详情
    getactivityGoodsDetail() {
      const params = {
        objectId: this.objectId, // 小程序模板id
        type: 1 // 类型: 1=新维度分类，2=首页弹窗，3=活动专区1，4=活动专区2左侧，5=活动专区2右侧，6=专场专区1，7=专场专区2，8=专场专区3，9=专场专区4
      }
      getactivityGoodsDetail(params).then(res => {
        res.data.activeGoodsList.forEach(item => {
          item.imgUrl = item?.goods?.imgUrl || ''
        })

        this.goodsList = res.data.activeGoodsList

        if (this.mainForm.goodsType === 2) {
          this.goodsList.forEach((item, index) => {
            this.$set(this.goodsList, index, { ...item, ...(item?.goods || {}) })
          })
        }
      })
    },

    // 删除商品
    deleteGoods(item, index) {
      this.goodsList.splice(index, 1)
    },

    // 返回
    goBack() {
      this.$router.go(-1)
    },

    // 获取分类列表
    getClassifyList(state) {
      getClassifyList({ categoryLevel: 1, status: true }).then(res => {
        res.data.forEach(item => {
          item.isOpen = false
        })
        this.classifyList = res.data
        this.classifyCurrent = ''
        if (!state) {
          this.getGoodsList()
        }
      })
    },

    // 展开/收起 分类
    toggleOpen(index) {
      this.classifyList[index].isOpen = !this.classifyList[index].isOpen
    },

    // 切换分类
    changeClassify(cid) {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分类')
      }
      this.classifyCurrent = cid
      this.table_currentPage = 1
      this.getGoodsList()
    },

    // 搜索
    getGoodsListByScreen() {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可搜索')
      }
      this.table_currentPage = 1
      this.getGoodsList()
    },

    // 获取商品列表
    getGoodsList() {
      getGoodsList({
        pageNum: this.table_currentPage,
        pageSize: this.table_pageSize,
        keyword: this.keyword,
        categoryId: this.classifyCurrent,
        goodsTypes: this.mainForm.goodsType === 1 ? 'COMMON' : 'PACKAGE'
      }).then(res => {
        let oldGoodsList = this.goodsList
        let newGoodsList = res.data.records
        for (let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for (let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if (newItem.goodsId === oldItem.goodsId) {
              newGoodsList[j].selected = true
              break
            }
          }
        }
        for (let j = 0; j < newGoodsList.length; j++) {
          let newItem = newGoodsList[j]
          if (newItem.promotionGroup === true) {
            newGoodsList[j].selected = true
          }
        }
        this.table_dataList = newGoodsList
        this.table_listTotal = res.data.total
        this.table_listLoading = false
      })
    },

    // 查询重复值并禁选
    checkboxSelect(row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },

    // 更改列表当前页
    handleTableCurrentChange(val) {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分页')
      }
      this.table_currentPage = val
      this.getGoodsList()
    },

    // table点击选择商品
    handleChooseGoods(val) {
      this.table_chooseGoods = val
    },

    // 打开 选择商品
    addGoods() {
      this.addGoodsVisible = true
      this.getClassifyList()
    },

    // 取消 选择商品
    cancelAddGoods() {
      this.addGoodsVisible = false
    },

    // 提交 选择商品
    submitAddGoods() {
      let oldGoodsList = this.goodsList
      let newGoodsList = this.table_chooseGoods
      this.goodsList = oldGoodsList.concat(newGoodsList)
      this.addGoodsVisible = false
    },

    // 打开 选择分类
    addClassify() {
      this.addClassifyVisible = true
      this.getClassifyList(true)
    },

    // 取消 选择分类
    cancelAddClassify() {
      this.addClassifyVisible = false
    },

    // 提交 选择分类
    submitAddClassify() {
      if (this.$refs.tree.getCheckedNodes().length <= 0) {
        return this.$errorMsg('请选择分类')
      }
      let checkeds = this.$refs.tree.getCheckedNodes()
      let ids = []
      checkeds.forEach(item => {
        if (item.level === 2) {
          ids.push(item.categoryId)
        }
      })
      getMoreGoodsList({ categoryIds: ids.join(',') }).then(res => {
        let oldGoodsList = this.goodsList
        let newGoodsList = []
        res.data.forEach(item => {
          if (item.promotionGroup === false) {
            newGoodsList.push(item)
          }
        })
        let allGoodsList = oldGoodsList.concat(newGoodsList)
        let showGoodsList = []
        let obj = {}
        for (var i = 0; i < allGoodsList.length; i++) {
          if (!obj[allGoodsList[i].goodsId]) {
            showGoodsList.push(allGoodsList[i])
            obj[allGoodsList[i].goodsId] = true
          }
        }
        this.goodsList = showGoodsList
        this.addClassifyVisible = false
      })
    },

    // 提交
    submitMainForm() {
      this.$refs.mainForm.validate(valid => {
        if (valid) {
          const params = {
            goodsList: this.goodsList,
            objectId: this.objectId,
            type: 1
          }
          this.addActiveGoods(params)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  margin-top: 40px;

  // padding: 0 6%;
  .title {
    font-size: 16px;
    margin-bottom: 30px;
    padding-left: 10px;
    font-weight: bold;
  }

  .tips {
    margin-top: 10px;

    span {
      display: inline-block;
      width: 300px;
      text-align: center;
      line-height: 32px;
      background: #ffefef;
      font-size: 14px;
      color: #f66460;
    }
  }

  .tips2 {
    font-size: 12px;
    color: #999999;
    line-height: 30px;
  }

  .container {
    padding: 10px 20px 0;
    background: #f5f5f5;
    border-radius: 10px;
  }

  .addBtn {
    padding: 10px 0;
  }
}

.diy-table {
  overflow-x: scroll;
  border-left: 1px solid #f5f5f5;
  margin-top: 20px;
  width: 100%;
  // margin-left: 77px;
  // min-width: 1185px;
  max-width: 100%;

  .table-head {
    display: flex;

    .item {
      height: 40px;
      line-height: 40px;
      float: left;
      font-weight: 500;
      font-size: 14px;
      background: #f5f5f5;
      text-align: center;
    }

    .right {
      float: left;
      width: 94%;
      min-width: 1150px;
      flex-shrink: 0;
      height: 40px;
    }

    .goods {
      width: 20%;
      min-width: 250px;
    }

    .name {
      width: 11.1111%;
      min-width: 100px;
    }

    .input {
      width: 11.1111%;
      min-width: 100px;
    }

    .opera {
      width: 11.1111%;
      min-width: 80px;
      // text-align: right;
    }

    .blank {
      width: 6%;
      min-width: 90px;
      font-weight: 500;
      font-size: 14px;
      background: #f5f5f5;
      text-align: center;
      line-height: 40px;
    }
  }

  .goods-item {
    display: flex;
    align-content: center;

    .goods-info {
      flex-shrink: 0;
      width: 20%;
      min-width: 250px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
      font-size: 14px;

      &:last-child {
        border-bottom: none;
      }

      img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        flex-shrink: 0;
      }
    }

    .spec-list {
      width: 94%;
      min-width: 1150px;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .spec-item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .col {
          flex-shrink: 0;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 10px;
          border-right: 1px solid #f5f5f5;

          &:last-child {
            border-right: none;
          }
        }

        .name {
          width: 11.1111%;
          min-width: 100px;
          font-size: 14px;
          text-align: center;
        }

        .input {
          width: 11.1111%;
          min-width: 100px;
        }

        .btn {
          width: 11.1111%;
          min-width: 80px;
        }
      }
    }

    .operation {
      flex-shrink: 0;
      width: 6%;
      min-width: 90px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
    }
  }

  .empty-text {
    line-height: 60px;
    text-align: center;
    color: #909399;
  }
}

.dialog-container {
  .left {
    width: 140px;
    height: 350px;
    overflow-y: scroll;

    .group {
      margin-top: 10px;
    }

    .child {
      margin-top: 5px;

      .item {
        padding-left: 18px;
      }
    }

    .item {
      cursor: pointer;
      line-height: 24px;
    }
  }

  .right {
    width: calc(100% - 140px);
    height: 350px;
    box-sizing: border-box;
    padding-left: 20px;
  }
}

::v-deep .el-form-item__label {
  margin-left: 0px !important;
}
</style>