2024.05.30

- 完善商品分组页智能添加商品功能；

src/views/commodity/commodityList/components/EditModal.vue

@@ -2,7 +2,7 @@
   <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
     <div class="tree-container">
       <el-tree
-        :data="[ formData ]" :props="{ children: 'childs' }" node-key="shopGroupId" default-expand-all
+        :data="[ formData ]" :props="{ children: 'childs' }" node-key="orderNumber" default-expand-all
         draggable
         :expand-on-click-node="false"
       >
@@ -16,12 +16,64 @@
               <el-input v-model="data.groupDescribe" size="mini" style="width: 340px;" placeholder="请输入分组描述" />
             </div>
             <div>
-              <el-button type="text" size="mini">
+              <el-button
+                type="text" size="mini"
+                @click="$refs.RelatedGroupProducts && $refs.RelatedGroupProducts.handleOpen(data.products)"
+              >
                 分组商品详情
               </el-button>
-              <el-button type="text" size="mini" @click="handleAddProduct(data, node)">
-                添加分组商品
-              </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>
@@ -41,7 +93,11 @@
         </el-button>
       </div>
 
-      <el-dialog class="product-dialog" title="手动添加商品" :visible.sync="isShowManualAdd" width="900px" top="50px" append-to-body>
+      <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"
@@ -96,9 +152,8 @@
             <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) ]"
+                  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>
@@ -122,16 +177,26 @@
         </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,
@@ -154,7 +219,12 @@ export default {
         groupLevel: '',
         depth: 1,
         groupPid: 0,
-        childs: []
+        products: [],
+        childs: [],
+        selectType: 1,
+        ids: [],
+        condition: '',
+        conditions: []
       },
 
       isShowManualAdd: false, // 手动添加商品模态框
@@ -201,7 +271,11 @@ export default {
           groupPid: 0,
           products: [],
           childs: [],
-          ids: [] // 自设
+          selectType: 1, // 自设
+          ids: [], // 自设。要传。
+          condition: null, // 自设。要传。1-全部满足 2-任意满足
+          conditions: [], // 自设。要传。{ calculation: 1-大于 2-等于 3-小于, ids: 已满足部分条件的商品id数组, number: 数值, type: 1-库存 2-价格 3-重量 4-销量 }
+          orderNumber: '' // 自设
         }
       }
     },
@@ -218,11 +292,14 @@ export default {
           depth: res.data.depth || 1,
           groupPid: res.data.groupPid || 0,
           products: res.data.products || [],
-          childs: res.data.childs || [],
-          ids: res.data.ids || []
+          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()
@@ -239,7 +316,10 @@ export default {
           depth: data.depth + 1,
           groupPid: data.shopGroupId,
           childs: [],
+          selectType: 1,
           ids: [],
+          condition: null,
+          conditions: [],
           orderNumber: Date.now()
         })
       }
@@ -272,12 +352,34 @@ export default {
     },
     handleAddProduct(data, node) {
       this.multipleSelection = []
-      this.selectedGroupId = data.shopGroupId
+      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, // 价格最大值
@@ -291,18 +393,6 @@ export default {
       this.initList()
     },
 
-    handleSaveIdList() {
-      XeUtils.eachTree([ this.formData ], (item) => {
-        if (item.shopGroupId === this.selectedGroupId) {
-          if (this.multipleSelection.length) {
-            item.ids = this.multipleSelection.map((i) => i.productId)
-          } else {
-            item.ids = []
-          }
-        }
-      }, { children: 'childs' })
-      this.isShowManualAdd = false
-    },
     // 保存提交
     async handleSubmit() {
       let isGroupNameEmpty = false
@@ -310,8 +400,18 @@ export default {
         if (!item.groupName) isGroupNameEmpty = true
       }, { children: 'childs' })
       if (isGroupNameEmpty) return this.$message({ message: '分组名称不能为空', type: 'warning' })
-      this.formData.conditions = []
-      this.formData.condition = null
+      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
@@ -347,9 +447,16 @@ export default {
 		}
 	}
 }
+
 .product-dialog {
 	::v-deep .el-dialog__body {
 		padding: 30px 20px 0;
 	}
 }
+
+.add-group-container {
+	::v-deep .el-radio-button__inner {
+		padding: 0;
+	}
+}
 </style>

