|
|
@@ -1,11 +1,236 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- 商品消费
|
|
|
+<!-- <a-row type="flex">-->
|
|
|
+<!-- <a-col :flex="1">1 / 3</a-col>-->
|
|
|
+<!-- <a-col :flex="2">2 / 3</a-col>-->
|
|
|
+<!-- </a-row>-->
|
|
|
+<!-- <a-row type="flex" style="flex-direction: row">-->
|
|
|
+<!-- <a-col :flex="1">-->
|
|
|
+<!-- <a-spin :spinning="confirmLoading">-->
|
|
|
+<!-- <j-form-container >-->
|
|
|
+<!-- <a-form-model ref="form" :model="model" slot="detail">-->
|
|
|
+<!-- <a-row>-->
|
|
|
+<!-- <a-col :span="24">-->
|
|
|
+<!-- <a-form-model-item label="支付方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMethod">-->
|
|
|
+<!-- <a-select-->
|
|
|
+<!-- v-model="model.paymentMethod"-->
|
|
|
+<!-- style="width: 30%"-->
|
|
|
+<!-- placeholder="支付方式" >-->
|
|
|
+<!-- <a-select-option-->
|
|
|
+<!-- v-for="(item, index) in paymentMethodList"-->
|
|
|
+<!-- :key="index"-->
|
|
|
+<!-- :value="item.id"-->
|
|
|
+<!-- >{{ item.name }}</a-select-option>-->
|
|
|
+<!-- </a-select>-->
|
|
|
+<!-- </a-form-model-item>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :span="24">-->
|
|
|
+<!-- <a-form-model-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">-->
|
|
|
+<!-- <a-input-number-->
|
|
|
+<!-- v-model="model.price"-->
|
|
|
+<!-- placeholder="请输入金额"-->
|
|
|
+<!-- style="width: 30%"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </a-form-model-item>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :span="24">-->
|
|
|
+<!-- <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">-->
|
|
|
+<!-- <a-textarea-->
|
|
|
+<!-- v-model="model.remarks"-->
|
|
|
+<!-- rows="4"-->
|
|
|
+<!-- placeholder="请输入备注"-->
|
|
|
+<!-- style="width: 90%"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </a-form-model-item>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+
|
|
|
+<!-- </a-row>-->
|
|
|
+<!-- </a-form-model>-->
|
|
|
+<!-- </j-form-container>-->
|
|
|
+<!-- </a-spin>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :flex="2">-->
|
|
|
+<!-- <a-spin :spinning="confirmLoading">-->
|
|
|
+<!-- <j-form-container >-->
|
|
|
+<!-- <a-form-model ref="form" :model="model" slot="detail">-->
|
|
|
+<!-- <a-row>-->
|
|
|
+<!-- <a-col :span="24">-->
|
|
|
+<!-- <a-form-model-item label="支付方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMethod">-->
|
|
|
+<!-- <a-select-->
|
|
|
+<!-- v-model="model.paymentMethod"-->
|
|
|
+<!-- style="width: 30%"-->
|
|
|
+<!-- placeholder="支付方式" >-->
|
|
|
+<!-- <a-select-option-->
|
|
|
+<!-- v-for="(item, index) in paymentMethodList"-->
|
|
|
+<!-- :key="index"-->
|
|
|
+<!-- :value="item.id"-->
|
|
|
+<!-- >{{ item.name }}</a-select-option>-->
|
|
|
+<!-- </a-select>-->
|
|
|
+<!-- </a-form-model-item>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :span="24">-->
|
|
|
+<!-- <a-form-model-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">-->
|
|
|
+<!-- <a-input-number-->
|
|
|
+<!-- v-model="model.price"-->
|
|
|
+<!-- placeholder="请输入金额"-->
|
|
|
+<!-- style="width: 30%"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </a-form-model-item>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :span="24">-->
|
|
|
+<!-- <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">-->
|
|
|
+<!-- <a-textarea-->
|
|
|
+<!-- v-model="model.remarks"-->
|
|
|
+<!-- rows="4"-->
|
|
|
+<!-- placeholder="请输入备注"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </a-form-model-item>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+
|
|
|
+<!-- </a-row>-->
|
|
|
+<!-- </a-form-model>-->
|
|
|
+<!-- </j-form-container>-->
|
|
|
+<!-- </a-spin>-->
|
|
|
+<!-- <div style="height: 200px">-->
|
|
|
+
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- </a-row>-->
|
|
|
+ <div class="contentGoods">
|
|
|
+ <div class="left">
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
+ <j-form-container >
|
|
|
+ <a-form-model ref="form" :model="model" slot="detail">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="消费类目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="stockType">
|
|
|
+ <a-select
|
|
|
+ v-model="model.stockType"
|
|
|
+ style="width: 90%"
|
|
|
+ @change="changeStockType"
|
|
|
+ placeholder="消费类目" >
|
|
|
+ <a-select-option
|
|
|
+ v-for="(item, index) in stockTypeList"
|
|
|
+ :key="index"
|
|
|
+ :value="item.id"
|
|
|
+ >{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="消费金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">
|
|
|
+ <a-input-number
|
|
|
+ disabled
|
|
|
+ v-model="model.amount"
|
|
|
+ placeholder="请输入金额"
|
|
|
+ style="width: 90%"
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
|
|
|
+ <a-textarea
|
|
|
+ v-model="model.remarks"
|
|
|
+ rows="4"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ style="width: 90%"
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
+ </j-form-container>
|
|
|
+ </a-spin>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
+ <j-form-container>
|
|
|
+ <a-form-model ref="form" :model="model" slot="detail">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="9" v-if="type == 1">
|
|
|
+ <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="childStockType">
|
|
|
+ <a-select
|
|
|
+ v-model="model.childStockType"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="changeStockType"
|
|
|
+ placeholder="类别" >
|
|
|
+ <a-select-option
|
|
|
+ v-for="(item, index) in childStockTypeList"
|
|
|
+ :key="index"
|
|
|
+ :value="item.id"
|
|
|
+ >{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="9">
|
|
|
+ <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
|
|
+ <a-input
|
|
|
+ v-model="model.goodsName"
|
|
|
+ placeholder="名称"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="2">
|
|
|
+ <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
|
|
+ <a-button @click="handleSearch()">
|
|
|
+ <a-icon type="search" />
|
|
|
+ </a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-button @click="handleChangeType()">
|
|
|
+ {{type == 1 ?"切换扫码模式":"切换普通模式"}}
|
|
|
+ </a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
+ </j-form-container>
|
|
|
+ </a-spin>
|
|
|
+ <div style="max-height: 500px;height: 500px;">
|
|
|
+ <a-table
|
|
|
+ :scroll="{ y: 460 }"
|
|
|
+ :pagination="false"
|
|
|
+ ref="table"
|
|
|
+ size="middle"
|
|
|
+ bordered
|
|
|
+ rowKey="id"
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ :loading="loading"
|
|
|
+ class="j-table-force-nowrap">
|
|
|
+
|
|
|
+ <template slot="priceSlot" slot-scope="text,record">
|
|
|
+ <a-input-number
|
|
|
+ v-model="record.sellingPrice"
|
|
|
+ placeholder="请输入金额"
|
|
|
+ style="width: 90%"
|
|
|
+ @change="e=>changePrice(e,record)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template slot="numberSlot" slot-scope="text,record">
|
|
|
+ <a-input-number
|
|
|
+ v-model="record.number"
|
|
|
+ placeholder="请输入数量"
|
|
|
+ style="width: 90%"
|
|
|
+ @change="e=>changeNumber(e,record)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { httpAction, getAction } from "@/api/manage";
|
|
|
+ import '@/assets/less/TableExpand.less'
|
|
|
+ import { mixinDevice } from '@/utils/mixin'
|
|
|
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
|
|
|
export default {
|
|
|
name: 'goodsConsumeForm',
|
|
|
@@ -17,12 +242,70 @@
|
|
|
required: false
|
|
|
}
|
|
|
},
|
|
|
+ mixins:[JeecgListMixin, mixinDevice],
|
|
|
data () {
|
|
|
return {
|
|
|
-
|
|
|
+ confirmLoading: false,
|
|
|
+ model: {
|
|
|
+ stockType:'',
|
|
|
+ amount:0,
|
|
|
+ remarks:'',
|
|
|
+ childStockType:'',
|
|
|
+ },
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 6 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 18 },
|
|
|
+ },
|
|
|
+ paymentMethodList: [],
|
|
|
+ stockTypeList:[],
|
|
|
+ childStockTypeList:[],
|
|
|
+ type:1,
|
|
|
+ url: {
|
|
|
+ list: "/rooms/cesGoods/queryList",
|
|
|
+ },
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title:'名称',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'售价',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'sellingPrice',
|
|
|
+ scopedSlots: { customRender: 'priceSlot' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'数量',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'number',
|
|
|
+ scopedSlots: { customRender: 'numberSlot' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'剩余库存',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'inventory'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // loading:true,
|
|
|
+ // dataSource:[]
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
+ httpAction(
|
|
|
+ "/rooms/cesStockType/getTopTypes",
|
|
|
+ {},
|
|
|
+ "get"
|
|
|
+ ).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.stockTypeList = res.result;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
methods:{
|
|
|
edit() {
|
|
|
@@ -31,10 +314,113 @@
|
|
|
// this.changeColumns(this.model.roomType, this.model.fixedDiscount)
|
|
|
// this.visible = true;
|
|
|
},
|
|
|
+ changeStockType(e){
|
|
|
+ var _this = this;
|
|
|
+ httpAction(
|
|
|
+ "/rooms/cesStockType/getChildTypes?parentId="+e,
|
|
|
+ { },
|
|
|
+ "get"
|
|
|
+ ).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ _this.childStockTypeList = res.result;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSearch(){
|
|
|
+ var typeId = "";
|
|
|
+ var search = "";
|
|
|
+ if (this.model.childStockType){
|
|
|
+ typeId = this.model.childStockType;
|
|
|
+ }
|
|
|
+ if (this.model.goodsName){
|
|
|
+ search = this.model.goodsName;
|
|
|
+ }
|
|
|
+ this.url.list = "/rooms/cesGoods/queryList?typeId="+typeId+"&search="+search;
|
|
|
+ this.loadData(1);
|
|
|
+ },
|
|
|
+ handleChangeType(){
|
|
|
+ if (this.type == 1){
|
|
|
+ this.type = 2;
|
|
|
+ this.dataSource=[]
|
|
|
+ } else{
|
|
|
+ this.type = 1;
|
|
|
+ this.loadData(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submitForm () {
|
|
|
+ console.log(9999)
|
|
|
+ const that = this;
|
|
|
+ that.$emit('ok');
|
|
|
+ // 触发表单验证
|
|
|
+ // this.$refs.form.validate(valid => {
|
|
|
+ // if (valid) {
|
|
|
+ // that.confirmLoading = true;
|
|
|
+ // let httpurl = '';
|
|
|
+ // let method = '';
|
|
|
+ // if(!this.model.id){
|
|
|
+ // httpurl+=this.url.add;
|
|
|
+ // method = 'post';
|
|
|
+ // this.model.hotelId = hotelInfo.id;
|
|
|
+ // this.model.agreementId = this.agreementModel.id;
|
|
|
+ // }else{
|
|
|
+ // httpurl+=this.url.edit;
|
|
|
+ // method = 'put';
|
|
|
+ // }
|
|
|
+ // httpAction(httpurl,this.model,method).then((res)=>{
|
|
|
+ // if(res.success){
|
|
|
+ // that.$message.success(res.message);
|
|
|
+ // that.$emit('ok');
|
|
|
+ // }else{
|
|
|
+ // // that.$message.warning(res.message);
|
|
|
+ // }
|
|
|
+ // }).finally(() => {
|
|
|
+ // that.confirmLoading = false;
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ //
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ changePrice(e,record){
|
|
|
+ var _amount = 0;
|
|
|
+ var goodsList = this.dataSource;
|
|
|
+ if (goodsList){
|
|
|
+ for (var i = 0; i < goodsList.length; i++) {
|
|
|
+ var goods = goodsList[i];
|
|
|
+ if (parseFloat(goods.number) > 0){
|
|
|
+ var money = parseFloat( goods.sellingPrice )* parseFloat(goods.number)
|
|
|
+ _amount = _amount+ money;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.model.amount = _amount;
|
|
|
+ },
|
|
|
+ changeNumber(e,record){
|
|
|
+ var _amount = 0;
|
|
|
+ var goodsList = this.dataSource;
|
|
|
+ if (goodsList){
|
|
|
+ for (var i = 0; i < goodsList.length; i++) {
|
|
|
+ var goods = goodsList[i];
|
|
|
+ if (parseFloat(goods.number) > 0){
|
|
|
+ var money = parseFloat( goods.sellingPrice )* parseFloat(goods.number)
|
|
|
+ _amount = _amount+ money;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.model.amount = _amount;
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
+ .contentGoods{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ .contentGoods .left{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .contentGoods .right{
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
</style>
|
DESKTOP-B78GIPM\admin