优化全选input

ghsApp/src/admin/billing/index.vue

@@ -76,8 +76,17 @@
 				<view class="select-cmd_bx" v-if="customData">
 					<view class="kc"> 库存 {{ customData.stock }} </view>
 					<view class="num_bx">
-						<input v-model="customData.bigCount" type="number" />扎
-						<input v-model="customData.smallCount" type="number" style="margin-left:24upx" />支
+						<allMoreSelectInput
+							:isActive="isActive" :isFocus="isFocus" :value="customData.bigCount"
+							:isActiveOne="isActiveOne" :isFocusOne="isFocusOne" :valueOne="customData.smallCount"
+							@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput"
+							@deleteInputValOne="deleteInputValOne" @initAllInputOne="initAllInputOne" @moveAllInputOne="moveAllInputOne">
+						</allMoreSelectInput>
+						<!--<allMoreSelectInput :isActive="isActive" :isFocus="isFocus" :value="customData.smallCount"-->
+																										<!--@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput">-->
+						<!--</allMoreSelectInput>支-->
+						<!--<input v-model="customData.bigCount" type="number" />扎-->
+						<!--<input v-model="customData.smallCount" type="number" style="margin-left:24upx" />支-->
 					</view>
 				</view>
 			</template>
@@ -104,6 +113,9 @@ import Commondity from "@/components/module/app-commodity";
 import FooterCart from "@/components/module/app-footer-cart";
 import ModalModule from "@/components/plugin/modal";
 
