(╯°□°）╯︵ ┻━┻

src/views/commodity/commodityList/OldcommodityGroup.vue

@@ -0,0 +1,860 @@
+<template>
+  <div class="commodityGroup">
+    <div class="commodityBox">
+      <div class="groupTit">{{ groupData.shopGroupId ? '修改分组' : '新建分组' }}</div>
+      <div class="newGroupBox">
+        <el-form class="formBox" :model="groupData" label-width="150px" :rules="groupBuyRules">
+          <el-form-item label="分组名称" prop="groupName">
+            <div style="display: flex;">
+              <el-input
+                v-model="groupData.groupName"
+                style="width: 500px;" maxlength="20" placeholder="请输入分组名称"
+                onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
+              />
+              <!-- <el-cascader
+                v-if="groupData.shopGroupId"
+                ref="checkGroup"
+                style="margin-left: 10px;width: 500px;"
+                :value="groupId"
+                :options="groupOptions"
+                :props="{ checkStrictly: true, label: 'groupName', value: 'shopGroupId', children: 'childs', emitPath: false }"
+                clearable
+                @change="getChangeId"
+              ></el-cascader>
+              <el-button v-if="groupData.shopGroupId" style="margin-left: 20px;" type="primary" @click="dialogVisible = true">添加子分组</el-button> -->
+            </div>
+          </el-form-item>
+          <!-- <el-form-item label="子分组">
+            <div style="display: flex;">
+            <el-select placeholder="请选择">
+            <el-option
+            v-for="item in groupData.childs"
+            :key="item.shopGroupId"
+            :label="item.groupName"
+            :value="item.shopGroupId"
+            >
+            </el-option>
+            </el-select>
+            </div>
+            </el-form-item> -->
+          <el-form-item label="分组描述">
+            <el-input v-model="groupData.groupDescribe" maxlength="200" type="textarea" :rows="4" placeholder="请输入分组描述" />
+          </el-form-item>
+          <el-form-item label="分组商品">
+            <div class="btnBox">
+              <el-radio v-model="selectGroup" label="1" /><span @click="manualAdd">手动添加</span>
+              <el-radio v-model="selectGroup" label="2" /> <span @click="intelligentAdd">智能添加</span>
+            </div>
+          </el-form-item>
+          <div v-if="groupData.conditions.length !== 0 && selectGroup === '2'" class="intelDataBox">
+            <div class="intelTit">智能添加已选条件</div>
+            <div class="intelList">
+              <div v-for="(item, index) in groupData.conditions" :key="index" class="intelItem">
+                <div class="itemBox">
+                  <span v-if="item.type === 1">库存</span>
+                  <span v-if="item.type === 2">价格</span>
+                  <span v-if="item.type === 3">重量</span>
+                  <span v-if="item.type === 4">销量</span>
+                  <span v-if="item.calculation === 1">大于</span>
+                  <span v-if="item.calculation === 2">等于</span>
+                  <span v-if="item.calculation === 3">小于</span>
+                  <span>{{ item.number }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-form>
+        <div v-if="selectConditions.length === 0 && selectGroup === '1'" class="isSelectList">
+          <h3 class="isSelectTit">已选商品</h3>
+          <div class="tableBox">
+            <el-table
+              ref="multipleTable" :data="products" border
+              :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+              max-height="400"
+            >
+              <el-table-column label="产品主图" width="220" align="center">
+                <template slot-scope="scope">
+                  <img height="80" width="80" :src="scope.row.image" alt srcset>
+                </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 class="fenye">
+              <el-pagination
+                :current-page="productsPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="productsPageSize"
+                layout="total, sizes, prev, pager, next, jumper" :total="products.length" @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="submitBox">
+          <el-button type="primary" @click="addGroup('ruleForm')">提 交</el-button>
+          <el-button type="danger" @click="closeAddGroup">取 消</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 手动添加弹框 -->
+    <el-dialog
+      title="手动添加商品" :visible.sync="isShowManualAdd" width="65%" top="50px"
+      class="group-dialog"
+      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
+    >
+      <!-- 搜索 -->
+      <div class="formSearch">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="商品名称">
+            <el-input v-model="formInline.search" maxlength="20" placeholder="搜索商品名称或商品ID" />
+          </el-form-item>
+          <el-form-item class="tagCustomer" label="库存数量">
+            <el-input v-model="formInline.minStock" maxlength="9" /><span>至</span><el-input
+              v-model="formInline.maxStock"
+              maxlength="9"
+            />
+          </el-form-item>
+          <el-form-item class="tagCustomer" label="价格">
+            <el-input v-model="formInline.minPrice" maxlength="9" /><span>至</span><el-input
+              v-model="formInline.maxPrice"
+              maxlength="9"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" plain @click="search">查询</el-button>
+            <el-button plain @click="clearData">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="tableBox">
+        <el-table
+          ref="multipleTable" :data="shopListData" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+          max-height="550" @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="产品主图" width="220" align="center">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.image" alt srcset>
+            </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 class="fenye">
+          <el-pagination
+            :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="formInline.pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="shopTotal" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="saveIdList">确 定</el-button>
+            <el-button @click="closeSelect">取 消</el-button>
+          </span>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 智能添加弹框 -->
+    <el-dialog
+      title="智能添加商品" :visible.sync="isIntelligentAdd" width="50%" top="50px"
+      class="group-dialog"
+      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
+    >
+      <div class="znAddBox">
+        <div class="conditionBox">
+          <span class="anAddTit">满足条件</span>
+          <el-radio v-model="condition" label="1">全部满足</el-radio>
+          <el-radio v-model="condition" label="2">任意满足</el-radio>
+        </div>
+        <div class="screenBox">
+          <span class="anAddTit">筛选条件</span>
+          <div class="crowdOptions">
+            <div v-for="(item, index) in selectConditions" :key="item.type" class="condition">
+              <div class="flexBox">
+                <div class="rightInfo">
+                  <el-select v-model="item.type" placeholder="请选择" @change="changeType(item, index)">
+                    <el-option
+                      v-for="typeItem in options" v-show="!types.includes(typeItem.type)" :key="typeItem.type"
+                      :label="typeItem.name" :value="typeItem.type"
+                    />
+                  </el-select>
+                </div>
+                <div class="purchase">
+                  <el-select v-model="item.calculation" placeholder="请选择">
+                    <el-option
+                      v-for="calculationItem in calculationList" :key="calculationItem.value"
+                      :label="calculationItem.label" :value="calculationItem.value"
+                    />
+                  </el-select>
+                </div>
+                <div class="valueBox">
+                  <el-input v-model="item.number" maxlength="9" />
+                </div>
+                <div v-if="selectConditions.length !== 1" class="deleteIcon" @click="deleteOptions(item, index)">
+                  <i
+                    class="el-icon-remove"
+                  />
+                </div>
+              </div>
+            </div>
+            <div v-if="groupData.conditions.length !== 4" class="addCondition" @click="addCondition">
+              <i class="el-icon-circle-plus" />
+              <span>添加筛选条件</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fenye">
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="saveOptions">确 定</el-button>
+          <el-button @click="closeOptions">取 消</el-button>
+        </span>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="子分组信息"
+      width="900px"
+      append-to-body
+      :visible.sync="dialogVisible"
+      :before-close="() => dialogVisible = false"
+    >
+      <el-form class="formBox" :model="childsGroupData" label-width="150px">
+        <el-form-item label="分组名称" prop="groupName">
+          <el-input
+            v-model="childsGroupData.groupName"
+            style="width: 500px;" maxlength="20" placeholder="请输入分组名称"
+            onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
+          />
+        </el-form-item>
+        <el-form-item label="分组描述">
+          <el-input v-model="childsGroupData.groupDescribe" maxlength="200" type="textarea" :rows="4" placeholder="请输入分组描述" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addChilds">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+function GroupData() {
+  this.condition = null // 满足条件 1-全部满足 2-任意满足
+  this.conditions = [ // 筛选条件数组
+    // {
+    //   calculation: 1, // 运算符 1-大于 2-等于 3-小于
+    //   ids: [], // 已满足部分条件的商品id数组
+    //   number: null, // 数值
+    //   type: 1 // 类型 1-库存 2-价格 3-重量 4-销量
+    // }
+  ]
+  this.childs = []
+  this.groupDescribe = '' // 分组描述
+  this.groupImage = '' // 分组封面图片地址
+  this.groupName = '' // 分组名称
+  this.ids = [] // 商品id数组
+  this.shopGroupId = null // 商品分组id
+}
+import { commodityListAdd, commodityListUpdate, getGroupList, commodityListGetById } from '@/api/commodity'
+export default {
+  name: 'CommodityGroup',
+  props: {
+    groupId: {
+      type: Number,
+      default: 0
+    },
+    groupOptions: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      formInline: {
+        maxPrice: null, // 价格最大值
+        maxStock: null, // 库存数量最大值
+        minPrice: null, // 价格最小值
+        minStock: null, // 库存数量最小值
+        page: 1, // 当前页
+        pageSize: 10, // 每页记录数
+        search: '' // 搜索字段
+      },
+      groupData: new GroupData(),
+      childsGroupData: new GroupData(),
+      isShowManualAdd: false, // 手动添加弹窗
+      isIntelligentAdd: false, // 自动添加弹窗
+      shopListData: [],
+      shopTotal: 1,
+      tableData: [],
+      multipleSelection: [],
+      // 智能添加
+      condition: '1',
+      types: [ 1 ],
+      options: [
+        {
+          type: 1,
+          name: '库存'
+        },
+        {
+          type: 2,
+          name: '价格'
+        },
+        {
+          type: 3,
+          name: '重量'
+        },
+        {
+          type: 4,
+          name: '销量'
+        }
+      ],
+      calculationList: [
+        {
+          label: '大于',
+          value: 1
+        },
+        {
+          label: '等于',
+          value: 2
+        },
+        {
+          label: '小于',
+          value: 3
+        }
+      ],
+      groupBuyRules: {
+        groupName: [
+          { required: true, message: '请输入分组名称', trigger: 'blur' }
+        ]
+      },
+      products: [], // 确定已选商品
+      productsPage: 1,
+      productsPageSize: 5,
+      selectConditions: [], // 当前选择筛选条件
+      // 分组选择
+      selectGroup: '1',
+      // 已选智能筛选条件
+      intelData: []
+    }
+  },
+  watch: {
+    groupId: {
+      handler(nVal, oVal) {
+        if (!nVal) {
+          this.groupData = new GroupData()
+          this.products = []
+          this.multipleSelection = []
+        } else {
+          this.groupData.shopGroupId = nVal
+          this.getDetailFn()
+        }
+      }
+    }
+  },
+  mounted() {
+    // if (this.$route.query.shopGroupId) {
+    //   this.groupData.shopGroupId = this.$route.query.shopGroupId
+    //   this.getDetailFn()
+    // }
+    if (this.groupId) {
+      this.groupData.shopGroupId = this.groupId
+      this.getDetailFn()
+    }
+    this.getAll(this.formInline)
+  },
+  methods: {
+    // 初始化查询所有数据
+    async getAll(formInline) {
+      const res = await getGroupList(formInline)
+      this.shopTotal = res.data.total
+      this.shopListData = res.data.list
+    },
+    // 获取详情
+    getDetailFn() {
+      commodityListGetById({ shopGroupId: this.groupData.shopGroupId }).then((res) => {
+        if (res.code === '') {
+          this.groupData.groupDescribe = res.data.groupDescribe
+          this.groupData.groupName = res.data.groupName
+          this.multipleSelection = res.data.products
+          this.products = res.data.products
+          const shopList = []
+          this.products.forEach((i) => {
+            shopList.push(i.productId)
+          })
+          this.groupData.ids = shopList
+          this.groupData.shopGroupId = res.data.shopGroupId
+        } else {
+          this.$message({
+            message: res.message,
+            type: 'error'
+          })
+        }
+      })
+    },
+    manualAdd() {
+      this.selectGroup = '1'
+      // this.groupData.conditions = []
+      // this.groupData.condition = null
+      this.isShowManualAdd = true
+    },
+    // 商品表格多选
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+      this.groupData.ids = []
+    },
+    // 分页大小
+    handleSizeChange(val) {
+      this.formInline.pageSize = val
+      this.getAll(this.formInline)
+    },
+    // 分页
+    handleCurrentChange(val) {
+      this.formInline.page = val
+      this.getAll(this.formInline)
+    },
+    intelligentAdd() {
+      this.selectGroup = '2'
+      if (this.selectConditions.length === 0) {
+        this.selectConditions.push({
+          calculation: 1, // 运算符 1-大于 2-等于 3-小于
+          ids: [], // 已满足部分条件的商品id数组
+          number: null, // 数值
+          type: 1 // 类型 1-库存 2-价格 3-重量 4-销量
+        })
+      }
+      // this.groupData.ids = []
+      // if (this.multipleSelection.length) {
+      //   this.$refs.multipleTable.clearSelection() // 清空已手动添加的商品
+      // }
+      // this.products = []
+      // this.multipleSelection = []
+      this.groupData.condition = 1
+      this.isIntelligentAdd = true
+    },
+    // 保存手动选择商品
+    saveIdList() {
+      if (this.multipleSelection.length === 0) {
+        this.groupData.ids = []
+      }
+      const shopList = []
+      this.products = this.multipleSelection
+      this.multipleSelection.forEach((i) => {
+        shopList.push(i.productId)
+      })
+      this.groupData.ids = shopList
+      this.isShowManualAdd = false
+    },
+    // 取消手动选择商品
+    closeSelect() {
+      this.isShowManualAdd = false
+    },
+    // 更改当前选项
+    changeType(item, index) {
+      var crowdData = this.groupData.conditions
+      this.types = []
+      crowdData.forEach((i) => {
+        this.types.push(i.type)
+      })
+      if (item.type === 9 || item.type === 10) {
+        this.groupData.conditions[index].calculation = 1
+      }
+    },
+    // 删除当前筛选
+    deleteOptions(item, index) {
+      this.types.splice(index, 1)
+      this.selectConditions.splice(index, 1)
+    },
+    // 保存智能匹配配置
+    saveOptions() {
+      var self = this
+      var groupCond = self.selectConditions
+      var options = self.options
+      for (let i = 0; i < groupCond.length; i++) {
+        if (groupCond[i].number === null || groupCond[i].number === '') {
+          for (let j = 0; j < options.length; j++) {
+            if (groupCond[i].type === options[j].type) {
+              self.$message({
+                message: `选项为${options[j].name}的内容不能为空!`,
+                type: 'warning'
+              })
+              return false
+            }
+          }
+        }
+      }
+      self.groupData.conditions = self.deepClone(self.selectConditions)
+      self.isIntelligentAdd = false
+    },
+    // 保存提交
+    addGroup() {
+      var self = this
+      if (self.groupData.groupName === '') {
+        self.$message({
+          message: '分组名称不能为空',
+          type: 'warning'
+        })
+        return false
+      }
+      // if (self.selectGroup === '1') {
+      //   if (self.groupData.ids.length === 0) {
+      //     self.$message({
+      //       message: '请选择手动添加分组商品',
+      //       type: 'warning'
+      //     })
+      //     return false
+      //   }
+      // }
+      // if (self.selectGroup === '2') {
+      //   if (self.groupData.conditions.length === 0) {
+      //     self.$message({
+      //       message: '请添加智能筛选条件',
+      //       type: 'warning'
+      //     })
+      //   }
+      // }
+      if (self.selectGroup === '1') {
+        self.groupData.conditions = []
+        self.groupData.condition = null
+      } else {
+        self.groupData.ids = []
+        self.products = []
+        self.multipleSelection = []
+      }
+      if (self.groupData.shopGroupId !== '' && self.groupData.shopGroupId !== null) {
+        // 修改人群
+        commodityListUpdate(self.groupData).then((res) => {
+          if (res.code === '') {
+            this.closeAddGroup()
+            self.$message({
+              message: '修改成功',
+              type: 'success'
+            })
+            self.$emit('reload')
+          } else {
+            self.$message({
+              message: res.message,
+              type: 'error'
+            })
+          }
+        })
+      } else {
+        // 新增人群
+        commodityListAdd(self.groupData).then((res) => {
+          if (res.code === '') {
+            this.closeAddGroup()
+            self.$message({
+              message: '添加成功',
+              type: 'success'
+            })
+            self.$emit('reload')
+          } else {
+            self.$message({
+              message: res.message,
+              type: 'error'
+            })
+          }
+        })
+      }
+    },
+    // 取消提交
+    closeAddGroup() {
+      this.$emit('cancel')
+    },
+    // 取消智能匹配配置
+    closeOptions() {
+      this.isIntelligentAdd = false
+      this.selectConditions = []
+    },
+    // 添加筛选
+    addCondition() {
+      for (let i = 1; i <= this.options.length; i++) {
+        if (!this.types.includes(i)) {
+          this.selectConditions.push({
+            calculation: 1, // 运算符 1-大于 2-等于 3-小于
+            ids: [], // 已满足部分条件的商品id数组
+            number: null, // 数值
+            type: i // 类型 1-库存 2-价格 3-重量 4-销量
+          })
+          this.types.push(i)
+          break
+        }
+      }
+    },
+    // 手动查询商品
+    search() {
+      this.getAll(this.formInline)
+    },
+    clearData() {
+      this.formInline = {
+        maxPrice: null, // 价格最大值
+        maxStock: null, // 库存数量最大值
+        minPrice: null, // 价格最小值
+        minStock: null, // 库存数量最小值
+        page: 1, // 当前页
+        pageSize: 10, // 每页记录数
+        search: '' // 搜索字段
+      }
+      this.getAll(this.formInline)
+    },
+    deepClone(obj) {
+      var _obj = JSON.stringify(obj)
+      var objClone = JSON.parse(_obj)
+      return objClone
+    },
+    getChangeId(node) {
+      // eslint-disable-next-line vue/custom-event-name-casing, vue/require-explicit-emits
+      this.$emit('changeId', node)
+    },
+    addChilds(e) {
+      // eslint-disable-next-line eqeqeq
+      // const arr = this.groupOptions.filter((item, index) => item.shopGroupId == this.groupId)
+      this.groupData.childs.push(this.childsGroupData)
+      this.addGroup()
+      this.dialogVisible = false
+      // this.$refs.checkGroup.toggleDropDownVisible()
+      // console.log(this.groupOptions)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.commodityGroup {
+	.commodityBox {
+		background: #FFFFFF;
+
+		.groupTit {
+			font-size: 22px;
+			color: #333333;
+			font-weight: 500;
+		}
+
+		.newGroupBox {
+			width: 800px;
+			margin: 20px;
+
+			.btnBox {
+				display: flex;
+				align-items: center;
+				margin-left: 10px;
+
+				span {
+					display: block;
+					width: 80px;
+					height: 35px;
+					line-height: 35px;
+					background: #409EFF;
+					color: #FFFFFF;
+					font-size: 12px;
+					text-align: center;
+					border-radius: 4px;
+					margin-right: 20px;
+					cursor: pointer;
+					position: relative;
+				}
+
+				i {
+					display: block;
+					font-style: normal;
+					font-size: 12px;
+					color: #409EFF;
+					width: 30px;
+					height: 30px;
+					text-align: center;
+					line-height: 30px;
+					border: 1px solid #409EFF;
+					border-radius: 50%;
+					position: absolute;
+					right: -10px;
+					top: -10px;
+					z-index: 999;
+					background: #FFFFFF;
+				}
+			}
+		}
+	}
+
+	.submitBox {
+		width: 100%;
+		margin: 20px 0;
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.isSelectList {
+		h3 {
+			font-size: 14px;
+			color: #666666;
+			font-weight: 500;
+			margin: 30px 0 20px 0;
+		}
+	}
+}
+
+.znAddBox {
+	padding: 30px 30px 0 30px;
+
+	.screenBox {
+		display: flex;
+		margin-top: 30px;
+
+		.crowdOptions {
+			margin-left: 20px;
+		}
+	}
+
+	.condition {
+		margin-bottom: 20px;
+
+		p {
+			font-size: 14px;
+			color: #666666;
+			margin-left: 100px;
+		}
+
+		.flexBox {
+			display: flex;
+			align-items: center;
+
+			.leftTit {
+				width: 100px;
+				text-align: right;
+				font-size: 14px;
+				color: #606260;
+				font-weight: 700;
+				padding-right: 12px;
+			}
+
+			.purchase {
+				margin-left: 30px;
+			}
+
+			.tagList {
+				margin-left: 30px;
+			}
+
+			.valueBox {
+				display: flex;
+				align-items: center;
+				margin-left: 30px;
+			}
+
+			.deleteIcon {
+				margin-left: 30px;
+
+				.el-icon-remove:before {
+					color: #ff5c5c;
+					font-size: 22px;
+					cursor: pointer;
+				}
+			}
+		}
+	}
+}
+
+.addCondition {
+	margin: 50px 0 0 0;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	width: 160px;
+
+	.el-icon-circle-plus:before {
+		font-size: 24px;
+		color: #999999;
+	}
+
+	span {
+		margin-left: 10px;
+	}
+}
+
+.intelDataBox {
+	width: 200px;
+	margin: 60px 0 0 150px;
+
+	.intelTit {
+		font-size: 14px;
+		color: #666666;
+		font-weight: 500;
+	}
+
+	.intelList {
+		margin-top: 20px;
+		border: 1px solid #eeeeee;
+
+		.intelItem {
+			display: flex;
+			align-items: center;
+			background: #fdfdfd;
+			height: 35px;
+			line-height: 35px;
+			border-bottom: 1px solid #eeeeee;
+			padding-left: 20px;
+
+			span {
+				font-size: 13px;
+				color: #666666;
+				font-weight: 600;
+			}
+		}
+	}
+}
+</style>
+
+<style scoped>
+.newGroupBox /deep/ .formBox {
+	width: 500px;
+}
+
+/*.group-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {*/
+/*  color: #FFFFFF;*/
+/*}*/
+.fenye {
+	margin-top: 30px;
+}
+
+.fenye /deep/ .dialog-footer {
+	margin: 30px auto 0 auto;
+	display: flex;
+	justify-content: center;
+}
+
+.znAddBox /deep/ .conditionBox {
+	display: flex;
+	align-items: center;
+}
+
+.znAddBox /deep/ .conditionBox .anAddTit {
+	margin-right: 20px;
+}
+
+.tagCustomer /deep/ .el-form-item__content {
+	display: flex;
+	width: 260px;
+}
+
+.tagCustomer {
+	display: flex !important;
+}
+
+.tagCustomer /deep/ .el-form-item__content span {
+	margin: 0 5px;
+}
+
+.formSearch /deep/ .el-form {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.btnBox /deep/ .el-radio {
+	margin-right: 8px;
+}
+
+.btnBox /deep/ .el-radio__label {
+	display: none;
+}
+</style>

src/views/commodity/commodityList/commodityGroup.vue

@@ -1,73 +1,72 @@
 <template>
-  <div class="commodityGroup">
-    <div class="commodityBox">
-      <div class="groupTit">{{ groupData.shopGroupId ? '修改分组' : '新建分组' }}</div>
-      <div class="newGroupBox">
-        <el-form class="formBox" :model="groupData" label-width="150px" :rules="groupBuyRules">
-          <el-form-item label="分组名称" prop="groupName">
+  <div class="add-dialog-component">
+    <el-tree
+      class="tree-box" :data="dataGroup" :props="{ children: 'childs' }" node-key="id"
+      default-expand-all draggable
+      :expand-on-click-node="false"
+    >
+      <div slot-scope="{ node, data }" class="custom-tree-node">
+        <div class="content">
+          <template v-if="data.depth < 3">
             <el-input
-              v-model="groupData.groupName" maxlength="20" placeholder="请输入分组名称"
-              onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
+              v-model="data.groupName" class="input nameInput" maxlength="10"
+              size="mini"
+              :placeholder="getDepth(data.depth, true)"
             />
-          </el-form-item>
-          <el-form-item label="分组描述">
-            <el-input v-model="groupData.groupDescribe" maxlength="200" type="textarea" :rows="4" placeholder="请输入分组描述" />
-          </el-form-item>
-          <el-form-item label="分组商品">
-            <div class="btnBox">
-              <el-radio v-model="selectGroup" label="1" /><span @click="manualAdd">手动添加</span>
-              <el-radio v-model="selectGroup" label="2" /> <span @click="intelligentAdd">智能添加</span>
-            </div>
-          </el-form-item>
-          <div v-if="groupData.conditions.length !== 0 && selectGroup === '2'" class="intelDataBox">
-            <div class="intelTit">智能添加已选条件</div>
-            <div class="intelList">
-              <div v-for="(item, index) in groupData.conditions" :key="index" class="intelItem">
-                <div class="itemBox">
-                  <span v-if="item.type === 1">库存</span>
-                  <span v-if="item.type === 2">价格</span>
-                  <span v-if="item.type === 3">重量</span>
-                  <span v-if="item.type === 4">销量</span>
-                  <span v-if="item.calculation === 1">大于</span>
-                  <span v-if="item.calculation === 2">等于</span>
-                  <span v-if="item.calculation === 3">小于</span>
-                  <span>{{ item.number }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </el-form>
-        <div v-if="selectConditions.length === 0 && selectGroup === '1'" class="isSelectList">
-          <h3 class="isSelectTit">已选商品</h3>
-          <div class="tableBox">
-            <el-table
-              ref="multipleTable" :data="products" border
-              :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-              max-height="400"
-            >
-              <el-table-column label="产品主图" width="220" align="center">
-                <template slot-scope="scope">
-                  <img height="80" width="80" :src="scope.row.image" alt srcset>
-                </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 class="fenye">
-              <el-pagination
-                :current-page="productsPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="productsPageSize"
-                layout="total, sizes, prev, pager, next, jumper" :total="products.length" @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
+            <el-input
+              v-model="data.groupDescribe" class="input"
+              size="mini"
+              placeholder="请输入分组描述"
+            />
+          </template>
+          <template v-else>
+            <div class="content" :class="isCheck ? 'disabled' : ''">
+              <el-input
+                v-model="data.groupName" class="input nameInput" size="mini"
+                maxlength="10"
+                placeholder="输入三级分组名称（最大10个字符）"
+              />
+              <el-input
+                v-model="data.groupDescribe" class="input"
+                size="mini"
+                placeholder="请输入分组描述"
               />
             </div>
-          </div>
+          </template>
         </div>
-        <div class="submitBox">
-          <el-button type="primary" @click="addGroup('ruleForm')">提 交</el-button>
-          <el-button type="danger" @click="closeAddGroup">取 消</el-button>
+        <div v-if="!isCheck" class="setting-box">
+          <el-button type="text" size="mini">
+            分组商品详情
+          </el-button>
+          <el-button type="text" size="mini" @click="manualAdd(node, data)">
+            添加分组分组商品
+          </el-button>
+          <el-button type="text" size="mini" @click="append(data)">
+            {{ getDepth(data.depth) }}
+          </el-button>
+          <el-button type="text" size="mini" @click="remove(node, data)">
+            删除
+          </el-button>
         </div>
       </div>
+    </el-tree>
+    <div class="add-btn-wrap">
+      <template v-if="isCheck">
+        <el-button class="add" type="primary" size="small">
+          确定
+        </el-button>
+      </template>
+      <template v-else>
+        <!-- <el-button v-if="type === 'add'" class="add" type="primary" size="small" @click="addClassification">
+          添加一级分组名称
+          </el-button> -->
+        <el-button type="primary" size="small" @click="addGroup('ruleForm')">
+          保存
+        </el-button>
+        <el-button type="danger" size="small" @click="closeAddGroup">
+          取消
+        </el-button>
+      </template>
     </div>
     <!-- 手动添加弹框 -->
     <el-dialog
@@ -128,69 +127,15 @@
         </div>
       </div>
     </el-dialog>
-    <!-- 智能添加弹框 -->
-    <el-dialog
-      title="智能添加商品" :visible.sync="isIntelligentAdd" width="50%" top="50px"
-      class="group-dialog"
-      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
-    >
-      <div class="znAddBox">
-        <div class="conditionBox">
-          <span class="anAddTit">满足条件</span>
-          <el-radio v-model="condition" label="1">全部满足</el-radio>
-          <el-radio v-model="condition" label="2">任意满足</el-radio>
-        </div>
-        <div class="screenBox">
-          <span class="anAddTit">筛选条件</span>
-          <div class="crowdOptions">
-            <div v-for="(item, index) in selectConditions" :key="item.type" class="condition">
-              <div class="flexBox">
-                <div class="rightInfo">
-                  <el-select v-model="item.type" placeholder="请选择" @change="changeType(item, index)">
-                    <el-option
-                      v-for="typeItem in options" v-show="!types.includes(typeItem.type)" :key="typeItem.type"
-                      :label="typeItem.name" :value="typeItem.type"
-                    />
-                  </el-select>
-                </div>
-                <div class="purchase">
-                  <el-select v-model="item.calculation" placeholder="请选择">
-                    <el-option
-                      v-for="calculationItem in calculationList" :key="calculationItem.value"
-                      :label="calculationItem.label" :value="calculationItem.value"
-                    />
-                  </el-select>
-                </div>
-                <div class="valueBox">
-                  <el-input v-model="item.number" maxlength="9" />
-                </div>
-                <div v-if="selectConditions.length !== 1" class="deleteIcon" @click="deleteOptions(item, index)">
-                  <i
-                    class="el-icon-remove"
-                  />
-                </div>
-              </div>
-            </div>
-            <div v-if="groupData.conditions.length !== 4" class="addCondition" @click="addCondition">
-              <i class="el-icon-circle-plus" />
-              <span>添加筛选条件</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="fenye">
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="saveOptions">确 定</el-button>
-          <el-button @click="closeOptions">取 消</el-button>
-        </span>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-function GroupData() {
+let idx = 1000
+function GroupData(data) {
   this.condition = null // 满足条件 1-全部满足 2-任意满足
+  this.depth = data.depth
+  this.idx = idx++
   this.conditions = [ // 筛选条件数组
     // {
     //   calculation: 1, // 运算符 1-大于 2-等于 3-小于
@@ -199,6 +144,7 @@ function GroupData() {
     //   type: 1 // 类型 1-库存 2-价格 3-重量 4-销量
     // }
   ]
+  this.childs = [] // 子集分组
   this.groupDescribe = '' // 分组描述
   this.groupImage = '' // 分组封面图片地址
   this.groupName = '' // 分组名称
@@ -207,8 +153,13 @@ function GroupData() {
 }
 import { commodityListAdd, commodityListUpdate, getGroupList, commodityListGetById } from '@/api/commodity'
 export default {
-  name: 'CommodityGroup',
+  // eslint-disable-next-line vue/component-definition-name-casing, vue/match-component-file-name
+  name: 'commodityGroup',
   props: {
+    type: {
+      type: String,
+      default: 'create'
+    },
     groupId: {
       type: Number,
       default: 0
@@ -216,6 +167,13 @@ export default {
   },
   data() {
     return {
+      // isVisible: false,
+      // title: ['新增分组', '编辑分组'],
+      dataGroup: [ new GroupData({ depth: 1 }) ],
+      isCheck: false,
+      deleteArr: [],
+      selectGroup: 1,
+      isShowManualAdd: false, // 手动添加商品模态框
       formInline: {
         maxPrice: null, // 价格最大值
         maxStock: null, // 库存数量最大值
@@ -225,72 +183,24 @@ export default {
         pageSize: 10, // 每页记录数
         search: '' // 搜索字段
       },
-      groupData: new GroupData(),
-      isShowManualAdd: false, // 手动添加弹窗
-      isIntelligentAdd: false, // 自动添加弹窗
-      shopListData: [],
-      shopTotal: 1,
-      tableData: [],
       multipleSelection: [],
-      // 智能添加
-      condition: '1',
-      types: [ 1 ],
-      options: [
-        {
-          type: 1,
-          name: '库存'
-        },
-        {
-          type: 2,
-          name: '价格'
-        },
-        {
-          type: 3,
-          name: '重量'
-        },
-        {
-          type: 4,
-          name: '销量'
-        }
-      ],
-      calculationList: [
-        {
-          label: '大于',
-          value: 1
-        },
-        {
-          label: '等于',
-          value: 2
-        },
-        {
-          label: '小于',
-          value: 3
-        }
-      ],
-      groupBuyRules: {
-        groupName: [
-          { required: true, message: '请输入分组名称', trigger: 'blur' }
-        ]
-      },
-      products: [], // 确定已选商品
-      productsPage: 1,
-      productsPageSize: 5,
-      selectConditions: [], // 当前选择筛选条件
-      // 分组选择
-      selectGroup: '1',
-      // 已选智能筛选条件
-      intelData: []
+      products: [], // 已确认商品
+      shopTotal: 1,
+      shopListData: [],
+      idsData: null
     }
   },
   watch: {
     groupId: {
       handler(nVal, oVal) {
+        // console.log(nVal, oVal)
         if (!nVal) {
-          this.groupData = new GroupData()
+          this.$set(this.dataGroup, '0', new GroupData({ depth: 1 }))
+          // this.dataGroup[0] = new GroupData({ depth: 1 })
           this.products = []
           this.multipleSelection = []
         } else {
-          this.groupData.shopGroupId = nVal
+          this.dataGroup[0].shopGroupId = nVal
           this.getDetailFn()
         }
       }
@@ -302,7 +212,7 @@ export default {
     //   this.getDetailFn()
     // }
     if (this.groupId) {
-      this.groupData.shopGroupId = this.groupId
+      this.dataGroup[0].shopGroupId = this.groupId
       this.getDetailFn()
     }
     this.getAll(this.formInline)
@@ -314,20 +224,21 @@ export default {
       this.shopTotal = res.data.total
       this.shopListData = res.data.list
     },
-    // 获取详情
     getDetailFn() {
-      commodityListGetById({ shopGroupId: this.groupData.shopGroupId }).then((res) => {
+      commodityListGetById({ shopGroupId: this.dataGroup[0].shopGroupId }).then((res) => {
         if (res.code === '') {
-          this.groupData.groupDescribe = res.data.groupDescribe
-          this.groupData.groupName = res.data.groupName
+          // this.dataGroup[0].groupDescribe = res.data.groupDescribe
+          // this.dataGroup[0].groupName = res.data.groupName
           this.multipleSelection = res.data.products
           this.products = res.data.products
           const shopList = []
           this.products.forEach((i) => {
             shopList.push(i.productId)
           })
-          this.groupData.ids = shopList
-          this.groupData.shopGroupId = res.data.shopGroupId
+          // this.dataGroup[0].ids = shopList
+          // this.dataGroup[0].shopGroupId = res.data.shopGroupId
+          this.$set(this.dataGroup, '0', res.data)
+          console.log(this.dataGroup)
         } else {
           this.$message({
             message: res.message,
@@ -336,16 +247,81 @@ export default {
         }
       })
     },
-    manualAdd() {
+    getDepth(depth, isPlaceholder = false) {
+      // depth = depth + ''
+      const tipsMp = {
+        1: '添加二级分组名称',
+        2: '添加三级分组名称'
+      }
+      const tipsPlaceholder = {
+        1: '输入一级分组名称（最大6个字符）',
+        2: '输入二级分组名称（最大6个字符）'
+      }
+      if (isPlaceholder) {
+        return tipsPlaceholder[depth]
+      }
+      return tipsMp[depth]
+    },
+    addClassification() {
+      this.dataGroup.push(new GroupData({ depth: 1 }))
+      // console.log(this.dataGroup)
+    },
+    append(data) {
+      console.log(data)
+      const depth = data.depth + 1
+      let newChild
+      if (!data.childs) {
+        this.$set(data, 'childs', [])
+      }
+      if (depth < 3) {
+        newChild = new GroupData({ depth })
+      } else {
+        newChild = new GroupData({ depth: 3 })
+      }
+      data.childs.push(newChild)
+      console.log(this.dataGroup)
+    },
+    remove(node, data) {
+      // console.log(node, data)
+      const parent = node.parent
+      const children = parent.data.childs || parent.data
+      const index = children.findIndex((d) => d.idx === data.idx)
+      if (index !== -1) {
+        children.splice(index, 1)
+        this.deleteArr.push(data.id || '')
+      } else {
+        this.$message.warning('数据错误，请重试')
+      }
+    },
+    manualAdd(node, data) {
+      // console.log(node)
+      // console.log(data)
+      this.idsData = data
       this.selectGroup = '1'
       // this.groupData.conditions = []
       // this.groupData.condition = null
       this.isShowManualAdd = true
     },
+    // 手动查询商品
+    search() {
+      this.getAll(this.formInline)
+    },
+    clearData() {
+      this.formInline = {
+        maxPrice: null, // 价格最大值
+        maxStock: null, // 库存数量最大值
+        minPrice: null, // 价格最小值
+        minStock: null, // 库存数量最小值
+        page: 1, // 当前页
+        pageSize: 10, // 每页记录数
+        search: '' // 搜索字段
+      }
+      this.getAll(this.formInline)
+    },
     // 商品表格多选
     handleSelectionChange(val) {
       this.multipleSelection = val
-      this.groupData.ids = []
+      this.dataGroup[0].ids = []
     },
     // 分页大小
     handleSizeChange(val) {
@@ -357,83 +333,28 @@ export default {
       this.formInline.page = val
       this.getAll(this.formInline)
     },
-    intelligentAdd() {
-      this.selectGroup = '2'
-      if (this.selectConditions.length === 0) {
-        this.selectConditions.push({
-          calculation: 1, // 运算符 1-大于 2-等于 3-小于
-          ids: [], // 已满足部分条件的商品id数组
-          number: null, // 数值
-          type: 1 // 类型 1-库存 2-价格 3-重量 4-销量
-        })
-      }
-      // this.groupData.ids = []
-      // if (this.multipleSelection.length) {
-      //   this.$refs.multipleTable.clearSelection() // 清空已手动添加的商品
-      // }
-      // this.products = []
-      // this.multipleSelection = []
-      this.groupData.condition = 1
-      this.isIntelligentAdd = true
-    },
     // 保存手动选择商品
     saveIdList() {
       if (this.multipleSelection.length === 0) {
-        this.groupData.ids = []
+        this.idsData.ids = []
       }
       const shopList = []
       this.products = this.multipleSelection
       this.multipleSelection.forEach((i) => {
         shopList.push(i.productId)
       })
-      this.groupData.ids = shopList
+      this.idsData.ids = shopList
       this.isShowManualAdd = false
+      console.log(this.dataGroup)
     },
     // 取消手动选择商品
     closeSelect() {
       this.isShowManualAdd = false
     },
-    // 更改当前选项
-    changeType(item, index) {
-      var crowdData = this.groupData.conditions
-      this.types = []
-      crowdData.forEach((i) => {
-        this.types.push(i.type)
-      })
-      if (item.type === 9 || item.type === 10) {
-        this.groupData.conditions[index].calculation = 1
-      }
-    },
-    // 删除当前筛选
-    deleteOptions(item, index) {
-      this.types.splice(index, 1)
-      this.selectConditions.splice(index, 1)
-    },
-    // 保存智能匹配配置
-    saveOptions() {
-      var self = this
-      var groupCond = self.selectConditions
-      var options = self.options
-      for (let i = 0; i < groupCond.length; i++) {
-        if (groupCond[i].number === null || groupCond[i].number === '') {
-          for (let j = 0; j < options.length; j++) {
-            if (groupCond[i].type === options[j].type) {
-              self.$message({
-                message: `选项为${options[j].name}的内容不能为空!`,
-                type: 'warning'
-              })
-              return false
-            }
-          }
-        }
-      }
-      self.groupData.conditions = self.deepClone(self.selectConditions)
-      self.isIntelligentAdd = false
-    },
     // 保存提交
     addGroup() {
       var self = this
-      if (self.groupData.groupName === '') {
+      if (self.dataGroup[0].groupName === '') {
         self.$message({
           message: '分组名称不能为空',
           type: 'warning'
@@ -458,16 +379,16 @@ export default {
       //   }
       // }
       if (self.selectGroup === '1') {
-        self.groupData.conditions = []
-        self.groupData.condition = null
+        self.dataGroup[0].conditions = []
+        self.dataGroup[0].condition = null
       } else {
-        self.groupData.ids = []
+        self.dataGroup[0].ids = []
         self.products = []
         self.multipleSelection = []
       }
-      if (self.groupData.shopGroupId !== '' && self.groupData.shopGroupId !== null) {
+      if (self.dataGroup[0].shopGroupId !== '' && self.dataGroup[0].shopGroupId !== null) {
         // 修改人群
-        commodityListUpdate(self.groupData).then((res) => {
+        commodityListUpdate(self.dataGroup[0]).then((res) => {
           if (res.code === '') {
             this.closeAddGroup()
             self.$message({
@@ -484,7 +405,7 @@ export default {
         })
       } else {
         // 新增人群
-        commodityListAdd(self.groupData).then((res) => {
+        commodityListAdd(self.dataGroup[0]).then((res) => {
           if (res.code === '') {
             this.closeAddGroup()
             self.$message({
@@ -504,233 +425,115 @@ export default {
     // 取消提交
     closeAddGroup() {
       this.$emit('cancel')
-    },
-    // 取消智能匹配配置
-    closeOptions() {
-      this.isIntelligentAdd = false
-      this.selectConditions = []
-    },
-    // 添加筛选
-    addCondition() {
-      for (let i = 1; i <= this.options.length; i++) {
-        if (!this.types.includes(i)) {
-          this.selectConditions.push({
-            calculation: 1, // 运算符 1-大于 2-等于 3-小于
-            ids: [], // 已满足部分条件的商品id数组
-            number: null, // 数值
-            type: i // 类型 1-库存 2-价格 3-重量 4-销量
-          })
-          this.types.push(i)
-          break
-        }
-      }
-    },
-    // 手动查询商品
-    search() {
-      this.getAll(this.formInline)
-    },
-    clearData() {
-      this.formInline = {
-        maxPrice: null, // 价格最大值
-        maxStock: null, // 库存数量最大值
-        minPrice: null, // 价格最小值
-        minStock: null, // 库存数量最小值
-        page: 1, // 当前页
-        pageSize: 10, // 每页记录数
-        search: '' // 搜索字段
-      }
-      this.getAll(this.formInline)
-    },
-    deepClone(obj) {
-      var _obj = JSON.stringify(obj)
-      var objClone = JSON.parse(_obj)
-      return objClone
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.commodityGroup {
-	.commodityBox {
-		background: #FFFFFF;
-
-		.groupTit {
-			font-size: 22px;
-			color: #333333;
-			font-weight: 500;
-		}
-
-		.newGroupBox {
-			width: 800px;
-			margin: 20px;
-
-			.btnBox {
-				display: flex;
-				align-items: center;
-				margin-left: 10px;
-
-				span {
-					display: block;
-					width: 80px;
-					height: 35px;
-					line-height: 35px;
-					background: #409EFF;
-					color: #FFFFFF;
-					font-size: 12px;
-					text-align: center;
-					border-radius: 4px;
-					margin-right: 20px;
-					cursor: pointer;
-					position: relative;
-				}
-
-				i {
-					display: block;
-					font-style: normal;
-					font-size: 12px;
-					color: #409EFF;
-					width: 30px;
-					height: 30px;
-					text-align: center;
-					line-height: 30px;
-					border: 1px solid #409EFF;
-					border-radius: 50%;
-					position: absolute;
-					right: -10px;
-					top: -10px;
-					z-index: 999;
-					background: #FFFFFF;
-				}
-			}
+<style lang="scss">
+.add-dialog-component {
+	.tree-box {
+		.el-tree-node__content {
+			margin-bottom: 15px;
+			height: auto;
 		}
 	}
+}
+</style>
 
-	.submitBox {
-		width: 100%;
-		margin: 20px 0;
-		display: flex;
-		justify-content: space-around;
-	}
+<style lang="scss" scoped>
+@import url("../../../styles/elDialog.scss");
 
-	.isSelectList {
-		h3 {
-			font-size: 14px;
-			color: #666666;
-			font-weight: 500;
-			margin: 30px 0 20px 0;
-		}
+.group-dialog {
+	.el-dialog {
+		min-width: 500px;
+		max-width: 600px;
 	}
 }
 
-.znAddBox {
-	padding: 30px 30px 0 30px;
+.add-dialog-component {
+	padding: 15px 20px;
+	max-height: 60vh;
+	overflow: auto;
 
-	.screenBox {
-		display: flex;
-		margin-top: 30px;
-
-		.crowdOptions {
-			margin-left: 20px;
+	.el-tree-node__content {
+		&:hover {
+			background-color: #fff;
 		}
 	}
 
-	.condition {
-		margin-bottom: 20px;
-
-		p {
-			font-size: 14px;
-			color: #666666;
-			margin-left: 100px;
-		}
+	.tree-box {
+		margin: 15px 0;
 
-		.flexBox {
+		.custom-tree-node {
 			display: flex;
-			align-items: center;
+			width: 100%;
+			text-align: left;
 
-			.leftTit {
-				width: 100px;
-				text-align: right;
-				font-size: 14px;
-				color: #606260;
-				font-weight: 700;
-				padding-right: 12px;
-			}
+			.content {
+				flex: 1;
+				display: flex;
+				align-items: center;
 
-			.purchase {
-				margin-left: 30px;
-			}
+				.input {
+					width: 60%;
+					margin-right: 20px;
+				}
+        .nameInput {
+          width: 30%;
+        }
+
+				.textarea-input {
+					width: 100%;
+					margin-left: 15px;
 
-			.tagList {
-				margin-left: 30px;
+					textarea {
+						height: 80px;
+					}
+				}
 			}
 
-			.valueBox {
+			.level-3-wrap {
 				display: flex;
-				align-items: center;
-				margin-left: 30px;
-			}
+				width: 300px;
 
-			.deleteIcon {
-				margin-left: 30px;
+				.upload-wrap {
+					position: relative;
 
-				.el-icon-remove:before {
-					color: #ff5c5c;
-					font-size: 22px;
-					cursor: pointer;
+					&.disabled::after {
+						content: "";
+						position: absolute;
+						left: 0;
+						right: 0;
+						top: 0;
+						bottom: 0;
+						z-index: 999;
+						background-color: #f5f7fa;
+						opacity: 0.5;
+					}
+
+					.el-upload {
+						border: 1px dashed #d9d9d9;
+					}
+
+					i {}
+
+					img {
+						width: 80px;
+						height: 80px;
+					}
 				}
 			}
 		}
 	}
-}
 
-.addCondition {
-	margin: 50px 0 0 0;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-	width: 160px;
-
-	.el-icon-circle-plus:before {
-		font-size: 24px;
-		color: #999999;
-	}
-
-	span {
-		margin-left: 10px;
+	.add-btn-wrap {
+		text-align: center;
 	}
 }
 
-.intelDataBox {
-	width: 200px;
-	margin: 60px 0 0 150px;
-
-	.intelTit {
-		font-size: 14px;
-		color: #666666;
-		font-weight: 500;
-	}
-
-	.intelList {
-		margin-top: 20px;
-		border: 1px solid #eeeeee;
-
-		.intelItem {
-			display: flex;
-			align-items: center;
-			background: #fdfdfd;
-			height: 35px;
-			line-height: 35px;
-			border-bottom: 1px solid #eeeeee;
-			padding-left: 20px;
-
-			span {
-				font-size: 13px;
-				color: #666666;
-				font-weight: 600;
-			}
-		}
-	}
+.upload-uploader {
+	margin-left: 30px;
 }
 </style>
 

src/views/commodity/commodityList/cpns/selectShop.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectShop'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/commodity/commodityList/index.vue

@@ -78,9 +78,13 @@
         </el-form-item>
       </el-form>
     </el-dialog>
-
-    <el-dialog title="活动报名" :visible.sync="commidyVisible" width="900px" center top="10vh" :close-on-click-modal="false">
-      <CommGroup :group-id="shopGroupId" @cancel="commidyVisible = false" @reload="search" />
+    <!-- <el-dialog
+      :close-on-click-modal="false" title="分组管理" :visible.sync="commidyVisible"
+      center width="900px" :close-on-click-modal="false"
+      top="10vh" class="group-dialog"
+      > -->
+    <el-dialog title="分组管理" :visible.sync="commidyVisible" width="900px" center top="10vh" :close-on-click-modal="false">
+      <CommGroup :type="type" :group-options="tableData" :group-id="shopGroupId" @cancel="commidyVisible = false" @reload="search" />
     </el-dialog>
   </div>
 </template>
@@ -96,6 +100,8 @@ import {
 import { getBtnList, getToken } from '@/utils/auth'
 import { uploadUrl } from '@/utils/request'
 export default {
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'Sorry404',
   components: {
     CommGroup
   },
@@ -180,6 +186,7 @@ export default {
     },
     // 编辑分组
     edit(row) {
+      this.type = 'edit'
       this.commidyVisible = true
       this.shopGroupId = row.shopGroupId
     },
@@ -245,6 +252,7 @@ export default {
     // 1.4
     // 新增分组
     addNewGroup() {
+      this.type = 'add'
       this.shopGroupId = 0
       this.commidyVisible = true
     }

vue.config.js

@@ -40,8 +40,8 @@ module.exports = {
     },
     proxy: {
       '/businessapi': {
-        // target: 'http://192.168.0.91:9104',
-        target: 'https://nsbusinessapi.tuanfengkeji.cn',
+        target: 'http://192.168.0.91:9104',
+        // target: 'https://nsbusinessapi.tuanfengkeji.cn',
         changeOrigin: true,
         pathRewrite: {
           '^/businessapi': ''