bonus-ui/src/views/canteen/superstore/super/index.vue

1435 lines
58 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="所属区域" prop="areaId">
<el-cascader
v-model="queryParams.areaId" :show-all-levels="false" :filterable="true"
:options="treeOptions" :props="treeProps" collapse-tags clearable
@change="handleTreeChange"></el-cascader>
</el-form-item>
<el-form-item label="仓库" prop="warehouseId">
<el-select v-model="queryParams.warehouseId" clearable placeholder="请选择所属仓库" style="width: 100%;">
<el-option v-for="item in wareHouseOptions"
:key="item.warehouseId"
:label="item.warehouseName"
:value="item.warehouseId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableListData" height="800">
<el-table-column label="序号" align="center" width="100" type="index" fixed="left">
<template slot-scope="scope">
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true"/>
<el-table-column label="仓库" align="center" prop="warehouseName" :show-overflow-tooltip="true"/>
<el-table-column label="超市名称" align="center" prop="supermarketName" :show-overflow-tooltip="true"/>
<el-table-column label="线上超市模式" align="center" prop="appSaleMode" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-if="scope.row.appSaleMode==1">现货</span>
<span v-if="scope.row.appSaleMode==2">预定</span>
</template>
</el-table-column>
<el-table-column label="超市地址" align="center" prop="address" :show-overflow-tooltip="true"/>
<el-table-column label="图片" align="center" prop="imgUrl" width="120">
<template slot-scope="scope">
<img :src="scope.row.imgUrl" v-if="scope.row.imgUrl" alt="" style="width: 80px;height: 40px;" @click="openImg(scope.row)">
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="管理员" align="center" prop="manager" :show-overflow-tooltip="true" width="100"/>
<el-table-column label="更新时间" align="center" prop="updateTime" :show-overflow-tooltip="true" width="160"/>
<!-- <el-table-column label="收款码" align="center" prop="payCodeUrl" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<span>未开启</span>
</template>
</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"
@click="handleUpdate(scope.row)"
>编辑</el-button>
<el-button
size="mini"
type="text"
style="color: red;"
@click="handleDelete(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-dialog :title="title+'-超市'" :visible.sync="open" width="1200px" append-to-body>
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<!-- 基础设置 -->
<el-tab-pane label="基础设置" name="baseSetting" style="height: 550px;overflow-y: auto;">
<el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="140px">
<el-row>
<el-col :span="12">
<el-form-item label="超市名称" prop="supermarketName">
<el-input v-model="baseForm.supermarketName" placeholder="请输入超市名称" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属区域" prop="areaId">
<el-cascader v-model="baseForm.areaId"
:options="treeOptions" :filterable="true" style="width: 400px;" :show-all-levels="false"
:props="{
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
value:'id',label:'label'
}"
clearable @change="handleTreeChange2" >
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="超市仓库" prop="warehouseId">
<el-select v-model="baseForm.warehouseId" placeholder="请选择超市仓库" clearable style="width: 100%;">
<el-option v-for="item in wareHouseOptions2"
:key="item.warehouseId"
:label="item.warehouseName"
:value="item.warehouseId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="管理员" prop="manager">
<el-input v-model="baseForm.manager" placeholder="请输入管理员" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="mobile">
<el-input v-model="baseForm.mobile" placeholder="请输入联系电话" maxlength="11" clearable
@input="(v)=>(baseForm.mobile=v.replace(/[^\d]/g,''))"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="超市地址" prop="address">
<el-input v-model="baseForm.address" placeholder="请输入超市地址" maxlength="30" clearable/>
</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>
<el-option label="现货" value="1"></el-option>
<el-option label="预定" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最少配送时间(分钟)" prop="minDeliveryTime">
<el-input v-model="baseForm.minDeliveryTime" placeholder="请输入配最少配送时间" maxlength="10" clearable
@input="(v)=>(baseForm.minDeliveryTime=Number(v.replace(/[^\d]/g,'')))"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="选择时间间隔(分钟)" prop="selectTimeInterval">
<el-select v-model="baseForm.selectTimeInterval" style="width: 100%" clearable>
<el-option label="15" :value="15"></el-option>
<el-option label="20" :value="20"></el-option>
<el-option label="30" :value="30"></el-option>
<el-option label="60" :value="60"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="可退单时间(分钟)" prop="refundLimitTime">
<el-input v-model="baseForm.refundLimitTime" placeholder="请输入可退单时间(分钟)" maxlength="10" clearable
@input="(v)=>(baseForm.refundLimitTime=Number(v.replace(/[^\d]/g,'')))"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="流水号前缀" prop="mealCode">
<el-input v-model="baseForm.mealCode" placeholder="请输入流水号前缀" maxlength="20" clearable
@input="(v)=>(baseForm.mealCode=v.replace(/[^\d]/g,''))"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="配送方式" prop="deliveryWay">
<el-select v-model="baseForm.deliveryWay" style="width: 100%" clearable>
<el-option label="自取" value="1"></el-option>
<el-option label="配送" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="是否关联出入库" prop="ifRelateDrp">
<el-switch
v-model="baseForm.ifRelateDrp"
active-text="开启"
inactive-text="关闭"
:active-value="1"
:inactive-value="2">
</el-switch>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="超市图片">
<el-upload
:http-request="
(obj) => imgUpLoad(obj, 'fileUrl')
"
action="#"
:limit="1"
:file-list="fileList"
:show-file-list="true"
list-type="picture-card"
accept=".png, .jpg, .jpeg"
:on-success="handleAvatarSuccess"
:class="{ disabled: uploadDisabled }"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i
class="el-icon-plus avatar-uploader-icon"
></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<!-- 营业设置 -->
<!-- <el-tab-pane label="营业设置" name="paySetting" style="height: 550px;overflow-y: auto;">
<div style="width: 100%;height: 400px;display: flex;align-items: center;justify-content: center;">暂无数据</div>
</el-tab-pane> -->
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :disabled="loadingBtn">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<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">
<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 > 5">{{
node.label.slice(0, 5) + "..."
}}</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-button type="primary" size="mini" :disabled="multiple" @click="handleShopBatchOnline">批量线上销售</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=='1'?true:false"
@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=='1'?true:false"
@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="titleProductEitd" :visible.sync="openProductEitd" width="980px" append-to-body>
<el-form ref="form" :model="productFrom" label-width="90px">
<el-row justify="center">
<table align="center" width="80%" cellspacing="0">
<tr >
<td colspan="4" class="table-title">商品</td>
</tr>
<tr >
<td class="table-label"><span >名称</span></td>
<td class="table-content">
<el-input
v-model="productFrom.materialName"
disabled
/>
</td>
<td class="table-label"><span >单位</span></td>
<td class="table-content">
<el-input
v-model="productFrom.unitName"
disabled
/>
</td>
</tr>
<tr >
<td class="table-label"><span >条码</span></td>
<td class="table-content">
<el-input
v-model="productFrom.barCode"
disabled
/>
</td>
<td class="table-label"><span >零售价</span></td>
<td class="table-content">
<el-input
v-model="productFrom.salePrice"
placeholder="请输入"
@input="handleNumberInput"
/>
</td>
</tr>
<tr >
<td class="table-label"><span >会员价</span></td>
<td class="table-content">
<el-input
v-model="productFrom.prefPrice"
placeholder="请输入"
@input="handleNumberInput"
/>
</td>
<td class="table-label"><span >个人限购数量</span></td>
<td class="table-content">
<el-input
v-model="productFrom.personLimit"
placeholder="请输入"
@input="handleNumberInput"
/>
</td>
</tr>
<tr >
<td class="table-label"><span >每日限购数量</span></td>
<td class="table-content">
<el-input
v-model="productFrom.oneDayLimit"
placeholder="请输入"
@input="handleNumberInput"
/>
</td>
<td class="table-label"><span >库存</span></td>
<td class="table-content">
<el-input
v-model="productFrom.inventoryNum"
placeholder="请输入"
@input="handleNumberInput"
/>
</td>
</tr>
<tr >
<td class="table-label"><span >上架状态</span></td>
<td class="table-content">
<template>
<span>{{ '下架' }}</span>
<el-switch
v-model="productFrom.putawayStatef"
@change="handlePutawayStateEitdChange(productFrom)">
</el-switch>
<span>{{'上架' }}</span>
</template>
</td>
<td class="table-label"><span >线上销售</span></td>
<td class="table-content">
<template >
<span>{{'否'}}</span>
<el-switch
v-model="productFrom.ifOnlinef"
@change="handleIfOnlineEitdChange(productFrom)">
</el-switch>
<span>{{'是' }}</span>
</template>
</td>
</tr>
</table>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitShopEitd">确 定</el-button>
<el-button @click="cancelShopEitd">取 消</el-button>
</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 type="primary" @click="handleAddShopQuery">查询</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="handleAddSelectionChange">
<el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
<el-table-column label="区域" align="center" key="areaName" prop="areaName" :show-overflow-tooltip="true" />
<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>{{'下架' }}</span>
<el-switch
v-model="scope.row.putawayState"
@change="handlePutawayStateChanges(scope.row)">
</el-switch>
<span>{{ '上架' }}</span>
</template>
</el-table-column>
<el-table-column label="线上销售" align="center" key="ifOnline" prop="ifOnline" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ '否'}}</span>
<el-switch
v-model="scope.row.ifOnline"
@change="handleIfOnlineChanges(scope.row)">
</el-switch>
<span>{{ '是' }}</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" style="color: red;"
@click="handleAddShopDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column> -->
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryAddShopParams.pageNum"
:limit.sync="queryAddShopParams.pageSize"
@pagination="getAddShopList"
/>
</el-col>
</el-row>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelAddShopProduct">返 回</el-button>
<el-button type="primary" @click="handleAddShopProduct">添加商品</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { systemAreaTreeApi } from "@/api/base/area";
import { drpWareHousePageApi,supermarketPageListApi,insertSupermarketApi,editSupermarketApi,deleteSupermarketApi,userListByRoleApi
,shopPageListApi,shopProductPageListApi,batchRemoveMaterialApi,delShopProductApi,getShopProductApi,eitdShopProductApi,onlienShopProductApi} from "@/api/superStore/super";
import { shopMaterialTreeApi} from "@/api/superStore/shopMaterial";
import { imgUpLoadTwo } from '@/api/system/upload'
export default {
name: "",
dicts: ['sys_user_type'],
data() {
return {
// 遮罩层
loading: true,
loadingBtn: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 字典表格数据
tableListData: [],
//商品列表
tableShopListData: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
titleProduct:"",
openProduct:false,
treeOptions:[],//区域树
treeProps:{
value:"id",
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
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,
pageSize: 10,
warehouseId: undefined,
areaId: undefined,
},
queryShopParams: {
pageNum: 1,
pageSize: 10,
materialName: undefined,
putawayState: undefined,
barCode:undefined
},
wareHouseOptions:[],
wareHouseOptions2:[],
psnTypeOptions:[],
userOptions:[],
activeName:"baseSetting",
canteenId:"",//食堂数据-编辑
canteenData:{},//食堂数据-编辑
baseForm: {
"areaId": "",
"ifRelateDrp": 2,
"imgUrl": "",
},//基础设置
configList:[
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期一",
"weekType": 1
},
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期二",
"weekType": 2
},
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期一",
"weekType": 1
},
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期三",
"weekType": 3
},
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期四",
"weekType": 4
},
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期五",
"weekType": 5
},
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期六",
"weekType": 6
},
{
"ifBusiness": 1,
"ifReserveFetch": 2,
"closingTime": "23:59:59",
"openingTime": "00:00:00",
"weekName": "星期日",
"weekType": 7
}
],
// 表单校验
baseFormRules: {
supermarketName: [
{ required: true, message: "超市名称不能为空", trigger: "blur" }
],
areaId: [
{ required: true, message: "所属区域不能为空", trigger: "blur" }
],
deliveryWay: [
{ required: true, message: "配送方式不能为空", trigger: "change" }
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
}
]
},
// 总条数
dialogTotal: 0,
currentCustRow:{},//选中的负责人数据
fileList: [],//食堂图片
checkUrlList: [],//食堂图片
checkUrlNameList: [],//食堂图片
dialogVisible:false,//图片弹窗
dialogImageUrl:"",//图片弹窗
deliveriesList:[],//配送类型
orderDTO:{},//订单设置
mealtimeList:[],//餐次列表
selectSupermarketId:"",
selectAreaId:"",
queryAddShopParams:{
pageNum: 1,
pageSize: 10,
materialName:"",
barCode:""
},
batchIds:[],
openAddProduct:false,
titleAddProduct:"",
tableAddShopListData:[],
addBatchIds:[],
productFrom:{},
openProductEitd:false,
titleProductEitd:"",
productFrom:{
materialName:"",
unitName:"",
barCode:"",
salePrice:"",
prefPrice:"",
personLimit:"",
oneDayLimit:"",
inventoryNum:"",
putawayState:"1",
ifOnline:"2",
},
};
},
created() {
this.getTreeData();
this.getList();
// this.mgruserListByRole();
},
computed: {
//图片上传1张后隐藏上传框
uploadDisabled() {
return this.checkUrlList.length > 0
},
},
methods: {
handleNumberInput(value){
this.inputValue = value.replace(/[^\d.]/g, '');
},
handleNumberInput(value){
this.inputValue = value.replace(/[^\d.]/g, '');
},
//区域树
getTreeData() {
systemAreaTreeApi({}).then((response) => {
this.treeOptions = response.data;
});
},
handleTreeChange(e){
let param = {
areaId:e
}
drpWareHousePageApi(param).then(response => {
this.wareHouseOptions = response.rows
this.queryParams.warehouseId = null
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = true;
let param = {
"pageNum": this.queryParams.pageNum,
"pageSize": this.queryParams.pageSize,
"warehouseId": this.queryParams.warehouseId,
"areaId":this.queryParams.areaId
}
supermarketPageListApi(param).then(response => {
this.tableListData = response.rows;
this.total = Number(response.total);
this.loading = false;
});
},
handleTabClick(tab, event) {
console.log(tab, event);
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增";
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.fileList=[]
this.checkUrlList=[]
this.baseForm = {
"areaId": "",
"ifRelateDrp": 2,
"imgUrl": "",
}
this.resetForm("baseForm");
},
/** 修改按钮操作 */
handleUpdate(row) {
console.log(row)
this.reset();
this.baseForm = Object.assign({}, row)
let param = {
areaId:this.baseForm.areaId
}
drpWareHousePageApi(param).then(response => {
this.wareHouseOptions2 = response.rows
});
if(row.imgUrl){
this.fileList=[{url:row.imgUrl}]
this.checkUrlList=[row.imgUrl]
}else{
this.fileList=[]
this.checkUrlList=[]
}
this.open = true;
this.title = "修改";
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除数据项?').then(function() {
return deleteSupermarketApi({supermarketId:row.supermarketId});
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 提交按钮 */
submitForm: function() {
console.log(this.baseForm)
this.$refs["baseForm"].validate(valid => {//基本设置表单校验
if (valid) {
this.loadingBtn=true
this.baseForm.imgUrl = this.checkUrlList[0]
let param = this.baseForm
// param.configList = this.configList;
if (param.supermarketId) {
editSupermarketApi(param).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.loadingBtn = false;
this.getList();
}).catch(() => {
this.loadingBtn = false;
});
} else {
insertSupermarketApi(param).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.loadingBtn = false;
this.getList();
}).catch(() => {
this.loadingBtn = false;
});
}
}
});
},
//基础设置-选择区域
handleTreeChange2(val){
let param = {
areaId:val
}
drpWareHousePageApi(param).then(response => {
this.wareHouseOptions2 = response.rows;
this.$set(this.baseForm,"warehouseId",null)
});
},
//商户类用户
mgruserListByRole(){
let param = {
"roleKey": "ROLE_MERCHANT"
}
userListByRoleApi(param).then(response => {
this.userOptions = response.rows
});
},
//选中
chosenUser(e){
let obj = {}
this.userOptions.forEach(item=>{
if(item.userId == e){
obj=item
}
})
this.$set(this.baseForm,"mobile",obj.phonenumber)
},
// 仓库图片上传
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
openImg(row) {
this.dialogImageUrl = row.imgUrl;
this.dialogVisible = true;
},
// 图片上传
imgUpLoad(param, name, index) {
// console.log(param,'image')
param.type = 'canteen'
this.loadingBtn=true
imgUpLoadTwo(param).then((res) => {
if (res.code == 200) {
this.checkUrlList.push(res.data.url)
this.checkUrlNameList.push(res.data.name)
} else {
this.$modal.msgError(res.msg)
}
this.loadingBtn=false
})
.catch((error) => {
this.$modal.msgError(error)
this.loadingBtn=false
})
},
handleAvatarSuccess(res, file) {
console.log('success')
},
handleExceed(files, fileList) {
this.$message.warning('最多只可以上传一张图片')
},
handleRemove(file, fileList) {
let sum = 0
this.checkUrlNameList.forEach((item, index) => {
if (item == file.name) {
sum = index
}
})
this.checkUrlNameList.splice(sum, 1)
this.checkUrlList.splice(sum, 1)
},
//图片点击查看
handlePictureCardPreview(file) {
console.log(file)
this.dialogImageUrl = file.url
this.dialogVisible = true
},
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.handleShopQuery();
},
handleCheckChange(data, checked, indeterminate) {
this.handleShopQuery();
},
/* 树节点增加 */
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.selectAreaId=row.areaId;
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,
"putawayState": this.queryShopParams.putawayState,
"materialName":this.queryShopParams.materialName,
"barCode":this.queryShopParams.barCode,
"supermarketId":this.selectSupermarketId
}
console.log("this.queryShopParams",param)
shopPageListApi(param).then(response => {
this.tableShopListData = response.rows;
console.log("this.tableShopListData",this.tableShopListData);
this.total = Number(response.total);
this.loading = false;
});
},
handleShopUpdate(row){
this.openProductEitd=true;
this.titleProductEitd="商品编辑";
let param={
"productId":row.productId,
"supermarketId":this.selectSupermarketId
}
getShopProductApi(param).then(response => {
console.log("response.data",response.data)
this.productFrom=response.data;
this.productFrom.putawayStatef=this.productFrom.putawayState=="1"?true:false;
this.productFrom.ifOnlinef=this.productFrom.ifOnline=="2"?true:false;
});
},
cancelShopEitd(){
this.openProductEitd=false;
},
handlePutawayStateEitdChange(from){
let pws=from.putawayState;
if(pws=="1"){
this.productFrom.putawayState="2";
}else if(pws=="2"){
this.productFrom.putawayState="1";
}
},
handleIfOnlineEitdChange(from){
let pws=from.ifOnline;
if(pws=="1"){
this.productFrom.ifOnline="2";
}else if(pws=="2"){
this.productFrom.ifOnline="1";
}
},
handlePutawayStateChange(row){
let pws=row.putawayState;
let param={}
if(pws=="1"){
param={
productId:row.productId,
putawayState:"2"
}
}else if(pws=="2"){
param={
productId:row.productId,
putawayState:"1"
}
}
eitdShopProductApi(param).then(response => {
this.getShopList();
});
},
handleIfOnlineChange(row){
let pws=row.ifOnline;
let param={}
if(pws=="1"){
param={
productId:row.productId,
ifOnline:"2"
}
}else if(pws=="2"){
param={
productId:row.productId,
ifOnline:"1"
}
}
eitdShopProductApi(param).then(response => {
this.getShopList();
});
},
handlePutawayStateChanges(row){
},
handleIfOnlineChanges(row){
},
submitShopEitd(){
console.log("this.productFrom",this.productFrom)
eitdShopProductApi(this.productFrom).then(response => {
this.$modal.msgSuccess("修改 成功");
this.openProductEitd=false;
this.getShopList();
});
},
handleShopDelete(row){
let param={
"productIds":row.productId,
"supermarketId":this.selectSupermarketId
}
delShopProductApi(param).then(response => {
this.$modal.msgSuccess("删除成功");
this.getShopList();
});
},
handleSelectionChange(selection){
this.batchIds = []
this.batchIds = selection.map((item) => item.productId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
// 商品批量删除
handleShopBatchDel(){
console.log(this.batchIds)
if(this.batchIds.length<=0){
this.$modal.msgSuccess("请选择数据!");
return;
}
delShopProductApi({"productIds":this.batchIds.join(",")}).then(response => {
this.$modal.msgSuccess("删除成功");
this.$refs.multipleTable.clearSelection()
this.getShopList();
});
},
handleShopBatchOnline(){
console.log(this.batchIds)
if(this.batchIds.length<=0){
this.$modal.msgSuccess("请选择数据!");
return;
}
onlienShopProductApi({"productIds":this.batchIds.join(",")}).then(response => {
this.$modal.msgSuccess("修改成功");
this.$refs.multipleTable.clearSelection()
this.getShopList();
});
},
/** 商品新增 */
handleShopAdd() {
// this.reset();
this.openAddProduct = true;
this.titleAddProduct = "新增-超市商品";
this.getAddShopList();
},
handleAddSelectionChange(selection){
this.addBatchIds = []
this.addBatchIds = selection.map((item) => item.materialId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增商品列表 */
getAddShopList() {
this.loading = true;
let param = {
"pageNum": this.queryAddShopParams.pageNum,
"pageSize": this.queryAddShopParams.pageSize,
"areaId":this.selectAreaId
}
shopProductPageListApi(param).then(response => {
this.tableAddShopListData = response.rows;
console.log("this.tableAddShopListData",this.tableAddShopListData);
this.total = Number(response.total);
this.loading = false;
});
},
handleAddShopQuery(){
let param = {
"pageNum": this.queryAddShopParams.pageNum,
"pageSize": this.queryAddShopParams.pageSize,
"materialName":this.queryAddShopParams.materialName,
"barCode":this.queryAddShopParams.barCode,
}
shopProductPageListApi(param).then(response => {
this.tableAddShopListData = response.rows;
console.log("this.tableAddShopListData",this.tableAddShopListData);
this.total = Number(response.total);
this.loading = false;
});
},
cancelAddShopProduct(){
this.openAddProduct = false;
this.titleAddProduct = "新增-超市商品";
},
handleAddShopProduct(){
console.log("this.addBatchIds",this.addBatchIds)
batchRemoveMaterialApi({"materialIds":this.addBatchIds.join(","),"supermarketId":this.selectSupermarketId}).then(response => {
this.$modal.msgSuccess("添加成功");
this.$refs.multipleTable.clearSelection()
this.getAddShopList();
this.getShopList();
});
}
}
};
</script>
<style lang="scss" scoped>
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
</style>