src/views/commodity/commodityList/components/IntelProductScreening.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
+    <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="100px">
+      <el-form-item label="满足条件" prop="condition">
+        <el-radio-group v-model="formData.condition" size="mini" @input="!formData.condition ? formData.conditions = [] : ''">
+          <el-radio-button :label="null">不设置</el-radio-button>
+          <el-radio-button :label="1">全部满足</el-radio-button>
+          <el-radio-button :label="2">任意满足</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="筛选条件" prop="condition">
+        <div v-if="formData.condition">
+          <div v-for="(item, index) in formData.conditions" :key="item.type" style="margin-bottom: 10px;">
+            <div style="display: flex;align-items: center;">
+              <el-select v-model="item.type" placeholder="请选择条件类型">
+                <el-option
+                  v-for="part in conditionType" :key="part.type" :label="part.name" :value="part.type"
+                  :disabled="formData.conditions.map((i) => i.type).includes(part.type)"
+                />
+              </el-select>
+              <el-select v-model="item.calculation" placeholder="请选择">
+                <el-option
+                  v-for="part in [{ label: '大于', value: 1 }, { label: '等于', value: 2 }, { label: '小于', value: 3 }]" :key="part.value"
+                  :label="part.label" :value="part.value"
+                />
+              </el-select>
+              <el-input v-model="item.number" style="width: 200px;" type="number" maxlength="9" />
+              <el-button v-if="formData.conditions.length > 1" type="danger" size="mini" @click="formData.conditions.splice(index, 1)">
+                删除
+              </el-button>
+            </div>
+          </div>
+          <div v-if="formData.conditions.length < 4">
+            <el-button type="warning" size="mini" @click="handleAddCondition">
+              添加筛选条件
+            </el-button>
+          </div>
+        </div>
+        <div v-else>不设置</div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">添 加</el-button>
+        <el-button size="mini" @click="handleClose">关 闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'IntelProductScreening',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '920px',
+        title: '智能筛选产品'
+      },
+      visible: false,
+      conditionType: [
+        {
+          type: 1,
+          name: '库存'
+        },
+        {
+          type: 2,
+          name: '价格'
+        },
+        {
+          type: 3,
+          name: '重量'
+        },
+        {
+          type: 4,
+          name: '销量'
+        }
+      ],
+      formData: {
+        condition: null,
+        conditions: []
+      },
+      formRules: {
+        // condition: [
+        //   { required: true, message: '请选择满足条件' }
+        // ]
+        // conditions: [
+        //   { type: 'array', required: true, message: '请设置筛选条件' }
+        // ]
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = { condition: '', conditions: [] }) {
+      this.formData.condition = params.condition || null
+      this.formData.conditions = JSON.parse(JSON.stringify(params.conditions || []))
+      this.visible = true
+      this.$forceUpdate()
+      // this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleAddCondition() {
+      if (this.formData.conditions.some((item) => !item.type)) return this.$message({ message: '请先完善其它未设置的条件', type: 'warning' })
+      if (this.conditionType.every((item) => this.formData.conditions.map((i) => i.type).includes(item.type))) return this.$message({ message: '所有条件类型已增加', type: 'warning' })
+      this.formData.conditions.push({
+        calculation: 1,
+        ids: [],
+        number: null,
+        type: ''
+      })
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          if (this.formData.condition) {
+            if (!this.formData.conditions.length) return this.$message({ message: '请先设置筛选条件', type: 'warning' })
+            if (this.formData.conditions.some((item) => !item.type || !item.calculation || !item.number)) return this.$message({ message: '请先完善筛选条件', type: 'warning' })
+          }
+          this.$emit('success', this.formData)
+          this.visible = false
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.small-padding {
+	.cell {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.fixed-width {
+	.el-button--mini {
+		padding: 7px 10px;
+	}
+}
+</style>

src/views/commodity/commodityList/components/RelatedGroupProducts.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
+    <div>
+      <el-table
+        v-loading="!formData.relatedGroupProductsList || !formData.relatedGroupProductsList.length"
+        height="60vh" element-loading-text="暂无关联分组产品" :data="formData.relatedGroupProductsList"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" min-width="80" prop="productId" label="产品ID" show-overflow-tooltip />
+        <el-table-column align="center" width="100" label="产品主图" prop="image">
+          <template slot-scope="{ row }">
+            <el-image
+              v-if="row.image" lazy :src="common.seamingImgUrl(row.image)"
+              style="width:40px; height:40px" fit="cover"
+              :preview-src-list="[ common.seamingImgUrl(row.image) ]"
+            />
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="150" prop="productName" label="产品名称" show-overflow-tooltip />
+        <el-table-column align="center" min-width="100" prop="originalPrice" label="价格" show-overflow-tooltip />
+        <el-table-column align="center" min-width="100" prop="stockNumber" label="库存" show-overflow-tooltip />
+        <el-table-column align="center" min-width="100" label="状态" prop="shelveState">
+          <template slot-scope="{ row }">
+            <span v-if="row.shelveState === 1">上架</span>
+            <span v-else-if="row.shelveState === 0">下架</span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">关 闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'RelatedGroupProducts',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '920px',
+        title: '关联分组产品'
+      },
+      visible: false,
+      formData: {
+        relatedGroupProductsList: []
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = []) {
+      this.formData.relatedGroupProductsList = params
+      this.visible = true
+      this.$forceUpdate()
+      // this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleSubmit() {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.small-padding {
+	.cell {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.fixed-width {
+	.el-button--mini {
+		padding: 7px 10px;
+	}
+}
+</style>