PropertyApp/components/select-single-resource/select-single-resource.vue
2021-07-19 08:24:40 +08:00

341 lines
8.2 KiB
Vue

<template>
<view class="select-single-resource" v-if="showModel">
<view>
<view class="cu-form-group margin-top">
<view class="title">商品类型</view>
<picker :value="goodsTypeIndex" :range="goodsTypeCloums" :range-key="'name'" @change="goodsTypeChange">
<view class="picker">
{{goodsTypeCloums[goodsTypeIndex].name}}
</view>
</picker>
</view>
<view v-if="isCustom">
<view class="cu-form-group margin-top">
<view class="title">商品名</view>
<input v-model="customGoodsName" placeholder="请输入商品名"></input>
</view>
<view class="cu-form-group margin-top" v-show="feeFlag == '1001'">
<view class="title">自定义价格</view>
<input type="number" v-model="singlePrice" placeholder="请输入自定义价格"></input>
</view>
</view>
<view v-else>
<view class="cu-form-group margin-top" v-if="rstId!=''">
<view class="title">商品</view>
<picker :value="goodsIndex" :range="goodsCloums" :range-key="'resName'" @change="goodsChange">
<view class="picker">
{{goodsCloums[goodsIndex].resName}}
</view>
</picker>
</view>
<view v-if="goodsIndex!=0">
<view class="cu-form-group margin-top" v-show="feeFlag == '1001'">
<view class="title">单价</view>
<input type="number" v-model="singlePrice" :disabled="disabledPrice" placeholder="请输入单价"></input>
</view>
<view v-show="feeFlag == '1001'">
<view class="text-right text-grey" v-if="goods.outHighPrice == goods.outLowPrice">价格:{{goods.outLowPrice}}</view>
<view class="text-right text-grey" v-else>价格范围{{goods.outLowPrice}}-{{goods.outHighPrice}}</view>
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<view class="title">数量</view>
<view class="use-num-container">
<view class="dec" @tap="numDec">-</view>
<input class="use-num-input" v-model="useNumber" disabled="disabled" @input="goodsNumChange"></input>
<view class="inc" @tap="numInc">+</view>
</view>
</view>
<view class="flex flex-direction margin-top">
<button class="cu-btn bg-green margin-tb-sm lg" @click="_save()">确定</button>
</view>
<view class="flex flex-direction margin-top">
<button class="cu-btn bg-red margin-tb-sm lg" @click="_canel()">取消</button>
</view>
</view>
</view>
</template>
<script>
import {
loadRepairStaff,
dispatchRepair,
finishRepair,
queryResourceStoreResName,
queryRepairInfo
} from '../../api/repair/repair.js'
export default {
components: {
},
data() {
return {
showModel: false,
amount: '',
singlePrice: '',
useNumber: 1,
disabledPrice: false,
goodsTypeCloums: [{
name: '请选择商品类型'
}],
goodsTypeIndex: 0,
rstId: '',
goodsCloums: [{
resName: '请选择商品'
}],
goodsIndex: 0,
goods: {
"resId": "",
"outLowPrice": "",
"outHighPrice": "",
},
isCustom: false,
customGoodsName: '',
resourceStoreInfo: [],
}
},
props: {
feeFlag: {
type: String
}
},
watch: {
},
created() {
},
computed: {
},
mounted() {
},
methods: {
switchShow: function(){
this.resetData();
this.showModel = !this.showModel;
},
resetData: function(){
let _that = this;
let initData = {
showModel: false,
amount: '',
singlePrice: '',
useNumber: 1,
disabledPrice: false,
goodsTypeCloums: [{
name: '请选择商品类型'
}],
goodsTypeIndex: 0,
rstId: '',
goodsCloums: [{
resName: '请选择商品'
}],
goodsIndex: 0,
goods: {
"resId": "",
"outLowPrice": "",
"outHighPrice": "",
},
isCustom: false,
customGoodsName: '',
resourceStoreInfo: [],
};
this.copyObject(initData, _that);
this._loadRepairGoodsType();
},
copyObject: function (org, dst) {
for (let key in dst) {
if (org.hasOwnProperty(key)) {
dst[key] = org[key]
}
}
},
_loadRepairGoodsType: function(){
let _that = this;
let _data = {
page: 1,
row: 100,
communityId: this.factory.getCurrentCommunity().communityId,
giveType: 1
};
queryRepairInfo(this, _data)
.then(function(res) {
_that.goodsTypeCloums = _that.goodsTypeCloums.concat(res.data);
_that._appendCustomResourceStoreType();
});
},
// 追加自定义类
_appendCustomResourceStoreType: function () {
let customeType = {
rstId: 'custom',
name: '自定义'
};
this.goodsTypeCloums.push(customeType);
},
_loadRepairGoods: function(){
let _that = this;
let _data = {
resId: "",
rstId: this.rstId,
page: 1,
row: 100,
communityId: this.factory.getCurrentCommunity().communityId,
giveType: 1
};
queryResourceStoreResName(this, _data)
.then(function(res) {
let _json = res.data;
if (_json.total < 1) {
uni.showToast({
icon: 'none',
title: '暂无商品'
});
return;
}
let _data = _json.data;
_that.goodsCloums = [{resName: '请选择商品'}]
_that.goodsIndex = 0;
_that.goods = '';
_that.amount = '';
if(_data.length < 1){
return;
}
_that.goodsCloums = _that.goodsCloums.concat(_data);
});
},
goodsTypeChange: function(e){
this.goodsTypeIndex = e.target.value //取其下标
if (this.goodsTypeIndex == 0) {
this.rstId = ''
return;
}
let selected = this.goodsTypeCloums[this.goodsTypeIndex] //获取选中的数组
console.log(selected);
if(selected.rstId == 'custom'){
this.isCustom = true;
return;
}else{
this.isCustom = false;
}
this.rstId = selected.rstId //选中的id
this._loadRepairGoods();
},
goodsChange: function(e){
this.goodsIndex = e.target.value //取其下标
if (this.goodsIndex == 0) {
this.goods = ''
return;
}
let selected = this.goodsCloums[this.goodsIndex] //获取选中的数组
this.goods = selected
if(selected.outLowPrice == selected.outHighPrice){
this.singlePrice = selected.outLowPrice;
this.disabledPrice = true;
}else{
this.singlePrice = '';
this.disabledPrice = false;
}
},
numDec: function(){
if(this.useNumber <= 1){
uni.showToast({
title: '不能再减少了',
icon: 'none'
})
return;
}
this.useNumber -= 1;
},
numInc: function(){
this.useNumber += 1;
},
_save: function(){
// 验证必填项
let msg = '';
if(this.isCustom){
if(!this.customGoodsName){
msg = '请输入商品名';
}else if(this.feeFlag == '1001' && !this.singlePrice){
msg = '请输入有效金额';
}
}else{
if(this.rstId == ''){
msg = "请选择商品类型";
}else if (this.useNumber < 1){
msg = "商品数量不能为零";
}else if (!this.goods){
msg = "请选择商品";
}else if (this.feeFlag == '1001' && !this.singlePrice){
msg = "请输入有效金额";
}
}
if(msg != ''){
wx.showToast({
title:msg,
icon: 'none'
})
return;
}
let chooseResource = this.goods;
chooseResource.price = this.singlePrice;
chooseResource.useNumber = this.useNumber;
chooseResource.isCustom = this.isCustom;
chooseResource.customGoodsName = this.customGoodsName;
if(this.isCustom){
chooseResource.goodsTypeName = '自定义';
}
chooseResource = JSON.stringify(chooseResource);
this.$emit('getResourceInfo', chooseResource)
this.showModel = false;
},
_canel: function(){
this.showModel = false;
}
}
}
</script>
<style>
.select-single-resource{
position: fixed;
top: 100rpx;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
}
.use-num-container{
display: flex;
flex-direction: row;
}
.use-num-input{
width: 100rpx;
text-align: center;
padding: 0;
}
.inc,.dec{
border: 1px solid #000;
border-radius: 50%;
width: 40rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
}
</style>