+import allMoreSelectInput from "@/components/module/allMoreSelectInput";
+import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";
+
 import { COMMODITY_TYPE } from "@/utils/declare";
 import productMins from "@/mixins/product";
 export default {
@@ -114,9 +126,9 @@ export default {
 		AppWrapperEmpty,
 		Commondity,
 		ModalModule,
-		FooterCart
+		FooterCart,allMoreSelectInput
 	},
-	mixins: [productMins],
+	mixins: [productMins,allMoreSelectInputMins],
 	data() {
 		return {
 			COMMODITY_TYPE,
@@ -165,6 +177,8 @@ export default {
 			this.customData = {};
 		}, // 取消 确认
 		affirm(val) {
+			this.isFocus = false;
+			this.isFocusOne = false;
 			if (val.index === 0) {
 				this.modalCancel();
 			} else {

ghsApp/src/admin/billing/priceChange.vue

@@ -26,7 +26,6 @@
 
     </view>
   </view>
-  </view>
 </template>
 
 <script>

ghsApp/src/components/module/allMoreSelectInput.vue

@@ -0,0 +1,103 @@
+<style lang="scss" scoped>
+	.change-input-box{
+		display: flex;
+		align-items: center;
+		.change-input {
+			position: relative;
+			width: 212px;
+			height: 80rpx;
+			line-height: 80rpx;
+			border: 1px solid #dddddd;
+			border-radius: 4px;
+			text-align: center;
+			margin-right: 24px;
+			font-size: 40rpx;
+			input{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+			}
+			text{
+				&.active{
+					background: rgba(10,150,210,0.6);
+				}
+			}
+		}
+		.unit{
+			width: 50rpx;
+			text-align: center;
+		}
+	}
+
+</style>
+<template>
+	<view class="change-input-box">
+		<view class="change-input">
+				<input :focus="isFocus" type="number" @focus="initAllInput" @blur="moveAllInput" v-model="inputVal" @input="changeAllInput" >
+				<text :class="isActive?'active':''">{{value}}</text>
+		</view>
+		<view class="unit">扎</view>
+		<view class="change-input">
+			<input :focus="isFocusOne" type="number" @focus="initAllInputOne" @blur="moveAllInputOne" v-model="inputValOne" @input="changeAllInputOne" >
+			<text :class="isActiveOne?'active':''">{{valueOne}}</text>
+		</view>
+		<view class="unit">支</view>
+	</view>
+</template>
+<script>
+export default {
+  name: "allSelectInput",
+	props: {
+		isActive: '',
+		isFocus: '',
+		value: '',
+
+		isActiveOne: '',
+		isFocusOne: '',
+		valueOne: '',
+	},
+	data() {
+		return {
+			inputVal:'',
+			inputValOne:'',
+		};
+	},
+	onLoad(e){
+  	this.title = e.title
+	},
+  methods: {
+			initAllInput() {
+				this.$emit('initAllInput')
+    },
+			moveAllInput(){
+				let inputVal = this.inputVal
+				this.inputVal = '';
+				this.$emit('moveAllInput',inputVal)
+			},
+			changeAllInput(e){
+    	if(e.detail.keyCode==8){
+    		this.$emit('deleteInputVal')
+						return;
+					}
+				this.$emit('deleteInputVal')
+			},
+
+
+			initAllInputOne() {
+				this.$emit('initAllInputOne')
+    },
+			moveAllInputOne(){
+				let inputVal = this.inputValOne
+				this.inputValOne = '';
+				this.$emit('moveAllInputOne',inputVal)
+			},
+			changeAllInputOne(e){
+    	if(e.detail.keyCode==8){
+    		this.$emit('deleteInputValOne')
+						return;
+					}
+				this.$emit('deleteInputValOne')
+			},
+  },
+};
+</script>

ghsApp/src/mixins/allMoreSelectInput.js

@@ -0,0 +1,49 @@
+export default {
+	data() {
+		return {
+			isActive: false,
+			isFocus: false,
+
+			isActiveOne: false,
+			isFocusOne: false,
+		};
+	},
+
+	methods: {
+		// 离开全选input
+		moveAllInput(e){
+			this.isActive=false;
+			this.isFocus=false;
+			if(e==''){return}
+			this.customData.bigCount = e;
+		},
+		//input点击删除按键
+		deleteInputVal(){
+			this.isActive=false;
+			this.customData.bigCount = '';
+		},
+		// 选中input
+		initAllInput(){
+			this.isActive=true;
+			this.isFocus=true;
+		},
+
+		// 离开全选input
+		moveAllInputOne(e){
+			this.isActiveOne=false;
+			this.isFocusOne=false;
+			if(e==''){return}
+			this.customData.smallCount = e;
+		},
+		//input点击删除按键
+		deleteInputValOne(){
+			this.isActiveOne=false;
+			this.customData.smallCount = '';
+		},
+		// 选中input
+		initAllInputOne(){
+			this.isActiveOne=true;
+			this.isFocusOne=true;
+		},
+	}
+};

ghsApp/src/pagesPurchase/add.vue

@@ -113,8 +113,14 @@
 							<view class="kc">
 								数量
 							</view>
-							<input v-model="customData.bigCount" type="number" focus />扎
-							<input v-model="customData.smallCount" type="number" style="margin-left:24upx"/>支
+							<allMoreSelectInput
+								:isActive="isActive" :isFocus="isFocus" :value="customData.bigCount"
+								:isActiveOne="isActiveOne" :isFocusOne="isFocusOne" :valueOne="customData.smallCount"
+								@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput"
+								@deleteInputValOne="deleteInputValOne" @initAllInputOne="initAllInputOne" @moveAllInputOne="moveAllInputOne">
+							</allMoreSelectInput>
+							<!--<input v-model="customData.bigCount" type="number" focus />扎-->
+							<!--<input v-model="customData.smallCount" type="number" style="margin-left:24upx"/>支-->
 						</view>
 					</view>
 				</view>
@@ -146,6 +152,9 @@ import CommodityPurchase from "./components/CommodityPurchase";
 import ModalModule from "@/components/plugin/modal";
 import FooterCart from "@/components/module/app-footer-cart";
 import productMins from "@/mixins/product";
+
+import allMoreSelectInput from "@/components/module/allMoreSelectInput";
+import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";
 export default {
 	name: "purchase", // 采购
 	components: {
@@ -154,9 +163,9 @@ export default {
 		AppWrapperEmpty,
 		CommodityPurchase,
 		ModalModule,
-		FooterCart
+		FooterCart,allMoreSelectInput
 	},
-	mixins: [productMins],
+	mixins: [productMins,allMoreSelectInputMins],
 	data() {
 		return {
 			pageType: "purchase",
@@ -182,6 +191,8 @@ export default {
 			this.customData = {};
 		}, // 取消 确认
 		affirm(val) {
+			this.isFocus = false;
+			this.isFocusOne = false;
 			if(this.customData.bigCount==0 && this.customData.smallCount==0){
 				this.delAllEvent(this.customData)}
 
@@ -238,8 +249,13 @@ export default {
 	}
 };
 </script>
-
+<style>
+	.change-input{
+		width: 170rpx !important;
+	}
+</style>
 <style lang="scss" scoped>
+
 .billing_box_bg {
 	height: 100%;
 	display: flex;

ghsApp/src/pagesStorehouse/allot/exSelect.vue

@@ -120,12 +120,14 @@
 				<view class="select-cmd_bx" v-if="customData">
 					<view class="kc"> 库存{{ customData.stock }} </view>
 					<view class="num_bx">
-						<input v-model="customData.bigCount" type="number" />扎
-						<input
-							v-model="customData.smallCount"
-							type="number"
-							style="margin-left:24upx"
-						/>支
+						<allMoreSelectInput
+							:isActive="isActive" :isFocus="isFocus" :value="customData.bigCount"
+							:isActiveOne="isActiveOne" :isFocusOne="isFocusOne" :valueOne="customData.smallCount"
+							@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput"
+							@deleteInputValOne="deleteInputValOne" @initAllInputOne="initAllInputOne" @moveAllInputOne="moveAllInputOne">
+						</allMoreSelectInput>
+						<!--<input v-model="customData.bigCount" type="number" />扎-->
+						<!--<input v-model="customData.smallCount" type="number" style="margin-left:24upx"/>支-->
 					</view>
 				</view>
 			</template>
@@ -157,6 +159,8 @@ import FooterCart from "@/components/module/app-footer-cart";
 import ModalModule from "@/components/plugin/modal";
 import { COMMODITY_TYPE } from "@/utils/declare";
 import productMins from "@/mixins/product";
+import allMoreSelectInput from "@/components/module/allMoreSelectInput";
+import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";
 export default {
 	name: "allotEx", // 开单
 	components: {
@@ -165,9 +169,9 @@ export default {
 		AppWrapperEmpty,
 		Commondity,
 		ModalModule,
-		FooterCart
+		FooterCart,allMoreSelectInput
 	},
-	mixins: [productMins],
+	mixins: [productMins,allMoreSelectInputMins],
 	data() {
 		return {
 			COMMODITY_TYPE,
@@ -213,6 +217,8 @@ export default {
 			this.customData = {};
 		}, // 取消 确认
 		affirm(val) {
+			this.isFocus = false;
+			this.isFocusOne = false;
 			if (val.index === 0) {
 				this.modalCancel();
 			} else {