dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

收银台 前端页面 商品油品订单挂单

Browse Source
This commit is contained in:
zhaotianfeng 2024-09-14 10:09:23 +08:00
parent 490ac37b45
commit 5c77701eca
4 changed files with 628 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
fuintCashierWeb/src/api/newHome/newHome.js Normal file
View File

@ -0,0 +1,17 @@
import request from '@/utils/request'
//根据当前店铺id获取 按照油号分组油枪
export function cashRegisterList() {
return request({
url: '/business/petrolStationManagement/oilGun/cashRegisterList',
method: 'get',
})
}
//根据当前店铺id获取商品列表
export function cashRegisterGoodsList() {
return request({
url: '/cashRegisterGoods/list',
method: 'get',
})
}

624
fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue
View File

@ -2,7 +2,7 @@
<div class="new-contoner">
<div class="left-box">
<div class="box-top">
<div class="o-top" v-if="userInfo" >
<div class="o-top" v-if="userInfo">
<div class="d-s">
<img src="./imgs/new_user.png" style="width: 28px;height: 28px;margin-right: 10px">
<div>
@ -15,18 +15,18 @@
</div>
</div>
<div class="d-s">
<div class="an_bor" @click="addMemberRecharge()" >会员充值</div>
<div class="an_bor" @click="addMemberRecharge()">会员充值</div>
<div class="an_bor">重置会员</div>
<div class="an_bor">赠送优惠券</div>
</div>
</div>
<div class="o-top" v-if="!userInfo" >
<div class="o-top" v-if="!userInfo">
<div class="left_input">
<input type="text" placeholder="请输入会员手机号" >
<input type="text" placeholder="请输入会员手机号">
<i class="el-icon-search"></i>
</div>
<div class="d-s">
<div class="an_bor" @click="addVip()" >新增会员</div>
<div class="an_bor" @click="addVip()">新增会员</div>
</div>
</div>
<div class="t-top">
@ -85,7 +85,10 @@
</div>
<div class="er-box"></div>
<div class="wrap-box">
<div class="f-box" v-for="(item,index) in cardList" :class="{'f-acvite' : index == ruleIndex }" @click="setindex(index)" :key="index">{{ item.name }}</div>
<div class="f-box" v-for="(item,index) in cardList" :class="{'f-acvite' : index == ruleIndex }"
@click="setindex(index)" :key="index"
>{{ item.name }}
</div>
</div>
</div>
<div class="box-bottom">
@ -99,57 +102,57 @@
<div class="cont-box">
<div class="box-top">
<div class="cont-tab">
<div class="tab-box" v-for="(item,index) in tabList" :key="index" @click="setTabindex(index)">
<div class="tab-name" :class="{ 'active_name' : tabIndex == index }">{{ item.name }}</div>
<div class="tab-box" v-for="(value,key,index) in tabList" :key="index" @click="setTabindex(key,index)">
<div class="tab-name" :class="{ 'active_name' : tabIndex == index }">{{ key }}</div>
<div class="gang" :class="{ 'active_gang' : tabIndex == index }"></div>
</div>
</div>
<div class="tab-kuang" style="flex-wrap: wrap">
<div class="card92" v-for="(item,index) in 3" @click="setRefuelingAmount()" >
<div>汽油 92#</div>
<div class="card-title">1号枪</div>
<!-- <div class="card92" v-for="(item,index) in 3" @click="setRefuelingAmount()">-->
<!-- <div>汽油 92#</div>-->
<!-- <div class="card-title">1号枪</div>-->
<!-- <div class="c-b-d">-->
<!-- <img src="./imgs/92oil.png" style="width: 16px;height: 16px">-->
<!-- <div>92号汽油罐</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="card95" v-for="(item,index) in 3">-->
<!-- <div>汽油 95#</div>-->
<!-- <div class="card-title">1号枪</div>-->
<!-- <div class="c-b-d">-->
<!-- <img src="./imgs/95oil.png" style="width: 16px;height: 16px">-->
<!-- <div>95号汽油罐</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="card98" v-for="(item,index) in 3">-->
<!-- <div>汽油 98#</div>-->
<!-- <div class="card-title">1号枪</div>-->
<!-- <div class="c-b-d">-->
<!-- <img src="./imgs/98oil.png" style="width: 16px;height: 16px">-->
<!-- <div>98号汽油罐</div>-->
<!-- </div>-->
<!-- </div>-->
<div :class=item.classStyle v-for="(item,index) in dataList" @click="setRefuelingAmount(item)">
<div>{{ item.oilType }}&nbsp;{{ item.oilName }}</div>
<div class="card-title">{{ item.gunName }}</div>
<div class="c-b-d">
<img src="./imgs/92oil.png" style="width: 16px;height: 16px">
<div>92号汽油罐</div>
</div>
</div>
<div class="card95" v-for="(item,index) in 3">
<div>汽油 95#</div>
<div class="card-title">1号枪</div>
<div class="c-b-d">
<img src="./imgs/95oil.png" style="width: 16px;height: 16px">
<div>95号汽油罐</div>
</div>
</div>
<div class="card98" v-for="(item,index) in 3">
<div>汽油 98#</div>
<div class="card-title">1号枪</div>
<div class="c-b-d">
<img src="./imgs/98oil.png" style="width: 16px;height: 16px">
<div>98号汽油罐</div>
</div>
</div>
<div class="card0" v-for="(item,index) in 3">
<div>柴油 0#</div>
<div class="card-title">1号枪</div>
<div class="c-b-d">
<img src="./imgs/0oil.png" style="width: 16px;height: 16px">
<div>0#柴油罐</div>
<img :src=item.img style="width: 16px;height: 16px">
<div>{{ item.oilName }}&nbsp;{{ item.oilType + '罐' }}</div>
</div>
</div>
</div>
<div class="c-bottom">
8号枪（21.03L/191.7936元）；10号枪（45.03L/300.2852元）
{{ getGoodsItem }}
</div>
<div class="bottom-b-d">
<div>订单笔数 <span style="color: #FF9655">0件</span></div>
<div>订单金额 <span style="color: #FF9655">￥0.00</span></div>
<!-- <div>订单笔数 <span style="color: #FF9655">0件</span></div>-->
<div>油品金额 <span style="color: #FF9655">￥{{ oilGunClearing.amount || 0.00 }}</span></div>
</div>
</div>
<div class="box-bottom">
<div class="anniu-c">
<div class="anniu-c" @click="oilGunReset()">
重置
</div>
</div>
@ -157,13 +160,21 @@
<div class="right-box">
<div class="box-top">
<div class="r-top">非油商品</div>
<el-autocomplete
style="width: 95%;margin: 15px "
popper-class="my-autocomplete"
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
>
<template slot-scope="{ item }">
<div class="name">{{ item.name }}</div>
</template>
</el-autocomplete>
<div class="taber-top">
<div class="goods_name">商品</div>
<div class="stock_name">库存</div>
@ -171,29 +182,31 @@
<div class="num_name">数量</div>
<div class="orerate_name">操作</div>
</div>
<div class="taber-box" v-for="(item,index) in 5" :key="index">
<!-- 渲染商品列表 -->
<div class="taber-box" v-for="(item,index) in goodsList" :key="index">
<div class="goods_name">
<img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">
<!-- <img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">-->
{{ item.name }}
</div>
<div class="stock_name">60</div>
<div class="u-price_name">6.8</div>
<div class="num_name">1</div>
<div class="stock_name">{{ item.stock }}</div>
<div class="u-price_name">{{ item.retailPrice }}</div>
<div class="num_name">{{ item.num }}</div>
<div class="orerate_name">
<span style="color: red;cursor: pointer">删除</span>
<span style="color: red;cursor: pointer" @click="deleteGoods(item.id)">删除</span>
</div>
</div>
<div class="bottom-b-d">
<div>订单笔数 <span style="color: #FF9655">0件</span></div>
<div>订单金额 <span style="color: #FF9655">￥27.00</span></div>
<div>商品总数 <span style="color: #FF9655">{{ getGoodsListNum }}件</span></div>
<div>商品总金额 <span style="color: #FF9655">￥{{ getGoodsNum }}</span></div>
</div>
</div>
<div class="box-bottom">
<div class="anniu-c">
<div class="anniu-c" @click="goodsReset()">
重置
</div>
<div class="d-s">
<div class="anniu-lv" @click="invokePickUpTheOrder" >取单</div>
<div class="anniu-lan" @click="invokeHangingAnOrder" >挂单</div>
<div class="anniu-lv" @click="invokePickUpTheOrder">取单</div>
<div class="anniu-lan" @click="invokeHangingAnOrder">挂单</div>
</div>
</div>
</div>
@ -258,11 +271,10 @@
center
>
<div class="tc-box">
<el-form :model="ruleForms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="挂单名称" prop="name">
<el-input v-model="ruleForms.name">
<template slot="append">元</template>
</el-input>
</el-form-item>
<div class="h-size">
@ -273,7 +285,7 @@
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="hangingAnOrder = false">取 消</el-button>
<el-button type="primary" @click="hangingAnOrder = false">确 定</el-button>
<el-button type="primary" @click="pendingOrders()">确定挂单</el-button>
</span>
</el-dialog>
<el-dialog
@ -309,11 +321,15 @@
width="910px"
center
>
<pickUp></pickUp>
<!-- 商品挂单 子组件 -->
<pickUp :pendingOrdersList="pendingOrdersList" @fatherPendingOrdersList="fatherPendingOrdersList"
@fatherPendingOrdersName="fatherPendingOrdersName"
></pickUp>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="pickUpTheOrder = false">取消</el-button>
<el-button type="primary" @click="pickUpTheOrder = false">作废</el-button>
<el-button type="primary" @click="pickUpTheOrder = false">取单</el-button>
<!-- pendingOrdersList pickUpTheOrder = false pickUpTheOrder = false -->
<el-button type="primary" @click="deletePendingOrdersList">作废</el-button>
<el-button type="primary" @click="getPendingOrdersList">取单</el-button>
</span>
</el-dialog>
<el-dialog
@ -347,11 +363,11 @@
center
>
<div class="tc-box">
<refuelingAmount></refuelingAmount>
<refuelingAmount :goodsItem="oilGun" ref="refuelingAmount" @fatherMethod="fatherMethod"></refuelingAmount>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="refuelingAmount = false">取 消</el-button>
<el-button type="primary" @click="refuelingAmount = false">确 定</el-button>
<el-button type="primary" @click="sonButton()">确 定</el-button>
</span>
</el-dialog>
</div>
@ -362,12 +378,26 @@ import pickUp from './newHomeComponents/pickUpTheOrder.vue'
import accountPending from './newHomeComponents/accountPending.vue'
import memberRecharge from './newHomeComponents/memberRecharge.vue'
import refuelingAmount from './newHomeComponents/refuelingAmount.vue'
import { cashRegisterList, cashRegisterGoodsList } from '@/api/newHome/newHome.js'
export default {
data() {
return {
//
value: '',
//商品子组件选中时 容器
sonGoodsList: [],
//油枪 父传子
oilGun: '',
//油枪结算 容器
oilGunClearing: '',
//商品列表
goodsList: [],
restaurants: [],
state: '',
timeout: null,
//挂单数据容器
pendingOrdersList: [],
timeout: null,
boxShow: true,
boxShow1: true,
boxShow2: true,
@ -411,75 +441,220 @@ export default {
num: '0'
}
],
tabList: [
{
name: '全部',
id: ''
},
{
name: '92#',
id: '1'
},
{
name: '95#',
id: '2'
},
{
name: '98#',
id: '3'
},
{
name: '0#',
id: '4'
},
],
userInfo:true,//判断登录状态
ruleIndex:0,
//油枪数据 初始化容器
tabList: {
'01': [],
'02': [],
'03': [],
'04': []
},
//油枪列表数据
dataList: {},
userInfo: true,//判断登录状态
ruleIndex: 0,
tabIndex: 0,
newMember: false,
ScanCodePayment: false,
cashPayment: false,
ruleForm: {
name: '',
name: ''
},
ruleForms: {
name: '',
name: ''
},
rules: {
name: [
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
{ required: true, message: '请输入挂单名称', trigger: 'blur' }
]
},
refuelingAmount: false,
hangingAnOrder: false,
paymentResults: false,
pickUpTheOrder: false,
accountPending: false,
memberRecharge: false,
memberRecharge: false
}
},
components:{
watch: {
//监听子弹窗成功 提交了 然后再隐藏子元素标签
oilGunClearing: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
this.refuelingAmount = false
}
}
},
components: {
pickUp,
accountPending,
memberRecharge,
refuelingAmount
},
created() {
//初始化 油枪 商品
this.getOilList()
this.getGoodsList()
},
mounted() {
this.restaurants = this.loadAll();
},
computed: {
getGoodsItem() {
if (this.oilGunClearing.amount && this.oilGunClearing.amount !== undefined) {
// 保留两位小数
let l = this.oilGunClearing.amount / this.oilGunClearing.oilPrice
// 8号枪（21.03L/191.7936元）
return `${this.oilGunClearing.gunName}（${l.toFixed(2)}L/${this.oilGunClearing.amount}元）`
} else {
return ''
}
},
//总金额
getGoodsNum() {
let total = 0
this.goodsList.forEach(item => {
total += item.retailPrice * item.num
})
return total
},
//总数量
getGoodsListNum() {
let total = 0
this.goodsList.forEach(item => {
total += item.num
})
return total
}
},
methods: {
invokePickUpTheOrder(){
//油枪初始化
getOilList() {
cashRegisterList().then(res => {
this.tabList = res.data
//加上全部选项
this.tabList = {
'全部': 'all',
...this.tabList
}
for (const key in this.tabList) {
// 循环为 不同油号 赋值不同图片样式
if (key == '0#') {
this.tabList[key].forEach(item => {
item.img = './imgs/0oil.png'
item.classStyle = 'card0'
})
}
if (key == '98#') {
this.tabList[key].forEach(item => {
item.img = './imgs/98oil.png'
item.classStyle = 'card98'
})
}
if (key == '95#') {
this.tabList[key].forEach(item => {
item.img = './imgs/95oil.png'
item.classStyle = 'card95'
})
}
if (key == '92#') {
this.tabList[key].forEach(item => {
item.img = './imgs/92oil.png'
item.classStyle = 'card92'
})
}
}
// 调用一下油枪数据列表 初始化
this.setTabindex('全部', 0)
})
},
//商品初始化
async getGoodsList() {
const res = await cashRegisterGoodsList()
this.restaurants = res.data
},
invokePickUpTheOrder() {
//获取存储数据
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
this.pickUpTheOrder = true
},
invokeHangingAnOrder(){
this.hangingAnOrder = true
//确定挂单
pendingOrders() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
// 1.先取出之前的转 json 然后追加 将 JSON 字符串解析回对象
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
// 2.商品列表没有数据不允许添加
if (!this.goodsList.length) {
this.$message.error('商品列表为空，请添加商品')
return
}
// 3.如果名称重复则不允许添加
let bo1 = true
this.pendingOrdersList.forEach(item => {
if (item.name == this.ruleForms.name) {
this.$message.error('名称重复，请重新输入')
bo1 = false
return
}
})
// 4.追加数据
if (bo1) {
this.pendingOrdersList.push(
{
name: this.ruleForms.name,
list: this.goodsList
}
)
// 将当前 商品订单表 放入 sessionStorage
window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
// 清空当前商品
this.goodsList = []
//重置表单 关闭弹窗
this.ruleForms = {
name: ''
}
this.hangingAnOrder = false
}
} else {
console.log('error submit!!')
return false
}
})
},
addVip(){
//挂单
invokeHangingAnOrder() {
this.hangingAnOrder = true
//必须 输入 挂单名称 将数据临时存储在 sessionStorage 刷新自动取消
},
addVip() {
this.newMember = true
},
addMemberRecharge(){
addMemberRecharge() {
this.memberRecharge = true
},
changeBox() {
@ -491,83 +666,203 @@ export default {
changeBox2() {
this.boxShow2 = !this.boxShow2
},
setTabindex(index) {
setTabindex(key, index) {
//列表选中样式
this.tabIndex = index
if (key == '全部') {
this.dataList = []
for (const tabKey in this.tabList) {
this.dataList = this.dataList.concat(this.tabList[tabKey])
}
//因为 页面展示多加了一个 全部 要删掉第一个元素
this.dataList.shift()
} else {
for (const tabKey in this.tabList) {
if (key == tabKey) {
this.dataList = this.tabList[tabKey]
}
}
}
},
setindex(index){
setindex(index) {
this.ruleIndex = index
},
setRefuelingAmount(){
setRefuelingAmount(item) {
this.refuelingAmount = true
//赋值 传给子组件的油枪对象
this.oilGun = item
},
loadAll() {
return [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
{ "value": "钱记", "address": "上海市长宁区天山西路" },
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
];
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
{ 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
{ 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
{ 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
{ 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
{ 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
{ 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
{ 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
{ 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
{ 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
{ 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
{ 'value': 'NONO JUICE 鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
{ 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
{ 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
{ 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
{ 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
{ 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
{ 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
{ 'value': '钱记', 'address': '上海市长宁区天山西路' },
{ 'value': '壹杯加', 'address': '上海市长宁区通协路' },
{ 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
{ 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
{ 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
{ 'value': '鲜果榨汁（金沙江路和美广店）', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
{ 'value': '开心丽果（缤谷店）', 'address': '上海市长宁区威宁路天山路341号' },
{ 'value': '超级鸡车（丰庄路店）', 'address': '上海市嘉定区丰庄路240号' },
{ 'value': '妙生活果园（北新泾店）', 'address': '长宁区新渔路144号' },
{ 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
{ 'value': '凡仔汉堡（老真北路店）', 'address': '上海市普陀区老真北路160号' },
{ 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
{ 'value': '蜀香源麻辣香锅（剑河路店）', 'address': '剑河路443-1' },
{ 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
{ 'value': '饭典*新简餐（凌空SOHO店）', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
{ 'value': '焦耳·川式快餐（金钟路店）', 'address': '上海市金钟路633号地下一层甲部' },
{ 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
{ 'value': '浏阳蒸菜', 'address': '天山西路430号' },
{ 'value': '四海游龙（天山西路店）', 'address': '上海市长宁区天山西路' },
{ 'value': '樱花食堂（凌空店）', 'address': '上海市长宁区金钟路968号15楼15-105室' },
{ 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
{ 'value': '福荣祥烧腊（平溪路店）', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
{ 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
{ 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
{ 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
{ 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
{ 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' }
]
},
//必须是异步方法
querySearchAsync(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
const restaurants = this.restaurants
let results
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 1000 * Math.random());
if (queryString) {
results = restaurants.filter(this.createFilter(queryString))
} else {
results = restaurants
}
cb(results)
},
createStateFilter(queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
createFilter(queryString) {
return (restaurant) => {
return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
handleSelect(item) {
console.log(item);
//取单 下拉框是子组件 子组件通过数据监听 将数据发送给父组件
getPendingOrdersList() {
//并且删除 父传子数据容器 以及 重新存储sessionStorage
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
if (this.pendingOrdersList.length) {
let found = false
this.pendingOrdersList = this.pendingOrdersList.filter(item => {
if (item.name === this.value) {
if (!found) {
this.goodsList = item.list
found = true
}
return false // 不保留匹配的项
}
return true // 保留不匹配的项
})
window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
} else {
this.$message.error('当前无存单 请存单后再作废')
}
},
//作废 下拉框是子组件 子组件通过数据监听 将数据发送给父组件
deletePendingOrdersList() {
//并且删除 父传子数据容器 以及 重新存储sessionStorage
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
if (this.pendingOrdersList.length) {
this.pendingOrdersList = this.pendingOrdersList.filter(item => {
return item.name !== this.value
})
window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
} else {
this.$message.error('当前无存单 请存单后再作废')
}
},
// 接受子组件列表数据变化
fatherPendingOrdersList(list) {
this.sonGoodsList = list
},
// 接受子组件下拉选中名字变化
fatherPendingOrdersName(value) {
this.value = value
},
//删除商品
deleteGoods(id) {
//根据id删除数组元素
this.goodsList = this.goodsList.filter(item => item.id != id)
},
// 子组件提交调用父组件方法
fatherMethod(list) {
//将当前选中油枪 放入 油枪订单容器 (需要被数据监听)
this.oilGunClearing = { amount: list, ...this.oilGun }
},
//获取子组件数据
sonButton() {
//调用子组件方法
this.$refs.refuelingAmount.submitForm('ruleForm')
},
handleSelect(row) {
let bo1 = true
// 如果 item 存在 goodsList 则 属性+1 不存在直接添加到数组
// 使用 map 生成新数组 防止vue监听不到数组内数据变化
this.goodsList = this.goodsList.map(
item => {
if (item.id == row.id) {
bo1 = false
return { ...item, num: item.num + 1 }
} else {
return item
}
}
)
if (bo1) {
//如果没有先添加数量属性 默认1
row.num = 1
this.goodsList.push(row)
}
},
// 油枪重置
oilGunReset() {
this.oilGunClearing = {}
},
// 收银重置
goodsReset() {
this.goodsList = []
}
}
}
@ -1125,7 +1420,8 @@ input {
justify-content: space-between;
margin: 15px auto;
}
.left_input{
.left_input {
width: 70%;
border: 1px solid #fff;
box-sizing: border-box;

122
fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/pickUpTheOrder.vue
View File

@ -1,8 +1,24 @@
<script >
<script>
export default {
props: {
pendingOrdersList: {
type: Array,
default: []
}
},
created() {
// 如果有数据
if (this.pendingOrdersList.length) {
this.value = this.pendingOrdersList[0].name
this.tableData = this.pendingOrdersList[0].list
} else {
this.tableData = []
this.value = ''
}
},
data() {
return {
input:'',
value: '',
tableData: [{
date: '2016-05-02',
name: '王小虎',
@ -21,51 +37,89 @@ export default {
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
// 监听器
watch: {
value(newValue, oldValue) {
if (this.pendingOrdersList.length) {
this.pendingOrdersList.forEach(
item => {
if (item.name == newValue) {
this.tableData = item.list
this.$emit('fatherPendingOrdersList', this.tableData)
this.$emit('fatherPendingOrdersName', newValue)
}
}
)
}
},
pendingOrdersList: {
//初始化时候不执行
immediate: false,
handler(newValue) {
if (this.pendingOrdersList.length) {
this.value = this.pendingOrdersList[0].name
this.tableData = this.pendingOrdersList[0].list
} else {
this.tableData = []
this.value = ''
}
}
}
}
}
</script>
<template>
<div class="s-">
<div>
<el-input v-model="input" placeholder="请输入挂单名称备份"></el-input>
<div class="xz_">挂单1</div>
<div class="xz_">挂单2</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;margin-left: 20px">
<el-table-column
prop="date"
label="商品名称"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="零售价"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="数量">
</el-table-column>
<el-table-column
prop="address"
label="金额">
</el-table-column>
</el-table>
</div>
<div class="s-">
<div>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in pendingOrdersList"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</div>
<el-table
:data="tableData"
border
style="width: 100%;margin-left: 20px"
>
<el-table-column
prop="name"
label="商品名称"
width="180"
>
</el-table-column>
<el-table-column
prop="retailPrice"
label="零售价"
width="180"
>
</el-table-column>
<el-table-column
prop="num"
label="数量"
>
</el-table-column>
</el-table>
</div>
</template>
<style scoped lang="scss">
.s-{
.s- {
width: 100%;
display: flex;
margin-right: 20px;
}
.xz_{
.xz_ {
font-weight: 400;
font-size: 16px;
color: #333333;

95
fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/refuelingAmount.vue
View File

@ -1,9 +1,18 @@
<script >
<script>
export default {
props: {
goodsItem: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
ruleForm: {
name: '',
//金额
amount: 100,
region: '',
date1: '',
date2: '',
@ -12,17 +21,17 @@ export default {
resource: '',
desc: ''
},
findex:0,
priceList:[
"¥100",
"¥150",
"¥200",
"¥300",
findex: 0,
priceList: [
100,
300,
500,
600,
800
],
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
amount: [
{ required: true, message: '请输入加油金额', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
@ -43,24 +52,28 @@ export default {
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
}
},
methods: {
setIndex(index){
setIndex(index) {
this.findex = index
//不能直接 = 赋值 vue 监听不到属性值变化
this.$set(this.ruleForm, 'amount', this.priceList[index])
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
// alert('submit!')
this.$emit('fatherMethod', this.ruleForm.amount)
} else {
console.log('error submit!!');
return false;
console.log('error submit!!')
return false
}
});
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.$refs[formName].resetFields()
}
}
}
@ -71,34 +84,41 @@ export default {
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<div class="input-box">
<div>已选油品</div>
<div>汽油92#</div>
<div>{{ goodsItem.oilName }}</div>
</div>
<div class="input-box">
<div>已选油枪</div>
<div>1号枪</div>
<div>{{ goodsItem.gunName }}</div>
</div>
<div class="input-box">
<div>油品单价</div>
<div>8.5元/L</div>
<div>{{ goodsItem.oilPrice }}元/L</div>
</div>
<el-input v-model="ruleForm.name" style="width: 490px" placeholder="请输入加油金额">
<template slot="append">元</template>
</el-input>
<el-form-item prop="amount" label="" class="item10086">
<el-input v-model="ruleForm.amount" placeholder="请输入加油金额">
<template slot="append">元</template>
</el-input>
</el-form-item>
<div class="box-">
<div class="fo-box" @click="setIndex(index)" :class="{ 'active' : findex == index }" v-for="(item,index) in priceList" :key="index">
{{item}}
</div>
<div class="fo-box" @click="setIndex(index)" :class="{ 'active' : findex == index }"
v-for="(item,index) in priceList" :key="index"
>
{{ item }}
</div>
</div>
</el-form>
</div>
</template>
<style scoped lang="scss">
.hui-size{
.hui-size {
font-size: 12px;
color: #999999;
}
.input-box{
.input-box {
width: 490px;
height: 36px;
border-radius: 4px;
@ -112,14 +132,16 @@ export default {
font-size: 14px;
color: #FF9655;
}
.box-{
.box- {
width: 490px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px auto;
}
.fo-box{
.fo-box {
width: 72px;
height: 36px;
background: #D8D8D8;
@ -132,8 +154,17 @@ export default {
cursor: pointer;
}
.active{
.active {
background: #FF9655 !important;
color: #fff !important;
}
</style>
<style>
.item10086 .el-form-item__content {
margin-left: 0px !important;
}
</style>