|
|
@@ -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>
|
|
|
|
