jsk 商超

src/api/superStore/super.js

@@ -69,7 +69,17 @@ export function deleteSupermarketApi(data) {
       data: data
     })
   }
-
+// 商品列表
+export function shopPageListApi(data) {
+    return request({
+      url: '/smart-canteen/supermarket_product/list',
+      method: 'get',
+      headers: {
+        "merchant-id":"378915229716713472",
+      },
+      params: data
+    })
+  }
 
 
 

src/views/superstore/super/index.vue

@@ -67,7 +67,11 @@
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-           
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleAddShoping(scope.row)"
+            >商品</el-button>
             <el-button
               size="mini"
               type="text"
@@ -143,24 +147,6 @@
                     <el-input  v-model="baseForm.address" placeholder="请输入超市地址" maxlength="30" clearable/>
                   </el-form-item>
                 </el-col>
-                <!-- <el-col :span="12">
-                  <el-form-item label="用户类别" prop="userType">
-                    <el-select v-model="baseForm.userType" style="width: 100%" clearable>
-                      <el-option
-                        v-for="dict in dict.type.sys_user_type"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="Number(dict.value)"
-                      />
-                    </el-select>  
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="配送费" prop="deliveryCost">
-                    <el-input  v-model="baseForm.deliveryCost" placeholder="请输入配送费" maxlength="30" clearable
-                        @input="(v)=>(baseForm.deliveryCost=v.replace(/[^\d]/g,''))"/>
-                  </el-form-item> 
-                </el-col>   -->
                 <el-col :span="12">
                   <el-form-item label="线上超市模式" prop="appSaleMode">
                     <el-select v-model="baseForm.appSaleMode" style="width: 100%" clearable>
@@ -255,7 +241,333 @@
       <el-dialog :visible.sync="dialogVisible" width="700px">
         <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
       </el-dialog>
