tuanfeng-pc-mer/src/views/commodity/commodityList/components/EditModal.vue

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div class="tree-container">
      <el-tree
        :data="[ formData ]" :props="{ children: 'childs' }" node-key="orderNumber" default-expand-all
        draggable
        :expand-on-click-node="false"
      >
        <div slot-scope="{ node, data }">
          <div style="display: flex;align-items: center;justify-content: space-between;padding: 10px 0;">
            <div v-if="data.depth <= 3" style="margin-right: 14px;">
              <el-input
                v-model="data.groupName" maxlength="10" size="mini" style="width: 280px;"
                :placeholder="{ 1: '输入一级分组名称（最大6个字符）', 2: '输入二级分组名称（最大6个字符）', 2: '输入三级分组名称（最大10个字符）' }[data.depth]"
              />
              <el-input v-model="data.groupDescribe" size="mini" style="width: 340px;" placeholder="请输入分组描述" />
            </div>
            <div>
              <el-button
                type="text" size="mini"
                @click="$refs.RelatedGroupProducts && $refs.RelatedGroupProducts.handleOpen(data.products)"
              >
                分组商品详情
              </el-button>
              <el-popover placement="top" width="330" trigger="hover" style="margin: 0 8px;">
                <div style="color: #000000;">请选择添加方式{{ data.selectType }}</div>
                <!-- <div>
                  <el-button
                  type="text" size="mini"
                  @click="(data.selectType = 1) && handleAddProduct(data, node)"
                  >
                  <span>
                  手动选择
                  <span v-if="data.ids && data.ids.length">
                  （已选{{ data.ids.length }}个）
                  </span>
                  </span>
                  </el-button>
                  <el-button
                  type="text" size="mini"
                  @click="(data.selectType = 2) && (selectedGroupId = data.orderNumber) && $refs.IntelProductScreening && $refs.IntelProductScreening.handleOpen(data)"
                  >
                  <span>
                  智能添加
                  <span v-if="data.conditions && data.conditions.length">
                  （已设置）
                  </span>
                  </span>
                  </el-button>
                  </div> -->
                <div class="add-group-container">
                  <el-radio-group
                    v-model="data.selectType" size="mini" style="margin-top: 6px;"
                  >
                    <el-radio-button :label="1">
                      <div style="padding: 6px 16px" @click="((data.selectType = 1) && $forceUpdate()) || handleAddProduct(data, node)">
                        手动选择
                        <span v-if="data.ids && data.ids.length">
                          （已选{{ data.ids.length }}个）
                        </span>
                      </div>
                    </el-radio-button>
                    <el-radio-button :label="2">
                      <div style="padding: 6px 16px" @click="((data.selectType = 2) && $forceUpdate()) || (selectedGroupId = data.orderNumber) && $refs.IntelProductScreening && $refs.IntelProductScreening.handleOpen(data)">
                        智能添加
                        <span v-if="data.conditions && data.conditions.length">
                          （已设置）
                        </span>
                      </div>
                    </el-radio-button>
                  </el-radio-group>
                </div>
                <el-button slot="reference" type="text" size="mini">
                  添加分组商品
                </el-button>
              </el-popover>
              <el-button v-if="data.depth < 3" type="text" size="mini" @click="handleAppend(data)">
                {{ { 1: '添加二级分组名称', 2: '添加三级分组名称' }[data.depth] }}
              </el-button>
              <el-button v-if="data.depth > 1" type="text" size="mini" @click="handleDelete(data, node)">
                删除
              </el-button>
            </div>
          </div>
        </div>
      </el-tree>
      <div>
        <el-button type="primary" size="small" @click="handleSubmit">
          保存
        </el-button>
        <el-button type="danger" size="small" @click="handleClose">
          取消
        </el-button>
      </div>

      <el-dialog
        class="product-dialog" title="手动添加商品" :visible.sync="isShowManualAdd" width="900px"
        top="50px"
        append-to-body
      >
        <div class="filter-container" style="display: flex;align-items: center;flex-wrap: wrap;">
          <el-input
            v-model="listQuery.search" clearable size="mini" class="filter-item"
            style="width: 200px;"
            placeholder="搜索商品名称或商品ID"
          />
          <div style="margin-left: 10px;">
            <span>库存数量：</span>
            <el-input
              v-model="listQuery.minStock" size="mini" class="filter-item" style="width: 200px;"
              maxlength="9"
            />
            <span> 至 </span>
            <el-input
              v-model="listQuery.maxStock" size="mini" class="filter-item" style="width: 200px;"
              maxlength="9"
            />
          </div>
          <div style="margin-left: 10px;">
            <span>价格：</span>
            <el-input
              v-model="listQuery.minPrice" size="mini" class="filter-item" style="width: 200px;"
              maxlength="9"
            />
            <span> 至 </span>
            <el-input
              v-model="listQuery.maxPrice" size="mini" class="filter-item" style="width: 200px;"
              maxlength="9"
            />
          </div>
          <el-button
            size="mini" class="filter-item" type="primary" icon="el-icon-search"
            style="margin-left: 10px;"
            @click="initList()"
          >
            查找
          </el-button>
          <el-button
            size="mini" class="filter-item" type="info" plain
            style="margin-left: 10px; padding: 7px 22px; border: 0" @click="clearData"
          >
            重置
          </el-button>
        </div>
        <div style="position: relative;padding: 0 0 10px;">
          <el-table
            ref="multipleTable" :data="productDataList" border
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
            @selection-change="(e) => multipleSelection = e"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="产品主图" width="220" align="center" prop="image">
              <template slot-scope="{ row }">
                <el-image
                  v-if="row.image" lazy :src="common.seamingImgUrl(row.image)" style="width:80px;height:80px;"
                  fit="cover" :preview-src-list="[ common.seamingImgUrl(row.image) ]"
                />
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="220" align="center" />
            <el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip />
            <el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip />
          </el-table>
          <div style="position: sticky;bottom: -5px;z-index: 1;padding: 10px;background-color: #eeeeee;">
            <el-pagination
              :current-page="listQuery.page" :page-sizes="[50, 100, 200, 500, 1000]"
              :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="productTotal"
              @size-change="(val) => ((listQuery.pageSize = val) && initList())"
              @current-change="(val) => ((listQuery.page = val) && initList())"
            />
            <span>
              <el-button type="primary" @click="handleSaveIdList">确 定</el-button>
              <el-button @click="isShowManualAdd = false">取 消</el-button>
            </span>
          </div>
        </div>
      </el-dialog>

      <!-- 关联分组产品 -->
      <RelatedGroupProducts ref="RelatedGroupProducts" />
      <!-- 智能筛选产品 -->
      <IntelProductScreening ref="IntelProductScreening" @success="handleSaveIntelProductList" />
    </div>
  </el-dialog>