-
+      <el-dialog :title="titleProduct" :visible.sync="openProduct" width="1200px" append-to-body>
+        <div class="app-container" id="toolsType">
+          <el-row>
+            <el-form
+              :model="queryShopParams"
+              ref="queryShopForm"
+              size="small"
+              :inline="true"
+              v-show="showSearch"
+              label-width="68px"
+            >
+              <el-form-item label="商品名称" prop="materialName">
+                <el-input
+                  v-model="queryShopParams.materialName"
+                  placeholder="请输入商品名称"
+                  clearable maxlength="30"
+                  style="width: 240px"
+                  @keyup.enter.native="handleShopQuery"
+                />
+              </el-form-item>
+              <el-form-item label="上架状态" prop="putawayState">
+                <el-select v-model="queryShopParams.putawayState" placeholder="请选择"   style="width: 220px" >
+                    <el-option v-for="item in putawayStates"
+                        :key="item.putawayState"
+                        :label="item.putawayStateName"
+                        :value="item.putawayState"
+                    ></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="条码" prop="barCode">
+                <el-input
+                  v-model="queryShopParams.barCode"
+                  placeholder="请输入条码"
+                  clearable maxlength="30"
+                  style="width: 240px"
+                  @keyup.enter.native="handleShopQuery"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  size="mini"
+                  @click="handleShopQuery"
+                >查询</el-button
+                >
+                <el-button icon="el-icon-refresh" size="mini" @click="resetShopQuery"
+                >重置</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </el-row>
+          <el-row :gutter="20">
+            <!--树数据-->
+            <el-col :span="5" :xs="24">
+              <div class="head-container">
+                商品类别
+                <el-input
+                  v-model="keyShopWord"
+                  placeholder="请输入关键字进行搜索"
+                  clearable
+                  maxlength="50"
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  style="margin-bottom: 20px"
+                />
+              </div>
+              <div class="head-container" style>
+                <el-tree
+                  style="height: 700px; overflow: scroll"
+                  :data="treeShopOptions"
+                  :props="defaultProps"
+                  :show-checkbox="true"
+                  :default-expand-all="true"
+                  :expand-on-click-node="false"
+                  :filter-node-method="filterNode"
+                  ref="typeTree"
+                  node-key="materialTypeId"
+                  highlight-current
+                  @node-click="handleNodeClick"
+                  @check-change="handleCheckChange"
+                >
+                    <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
+                      <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
+                          node.label.slice(0, 10) + "..."
+                        }}</span>
+                      <span v-else>{{ node.label }}</span>
+                      <span class="btn-items" v-if="isMousemoveId === data.id">
+                        <el-button
+                          type="text"
+                          size="mini"
+                          icon="el-icon-plus" v-if="data.level<1"
+                          @click.stop="() => appendTreeNode(data)"
+                        >
+                        </el-button>
+                         <el-button
+                          type="text"
+                          size="mini"
+                          icon="el-icon-edit-outline"
+                          style="color: #67c23a"
+                          v-if="data.id !== 0"
+                          @click.stop="() => editTreeNode(data)"
+                        >
+                        </el-button>
+                        <el-button
+                          type="text"
+                          size="mini"
+                          icon="el-icon-delete"
+                          style="color: #f56c6c"
+                          v-if="data.parentId != '0'"
+                          @click.stop="() => removeTreeNode(data)"
+                        >
+                        </el-button>
+                      </span>
+                    </span>
+                </el-tree>
+              </div>
+            </el-col>
+            <!--用户数据-->
+            <el-col :span="19" :xs="24">
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                  <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleShopAdd"
+                  >新增</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button
+                    type="danger"
+                    size="mini"
+                    :disabled="multiple"
+                    @click="handleShopBatchDel"
+                  >批量删除</el-button>
+                </el-col>
+                <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
+              </el-row>
+              <el-table v-loading="loading" :data="tableShopListData" height="550" ref="multipleTable" border :row-key="(row)=>{return row.materialId}" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
+                <el-table-column label="序号" align="center" width="80" type="index">
+                  <template slot-scope="scope">
+                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="名称"     align="center" key="materialName" prop="materialName" :show-overflow-tooltip="true" />
+                <el-table-column label="单位"     align="center" key="unitName" prop="unitName" :show-overflow-tooltip="true" />
+                <el-table-column label="商品类别"     align="center" key="materialTypeName" prop="materialTypeName" :show-overflow-tooltip="true" />
+                <el-table-column label="上架状态" align="center" key="putawayState" prop="putawayState" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
+                    <el-switch
+                      v-model="scope.row.putawayState"
+                      @change="handlePutawayStateChange(scope.row)">
+                    </el-switch>
+                    <span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="线上销售" align="center" key="ifOnline" prop="ifOnline" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
+                    <el-switch
+                      v-model="scope.row.ifOnline"
+                      @change="handleIfOnlineChange(scope.row)">
+                    </el-switch>
+                    <span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="零售价"   align="center" key="salePrice" prop="salePrice" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                      <span>{{ (scope.row.salePrice/100).toFixed(2)||"" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="会员价"   align="center" key="prefPrice" prop="prefPrice" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                      <span>{{ (scope.row.prefPrice/100).toFixed(2)||"" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="个人限购数量"     align="center" key="personLimit" prop="personLimit" :show-overflow-tooltip="true" />
+                <el-table-column label="每日限购数量"     align="center" key="oneDayLimit" prop="oneDayLimit" :show-overflow-tooltip="true" />
+                <el-table-column label="库存数"     align="center" key="inventoryNum" prop="inventoryNum" :show-overflow-tooltip="true" />
+                <el-table-column label="条码"     align="center" key="barCode" prop="barCode" :show-overflow-tooltip="true" />
+                <el-table-column label="操作" align="center" width="100" fixed="right">
+                  <template slot-scope="scope">
+                    <el-button
+                      size="mini"
+                      type="text"
+                      @click="handleShopUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      size="mini"
+                      type="text" style="color: red;"
+                      @click="handleShopDelete(scope.row)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+              />
+            </el-col>
+          </el-row>
+        </div>
+      </el-dialog>
+      <el-dialog :title="titleAddProduct" :visible.sync="openAddProduct" width="1200px" append-to-body>
+        <div class="app-container" id="toolsType">
+          <el-row>
+            <el-form
+              :model="queryAddShopParams"
+              ref="queryShopForm"
+              size="small"
+              :inline="true"
+              v-show="showSearch"
+              label-width="68px"
+            >
+              <el-form-item label="商品名称" prop="materialName">
+                <el-input
+                  v-model="queryAddShopParams.materialName"
+                  placeholder="请输入商品名称"
+                  clearable maxlength="30"
+                  style="width: 240px"
+                  @keyup.enter.native="handleAddShopQuery"
+                />
+              </el-form-item>
+              <el-form-item label="条码" prop="barCode">
+                <el-input
+                  v-model="queryAddShopParams.barCode"
+                  placeholder="请输入条码"
+                  clearable maxlength="30"
+                  style="width: 240px"
+                  @keyup.enter.native="handleAddShopQuery"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button icon="el-icon-refresh" size="mini" @click=""
+                >批量线上销售</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </el-row>
+          <el-row>
+            <!--数据-->
+            <el-col :span="24" :xs="24">
+              <el-table v-loading="loading" :data="tableAddShopListData" height="550" ref="multipleTable" border :row-key="(row)=>{return row.materialId}" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
+                <el-table-column label="序号" align="center" width="80" type="index">
+                  <template slot-scope="scope">
+                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="名称"     align="center" key="materialName" prop="materialName" :show-overflow-tooltip="true" />
+                <el-table-column label="单位"     align="center" key="unitName" prop="unitName" :show-overflow-tooltip="true" />
+                <el-table-column label="商品类别"     align="center" key="materialTypeName" prop="materialTypeName" :show-overflow-tooltip="true" />
+                <el-table-column label="上架状态" align="center" key="putawayState" prop="putawayState" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
+                    <el-switch
+                      v-model="scope.row.putawayState"
+                      @change="handlePutawayStateChange(scope.row)">
+                    </el-switch>
+                    <span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="线上销售" align="center" key="ifOnline" prop="ifOnline" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
+                    <el-switch
+                      v-model="scope.row.ifOnline"
+                      @change="handleIfOnlineChange(scope.row)">
+                    </el-switch>
+                    <span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="零售价"   align="center" key="salePrice" prop="salePrice" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                      <span>{{ (scope.row.salePrice/100).toFixed(2)||"" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="会员价"   align="center" key="prefPrice" prop="prefPrice" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                      <span>{{ (scope.row.prefPrice/100).toFixed(2)||"" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="个人限购数量"     align="center" key="personLimit" prop="personLimit" :show-overflow-tooltip="true" />
+                <el-table-column label="每日限购数量"     align="center" key="oneDayLimit" prop="oneDayLimit" :show-overflow-tooltip="true" />
+                <el-table-column label="库存数"     align="center" key="inventoryNum" prop="inventoryNum" :show-overflow-tooltip="true" />
+                <el-table-column label="条码"     align="center" key="barCode" prop="barCode" :show-overflow-tooltip="true" />
+                <el-table-column label="操作" align="center" width="100" fixed="right">
+                  <template slot-scope="scope">
+                    <el-button
+                      size="mini"
+                      type="text"
+                      @click="handleShopUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      size="mini"
+                      type="text" style="color: red;"
+                      @click="handleShopDelete(scope.row)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+              />
+            </el-col>
+          </el-row>
+        </div>
+      </el-dialog>
 
 
 
@@ -265,11 +577,17 @@
 
   <script>
   import { systemAreaTreeApi } from "@/api/base/area";
-  import { drpWareHousePageApi,supermarketPageListApi,insertSupermarketApi,editSupermarketApi,deleteSupermarketApi,userListByRoleApi } from "@/api/superStore/super";
+  import { drpWareHousePageApi,supermarketPageListApi,insertSupermarketApi,editSupermarketApi,deleteSupermarketApi,userListByRoleApi
+  ,shopPageListApi} from "@/api/superStore/super";
+  import { shopMaterialTreeApi} from "@/api/superStore/shopMaterial";
   import { imgUpLoadTwo } from '@/api/system/upload'
+  import ShopingDialog from './ShopingDialog.vue';
   export default {
     name: "",
     dicts: ['sys_user_type'],
+    components: {
+        ShopingDialog
+      },
     data() {
       return {
         // 遮罩层
@@ -287,10 +605,14 @@
         total: 0,
         // 字典表格数据
         tableListData: [],
+        //商品列表
+        tableShopListData: [],
         // 弹出层标题
         title: "",
         // 是否显示弹出层
         open: false,
+        titleProduct:"",
+        openProduct:false,
         treeOptions:[],//区域树
         treeProps:{
           value:"id",
@@ -299,6 +621,15 @@
           label:"label",
           children:"children",
         },
+        treeShopOptions: undefined,
+        treeTemp: [],
+        isMousemoveId: null,
+        defaultProps: {
+          children: "children",
+          label: "materialTypeName",
+        },
+        keyShopWord:"",//左侧树-关键字查询
+        putawayStates:[{"putawayState":"1","putawayStateName":"上架"},{"putawayState":"2","putawayStateName":"下架"}],
         // 查询参数
         queryParams: {
           pageNum: 1,
@@ -306,6 +637,12 @@
           warehouseId: undefined,
           areaId: undefined,
         },
+        queryShopParams: {
+          pageNum: 1,
+          pageSize: 10,
+          keyShopWord: undefined,
+          putawayState: undefined,
+        },
         wareHouseOptions:[],
         wareHouseOptions2:[],
         psnTypeOptions:[],
@@ -417,7 +754,16 @@
 
         orderDTO:{},//订单设置
         mealtimeList:[],//餐次列表
-
+        selectSupermarketId:"",
+        queryAddShopParams:{
+          pageNum: 1,
+          pageSize: 10,
+          materialName:"",
+          barCode:""
+        },
+        openAddProduct:"",
+        titleAddProduct:"",
+        tableAddShopListData:[],
       };
     },
     created() {
@@ -451,6 +797,7 @@
                 this.queryParams.warehouseId = null
             });
         },
+
         getWareHouse() {
             drpWareHousePageApi({}).then(response => {
                 this.wareHouseOptions = response.rows
@@ -482,6 +829,7 @@
                 this.loading = false;
             });
         },
+
         handleTabClick(tab, event) {
           console.log(tab, event);
         },
@@ -647,7 +995,158 @@
 
 
 
+        getShopTreeData() {
+          shopMaterialTreeApi().then((response) => {
+            this.treeShopOptions = this.handleTree(response.rows,'materialTypeId');
+            this.addLevel(this.treeShopOptions)
+            console.log("this.treeOptions",this.treeShopOptions)
+            if(this.treeShopOptions && this.treeShopOptions.length > 0){
+              this.getShopList();
+            } else {
+              this.getShopList();
+            }
+          });
+        },
+        // 筛选节点 - 左侧树
+        filterNode(value, data) {
+          if (!value) return true;
+          return data.materialTypeName.indexOf(value) !== -1;
+        },
+        handleTree(data, idKey, parentIdKey = 'parentId', childrenKey = 'children') {
+            // 用于存储节点数据的Map，以idKey为键
+            const nodeMap = new Map();
+            // 用于存储根节点的数组
+            const rootNodes = [];
 
+            // 遍历数据，构建nodeMap并找到根节点
+            data.forEach(node => {
+                // 将节点添加到nodeMap中，并初始化children为空数组
+                nodeMap.set(node[idKey], { ...node, [childrenKey]: [] });
+                // 如果parentId为null或父节点不存在于nodeMap中，则该节点为根节点
+                if (node[parentIdKey] === null || !nodeMap.has(node[parentIdKey])) {
+                    // 将根节点添加到rootNodes数组中
+                    rootNodes.push(nodeMap.get(node[idKey]));
+                } else {
+                    // 否则，将当前节点添加到其父节点的children列表中
+                    // 获取父节点
+                    const parentNode = nodeMap.get(node[parentIdKey]);
+                    // 将当前节点添加到父节点的children列表中
+                    parentNode[childrenKey].push(nodeMap.get(node[idKey]));
+                }
+            });
+
+            // 返回根节点数组，它现在包含了完整的树形结构
+            return rootNodes;
+        },
+        addLevel(nodes, level = 0) {
+            nodes.forEach(node => {
+                node.level = level; // 设置当前节点的层级
+                if (node.children) { // 如果节点有子节点，递归处理子节点
+                    this.addLevel(node.children, level + 1);
+                }
+            });
+        },
+        // 节点单击事件 - 左侧树
+        async handleNodeClick(data, node) {
+          console.log(data)
+          // this.handleQuery();
+        },
+        handleCheckChange(data, checked, indeterminate) {
+          this.handleQuery();
+        },
+        /* 树节点增加 */
+        appendTreeNode(data) {
+          console.log(data)
+          this.isEditType=false;
+          this.form={}
+          this.resetForm("form");
+          this.$set(this.form,"parentId",data.materialTypeId)
+          this.open = true;
+          this.title = "新增";
+        },
+        /* 树节点修改 */
+        editTreeNode(data) {
+          this.isEditType=true;
+          this.form={}
+          this.resetForm("form");
+          this.form = {
+            ...data
+          };
+          console.log(this.form)
+          this.open = true;
+          this.title = "修改";
+        },
+        // 商品编辑
+        handleAddShoping(row){
+            console.log("商品",row)
+            this.selectSupermarketId=row.supermarketId;
+            this.titleProduct="商品";
+            this.openProduct=true;
+            this.getShopTreeData();
+        },
+        /** 商品搜索按钮操作 */
+        handleShopQuery() {
+            this.queryShopParams.pageNum = 1;
+            this.getShopList();
+        },
+        /** 商品重置按钮操作 */
+        resetShopQuery() {
+            this.resetForm("queryShopForm");
+            this.handleShopQuery();
+        },
+        /** 商品列表 */
+        getShopList() {
+            this.loading = true;
+            let param = {
+              "pageNum": this.queryShopParams.pageNum,
+              "pageSize": this.queryShopParams.pageSize,
+              "warehouseId": this.queryShopParams.warehouseId,
+              "areaId":this.queryShopParams.areaId
+            }
+            shopPageListApi(param).then(response => {
+                this.tableShopListData = response.rows;
+                console.log("this.tableShopListData",this.tableShopListData);
+                this.total = Number(response.total);
+                this.loading = false;
+            });
+        },
+        handleSelectionChange(selection){
+          this.batchIds = []
+          this.batchIds = selection.map((item) => item.materialId)
+          this.single = selection.length !== 1
+          this.multiple = !selection.length
+        },
+        // 商品批量删除
+        handleShopBatchDel(){
+          console.log(this.batchIds)
+          removeMaterialApi({"materialId":this.batchIds.join(",")}).then(response => {
+            this.$modal.msgSuccess("删除成功");
+            this.$refs.multipleTable.clearSelection()
+            this.getShopList();
+          });
+        },
+        /** 商品新增 */
+        handleShopAdd() {
+            this.reset();
+            this.openAddProduct = true;
+            this.titleAddProduct = "新增-超市商品";
+        },
+        /** 新增商品列表 */
+        getAddShopList() {
+            this.loading = true;
+            let param = {
+              "pageNum": this.queryAddShopParams.pageNum,
+              "pageSize": this.queryAddShopParams.pageSize,
+              "warehouseId": this.queryAddShopParams.warehouseId,
+              "areaId":this.queryAddShopParams.areaId
+            }
+            shopPageListApi(param).then(response => {
+                this.tableAddShopListData = response.rows;
+                console.log("this.tableAddShopListData",this.tableAddShopListData);
+                this.total = Number(response.total);
+                this.loading = false;
+            });
+        },
 
 
 
@@ -663,4 +1162,3 @@
       }
   }
 </style>
-