</template>

<script>
import RelatedGroupProducts from './RelatedGroupProducts'
import IntelProductScreening from './IntelProductScreening'
import { commodityListAdd, commodityListUpdate, getGroupList, commodityListGetById, commodityListDelete } from '@/api/commodity'
import XeUtils from 'xe-utils'

export default {
  name: 'EditModal',
  components: {
    RelatedGroupProducts,
    IntelProductScreening
  },
  props: {
    groupId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1120px',
        title: ''
      },
      visible: false,
      formData: {
        shopGroupId: '',
        groupName: '',
        groupImage: '',
        groupDescribe: '',
        groupLevel: '',
        depth: 1,
        groupPid: 0,
        products: [],
        childs: [],
        selectType: 1,
        ids: [],
        condition: '',
        conditions: []
      },

      isShowManualAdd: false, // 手动添加商品模态框
      selectedGroupId: '',
      productDataList: [],
      productTotal: 0,
      listQuery: {
        maxPrice: null, // 价格最大值
        maxStock: null, // 库存数量最大值
        minPrice: null, // 价格最小值
        minStock: null, // 库存数量最小值
        page: 1, // 当前页
        pageSize: 50, // 每页记录数
        search: '' // 搜索字段
      },
      multipleSelection: []
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    async initList() {
      const loading = this.$loading({ text: '加载中' })
      const res = await getGroupList(this.listQuery)
      this.productTotal = res.data.total
      this.productDataList = res.data.list
      loading.close()
    },
    handleOpen(params = {}) {
      this.modalOptions.title = params.shopGroupId ? '编辑分组' : '添加分组'
      this.visible = true
      this.initList()
      if (params.shopGroupId) {
        this.getInfo(params.shopGroupId)
      } else {
        this.formData = {
          shopGroupId: '',
          groupName: '',
          groupImage: '',
          groupDescribe: '',
          groupLevel: '',
          depth: 1,
          groupPid: 0,
          products: [],
          childs: [],
          selectType: 1, // 自设
          ids: [], // 自设。要传。
          condition: null, // 自设。要传。1-全部满足 2-任意满足
          conditions: [], // 自设。要传。{ calculation: 1-大于 2-等于 3-小于, ids: 已满足部分条件的商品id数组, number: 数值, type: 1-库存 2-价格 3-重量 4-销量 }
          orderNumber: '' // 自设
        }
      }
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await commodityListGetById({ shopGroupId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          shopGroupId: res.data.shopGroupId || '',
          groupName: res.data.groupName || '',
          groupImage: res.data.groupImage || '',
          groupDescribe: res.data.groupDescribe || '',
          groupLevel: res.data.groupLevel || '',
          depth: res.data.depth || 1,
          groupPid: res.data.groupPid || 0,
          products: res.data.products || [],
          childs: res.data.childs || []
        })
        XeUtils.eachTree([ this.formData ], (item) => {
          item.ids = item.products.map((i) => i.productId)
          item.selectType = 1
          item.condition = null
          item.conditions = []
          item.orderNumber = Date.now() - (item.shopGroupId || 0)
        }, { children: 'childs' })
      } finally {
        loading.close()
      }
    },
    handleAppend(data) {
      if (data.depth < 3) {
        data.childs.push({
          shopGroupId: '',
          groupName: '',
          groupImage: '',
          groupDescribe: '',
          groupLevel: '',
          depth: data.depth + 1,
          groupPid: data.shopGroupId,
          childs: [],
          selectType: 1,
          ids: [],
          condition: null,
          conditions: [],
          orderNumber: Date.now()
        })
      }
    },
    handleDelete(data, node) {
      if (data.shopGroupId) {
        let isGroupIdEmpty = false
        XeUtils.eachTree([ this.formData ], (item) => {
          if (!item.shopGroupId) isGroupIdEmpty = true
        }, { children: 'childs' })
        if (isGroupIdEmpty) return this.$message({ message: '包含新建分组，请先保存', type: 'warning' })
        this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await commodityListDelete({ shopGroupId: data.shopGroupId })
            this.$message({ message: '删除成功！', type: 'success' })
            this.getInfo(this.formData.shopGroupId)
            this.$emit('success')
          })
      } else {
        XeUtils.eachTree([ this.formData ], (item) => {
          if (item.shopGroupId === data.groupPid) {
            item.childs.splice(item.childs.findIndex((i) => i.orderNumber === data.orderNumber), 1)
          }
        }, { children: 'childs' })
      }
    },
    handleAddProduct(data, node) {
      this.multipleSelection = []
      this.selectedGroupId = data.orderNumber
      this.isShowManualAdd = true
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection()
      })
    },
    handleSaveIdList() {
      XeUtils.eachTree([ this.formData ], (item) => {
        if (item.orderNumber === this.selectedGroupId) {
          if (this.multipleSelection.length) {
            item.ids = this.multipleSelection.map((i) => i.productId)
          } else {
            item.ids = []
          }
        }
      }, { children: 'childs' })
      this.isShowManualAdd = false
    },
    handleSaveIntelProductList(e) {
      XeUtils.eachTree([ this.formData ], (item) => {
        if (item.orderNumber === this.selectedGroupId) {
          item.condition = e.condition
          item.conditions = e.conditions
        }
      }, { children: 'childs' })
      this.$forceUpdate()
    },

    clearData() {
      this.listQuery = {
        maxPrice: null, // 价格最大值
        maxStock: null, // 库存数量最大值
        minPrice: null, // 价格最小值
        minStock: null, // 库存数量最小值
        page: 1, // 当前页
        pageSize: 10, // 每页记录数
        search: '' // 搜索字段
      }
      this.initList()
    },

    // 保存提交
    async handleSubmit() {
      let isGroupNameEmpty = false
      XeUtils.eachTree([ this.formData ], (item) => {
        if (!item.groupName) isGroupNameEmpty = true
      }, { children: 'childs' })
      if (isGroupNameEmpty) return this.$message({ message: '分组名称不能为空', type: 'warning' })
      let isNoProduct = false
      XeUtils.eachTree([ this.formData ], (item) => {
        if (item.selectType === 1) {
          item.conditions = []
          item.condition = null
        } else if (item.selectType === 2) {
          item.ids = []
        } else {
          isNoProduct = true
        }
      }, { children: 'childs' })
      if (isNoProduct) return this.$message({ message: '存在分组未选择分组方式', type: 'warning' })
      const loading = this.$loading({ text: '提交中，请稍候……' })
      try {
        const { ...otps } = this.formData
        const params = {
          ...otps
        }
        this.formData.shopGroupId ? await commodityListUpdate(params) : await commodityListAdd(params)
        loading.close()
        this.$message({ message: `${this.formData.shopGroupId ? '编辑' : '添加'}成功!`, type: 'success' })
        this.$emit('success')
        this.visible = false
      } catch (e) {
        loading.close()
      } finally {
        loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
	::v-deep .el-tree-node__content {
		height: auto;
	}

	.filter-container {
		.filter-item {
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
		}
	}
}

.product-dialog {
	::v-deep .el-dialog__body {
		padding: 30px 20px 0;
	}
}

.add-group-container {
	::v-deep .el-radio-button__inner {
		padding: 0;
	}
}
</style>