wms-pda迁移

components/w-select/readme.md

@@ -0,0 +1,72 @@
+#### props
+
+|名称					|类型		|默认值		|说明																										|
+|-						|-			|-				|-																											|
+|width				|string	|'200px'	|选择框宽度																							|
+|height				|string	|'30px'		|选择框高度																							|
+|bgColor			|string	|'#fff'		|选择框背景颜色																					|
+|round				|boolean|true			|是否开启圆角																						|
+|defaultValue			|string				|'请选择'|默认显示的名称|																												|
+|valueName		|string	|'label'	|显示的内容字段名,必传																	|
+|keyName			|string	|'value'	|绑定的内容字段名,必传																	|
+|list					|array	|[]				|展示的内容列表																					|
+|showClose		|boolean|true			|是否显示删除按钮																				|
+|multiple			|boolean|false		|是否开启多选																						|
+|filterable		|boolean|false		|是否开启搜索功能，开启后直接输入值不选择也可以保存内容	|
+
+
+#### events
+
+|事件名|说明|
+|-|-|
+|change|选择的内容改变时触发，返回的参数为列表的item|
+
+
+#### 使用举例
+
+需要绑定的值通过`v-model`绑定，如下面的`chooseValue`，需要获取item的值可以监听`@change`事件
+
+开启多选`multiple`时，双向绑定的值为数组类型，在change事件中根据自己需求进行处理。
+
+`valueName`属性必须传，告知组件需要显示的是什么值
+
+```html
+<template>
+  <view class="login">
+    <w-select 
+			style="margin-left: 20rpx;" 
+      v-model='chooseValue' 
+      defaultValue="所有审批人" 
+      :list='list'
+      valueName='content' 
+			keyName="id"
+      @change='change'
+		>
+    </w-select>
+  </view>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        chooseValue: "",
+        list: [{
+          id: 1,
+          content: '张三'
+        }, {
+          id: 2,
+          content: '李四'
+        }, {
+          id: 3,
+          content: '王五'
+        }],
+      };
+    },
+    methods: {
+      change(e) {
+        console.log('chooseValue', this.chooseValue)
+      }
+    },
+  }
+</script>
+```

components/w-select/w-select.vue

@@ -0,0 +1,630 @@
+<template>
+	<view class="w-select" id="wSelect" :style="{
+			'--select-wrap-width': width,
+			'--select-wrap-height': height,
+			'--select-bg-color': bgColor
+		}">
+		<view :class="isShow ? 'select-wrap-active' : ''" class="select-wrap" @click.stop="changeShow">
+			<view v-if="multiple" class="select-content">
+				<view class="select-content-item-default" v-if="multiSelectList.length === 0">
+					{{ defaultValue }}
+				</view>
+				<view class="select-content-item" v-if="multiSelectList.length > 0">
+					{{ multiSelectList[0][valueName] }}
+				</view>
+				<view class="select-content-item" v-if="multiSelectList.length > 1">
+					{{ multiLength }}
+				</view>
+			</view>
+					<input v-if="!multiple || filterable" type="text"  @input="inputChange" :placeholder="defaultValue"
+						:disabled="!filterable" v-model="inputData" @focus="myselectFocus" :focus="inputFocus" />
+
+			<view @click.stop="refreshValue" class="close-icon" v-if="showClose && inputData.length > 0">
+				<image :src="refreshUrl" mode=""></image>
+			</view>
+			<view v-if="inputData.length <= 0 || !showClose" :class="isShow ? 'w-select-arrow-up' : ''"
+				class="w-select-arrow " />
+			<!-- 下拉框options -->
+			<scroll-view scroll-y v-show="optionsShow" :class="[
+					isShow
+						? showPosition === 'bottom'
+							? 'animation-bottom-in'
+							: 'animation-top-in'
+						: showPosition === 'bottom'
+						? 'animation-bottom-out'
+						: 'animation-top-out',
+					showPosition === 'bottom'
+						? 'position-bottom'
+						: 'position-top'
+				]" class="select-options" @scrolltolower="onBottom">
+				<!--自定义option -->
+				
+				<view v-for="item in filterList">
+					<view class="n_myselect" @click.stop="handleClickItem(item)"
+						v-if="((optionType=='order'&& item.availableQty>0)||(optionType=='order-cg' &&item.waitSlefQty>0)) ">
+						<text class="nmyt1">{{item.sourceBillNo}}</text>
+						<text class="nmyt2">{{item.specifications}}</text>
+						<view class="nmyt3">
+							<text>{{item.materialNumber}}</text>
+							<text class="nmyt4">数量：{{optionType=='order' ?item.availableQty:item.waitSlefQty}}</text>
+						</view>
+					</view>
+				</view>
+				<!--自定义option 非采购 -->
+				<view class="n_myselect" @click.stop="handleClickItem(item)" v-for="item in filterList"
+					v-if="optionType=='order-fcg'">
+					<text class="nmyt1">{{item.sourceBillNo}}</text>
+					<view v-for="(cit,index) in item.details">
+						<view class="" style="background: #fff;margin-bottom: 5px;padding: 5px;border-radius: 6px;"
+							v-if="cit.availableQty">
+							<text class="nmyt2">{{cit.specifications}}</text>
+							<view class="nmyt3">
+								<text>{{cit.materialNumber}}</text>
+								<text class="nmyt4">数量：{{cit.availableQty}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!--strat原始的 -->
+				<view @click.stop="handleClickItem(item)" :class="
+						multiple &&
+						multiSelectList.find(
+							res => res[keyName] === item[keyName]
+						)
+							? 'item-active'
+							: value === item[keyName]
+							? 'item-active'
+							: ''
+					" v-for="item in filterList" class="select-option-item myitem" v-if="optionType=='default'">
+					{{ item[valueName] }}
+				
+				</view>
+				<!--end原始的 -->
+				<view class="options-no-data" v-if="loadingFlag == 2||filterList.length < 1">
+					没有更多数据了
+				</view>
+				<view v-else>
+					<view class="options-no-data" v-if="loadingFlag == 1 && filterList.length !==wselectTotal">上拉加载更多...
+					</view>
+					<view class="options-no-data" v-if="loadingFlag == 1 && filterList.length ==wselectTotal">没有更多数据了
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view v-if="isShow" @click.stop="closeContentSelect" class="contentMask"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			width: {
+				type: String,
+				default: '200px'
+			},
+			height: {
+				type: String,
+				default: '30px'
+			},
+			bgColor: {
+				type: String,
+				default: 'inherit'
+			},
+			//是否多选
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			//是否可搜索
+			filterable: {
+				type: Boolean,
+				default: false
+			},
+			//是否显示关闭按钮
+			showClose: {
+				type: Boolean,
+				default: false
+			},
+			//渲染列表
+			list: {
+				type: Array,
+				default: () => [],
+				required: true
+			},
+			//双向绑定的值
+			value: {
+				type: [Array, String, Number],
+				default: ''
+			},
+			//默认显示的内容
+			defaultValue: {
+				type: String,
+				default: '请选择'
+			},
+			//显示的内容
+			valueName: {
+				type: String,
+				default: 'label',
+				required: true
+			},
+			// 绑定的内容
+			keyName: {
+				type: String,
+				default: 'value',
+				required: true
+			},
+			//判断下拉数据结构是什么类型的
+			optionType: {
+				type: String,
+				default: 'default'
+			},
+			//是否开启上拉加载
+			pagingSet: {
+				type: Boolean,
+				default: false
+			},
+			//是否聚焦
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			//分页页码
+			pageNo: {
+				type: Number,
+				default: 1
+			},
+			//分页页码
+			loadingFlag: {
+				type: Number,
+				default: 0
+			},
+			wselectTotal: {
+				type: Number,
+				default: 0
+			},
+			//判斷清楚的是那個選擇款
+			selectTag: {
+				type: String,
+				default: ''
+			},
+		},
+		watch: {
+			value: {
+				handler(newVal, oldVal) {
+					// console.log('下拉组件111',newVal,oldVal)
+				}
+			},
+			focus: {
+				handler(newVal, oldVal) {
+					this.inputFocus = newVal
+				}
+			},
+			pageNo: {
+				handler(newVal, oldVal) {
+					this.wselectPageNo = newVal
+					console.log('分页111', newVal, oldVal)
+				}
+			},
+			list: {
+				immediate: true,
+				deep: true,
+				handler(news) {
+					if(news.length) {
+						this.filterList = news
+						const findItem = news.find(
+							item => item[this.keyName] === this.value
+						)
+						if (findItem) {
+							this.inputData = findItem[this.valueName]
+						}
+					}
+					
+				}
+			}
+		},
+		computed: {
+			multiLength() {
+				const length = this.multiSelectList.length - 1
+				return '+' + length
+			},
+			bottomDistance() {
+				return (
+					this.windowHeight -
+					this.distanceTop -
+					this.curHeight
+				) // 当前元素距离可视屏幕底部的距离
+			},
+		},
+		data() {
+			return {
+				wselectPageNo: this.pageNo,
+				inputFocus: this.focus,
+				inputData: this.value,
+				multiSelectList: this.multiple ? this.value : [],
+				isShow: false,
+				optionsShow: false,
+				windowHeight: null,
+				curHeight: 0,
+				distanceTop: 0,
+				showPosition: 'bottom',
+				filterList: [],
+				refreshUrl: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4wMSIvPjxwYXRoIGQ9Ik0yNCA0NEMzNS4wNDU3IDQ0IDQ0IDM1LjA0NTcgNDQgMjRDNDQgMTIuOTU0MyAzNS4wNDU3IDQgMjQgNEMxMi45NTQzIDQgNCAxMi45NTQzIDQgMjRDNCAzNS4wNDU3IDEyLjk1NDMgNDQgMjQgNDRaIiBmaWxsPSJub25lIiBzdHJva2U9IiM3YzZlNmUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yOS42NTY5IDE4LjM0MzFMMTguMzQzMiAyOS42NTY4IiBzdHJva2U9IiM3YzZlNmUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE4LjM0MzIgMTguMzQzMUwyOS42NTY5IDI5LjY1NjgiIHN0cm9rZT0iIzdjNmU2ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4='
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				const res = uni.getSystemInfoSync()
+				this.windowHeight = res.windowHeight // 当前设备屏幕高度
+				uni.createSelectorQuery().in(this).select('#wSelect').boundingClientRect(data => {
+					if(!data) {
+						return;
+					}
+					this.distanceTop = data.top // 当前元素距离顶部的距离
+					this.curHeight = data.height
+				}).exec()
+			})
+		},
+		methods: {
+			// 上拉加载
+			onBottom(val) {
+				if (this.pagingSet) {
+					this.$emit('onBottomPage', ++this.wselectPageNo)
+				}
+				// console.log('触底')
+			},
+			// 判断input是否聚焦
+			myselectFocus(val) {
+				// console.log(val)
+				// uni.$emit('focus',222)	
+				this.$emit('focus', val)
+			},
+			showPositon() {
+				this.showPosition = 'bottom'
+				if (this.bottomDistance < this.windowHeight / 3) {
+					this.showPosition = 'top'
+				}
+			},
+			changeShow() {
+				this.isShow = !this.isShow
+				if (this.isShow === false) {
+					this.filterList = this.list
+					setTimeout(() => {
+						this.optionsShow = false
+					}, 200)
+				} else {
+					this.showPositon()
+					this.optionsShow = this.isShow
+				}
+			},
+			closeContentSelect() {
+				this.isShow = false
+				setTimeout(() => {
+					this.optionsShow = false
+				}, 200)
+			},
+			inputChange(e) {
+				// 输入的时候打开框
+				const value = e.detail.value
+				if (value) {
+					this.isShow = true
+					setTimeout(() => {
+						this.optionsShow = true
+					}, 200)
+				} else {
+					this.isShow = false
+					setTimeout(() => {
+						this.optionsShow = false
+					}, 200)
+					this.filterList = []
+				}
+				this.$emit('input', value)
+				this.filterList = this.list.filter(item =>
+					item[this.valueName].includes(value)
+				)
+			},
+			refreshValue() {
+				this.$emit('input', '')
+				this.$emit('clearnFn', this.selectTag)
+				this.inputData = ''
+				// this.$emit('change', '')
+				this.filterList = this.list
+				if (this.multiple) {
+					this.multiSelectList = []
+				}
+			},
+			handleClickItem(e) {
+				if (this.multiple) {
+					this.multiSelect(e)
+				} else {
+					this.$emit('input', e[this.keyName])
+					this.inputData = e[this.valueName]
+					this.$emit('change', e)
+					this.changeShow()
+				}
+			},
+			multiSelect(item) {
+				let index = this.multiSelectList.findIndex(
+					res => res[this.valueName] === item[this.valueName]
+				)
+				if (index > -1) {
+					this.multiSelectList.splice(index, 1)
+				} else {
+					this.multiSelectList.push(item)
+				}
+				this.inputData = ''
+				this.filterList = this.list
+				this.$emit('input', this.multiSelectList)
+				this.$emit('change', item)
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.n_myselect {
+		padding: 5px 10px;
+		background: #F3F6FA;
+		border-radius: 6px;
+		margin: 0 10px;
+		margin-top: 5px;
+		display: flex;
+		flex-direction: column;
+		color: #222;
+
+		.nmyt1,
+		.nmyt2,
+		.nmyt3,
+		.nmyt4 {
+			font-size: 12px;
+		}
+
+		.nmyt1 {
+			font-weight: bold;
+			padding-bottom: 2px;
+			border-bottom: 1px dashed #BBBDC1;
+		}
+
+		.nmyt2 {
+			padding-top: 2px;
+		}
+
+		.nmyt3 {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+	}
+
+	.w-select {
+		--select-wrap-width: 200px;
+		--select-wrap-height: 30px;
+		--select-border-radius: 4px;
+		--select-border: 1px solid #dcdfe6;
+		--select-active-border: 1px solid #409eff;
+		// --select-options-max-height: 150px;
+		--select-options-max-height: 220px;
+		--select-option-item-font-size: 14px;
+		--select-input-font-size: 14px;
+		--no-data-default-color: #999999;
+		--select-options-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+		// --select-bg-color: #fff;
+		display: flex;
+
+		.select-wrap {
+			// position: relative;
+			width: var(--select-wrap-width);
+			height: var(--select-wrap-height);
+			border-radius: var(--select-border-radius);
+			transition: all 0.2s;
+			border: var(--select-border);
+			background-color: var(--select-bg-color);
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			input {
+				flex: 1;
+				min-width: 0;
+				width: 100%;
+				height: 100%;
+				padding: 0 2px;
+				font-size: var(--select-input-font-size);
+			}
+
+			.select-content {
+				font-size: var(--select-option-item-font-size);
+				display: flex;
+				align-items: center;
+
+				.select-content-item {
+					background-color: #f4f4f5;
+					border-radius: var(--select-border-radius);
+					color: #aa93b1;
+					margin-left: 5px;
+					padding: 2px 6px;
+				}
+
+				.select-content-item-default {
+					color: var(--no-data-default-color);
+					margin-left: 5px;
+				}
+			}
+
+			.close-icon {
+				width: 15px;
+				height: 15px;
+				position: absolute;
+				right: 7px;
+				top: 46%;
+				z-index: 1000;
+				transform: translateY(-50%);
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.position-bottom {
+				top: calc(var(--select-wrap-height) + 10px);
+			}
+
+			.position-top {
+				bottom: calc(var(--select-wrap-height) + 10px);
+			}
+
+			.select-options {
+				position: absolute;
+				left: 0;
+				right: 0;
+				box-shadow: 1px 4px 14px #919191 !important;
+				border-radius: var(--select-border-radius);
+				background-color: #fff;
+				box-shadow: var(--select-options-box-shadow);
+				z-index: 999;
+				max-height: var(--select-options-max-height);
+				overflow: scroll;
+				overflow-x: hidden;
+				padding: 5px 0;
+
+				.select-option-item {
+					transition: background-color 0.2s;
+					padding: 5px;
+					font-size: var(--select-option-item-font-size);
+					margin-bottom: 5px;
+				}
+
+				.item-active {
+					background-color: #f5f7fa;
+					color: #409eff !important;
+					font-weight: 700;
+				}
+
+				.options-no-data {
+					color: var(--no-data-default-color);
+					text-align: center;
+					font-size: var(--select-option-item-font-size);
+				}
+			}
+
+			.w-select-arrow {
+				transition: all 0.3s;
+				border-left: 1px solid #999999;
+				border-bottom: 1px solid #999999;
+				height: 8px;
+				width: 8px;
+				margin: 3px 10px 0;
+				transform: translateY(-50%) rotate(-45deg);
+				-webkit-transform: translateY(-50%) rotate(-45deg);
+				border-right: 1px solid transparent;
+				border-top: 1px solid transparent;
+				display: inline-block;
+			}
+
+			.w-select-arrow-up {
+				transform: rotate(-225deg);
+			}
+		}
+
+		.select-wrap-active {
+			border: var(--select-active-border);
+		}
+
+		.animation-bottom-in {
+			animation-name: bottom-in;
+			animation-duration: 0.4s;
+			animation-timing-function: ease-out;
+			animation-fill-mode: both;
+		}
+
+		.animation-bottom-out {
+			animation-name: bottom-out;
+			animation-duration: 0.2s;
+			animation-timing-function: ease-out;
+			animation-fill-mode: both;
+		}
+
+		.animation-top-in {
+			animation-name: top-in;
+			animation-duration: 0.4s;
+			animation-timing-function: ease-out;
+			animation-fill-mode: both;
+		}
+
+		.animation-top-out {
+			animation-name: top-out;
+			animation-duration: 0.2s;
+			animation-timing-function: ease-out;
+			animation-fill-mode: both;
+		}
+
+		@keyframes bottom-in {
+			0% {
+				opacity: 0;
+				transform: translateY(-15%);
+			}
+
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+
+		@keyframes bottom-out {
+			0% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+
+			100% {
+				opacity: 0;
+				transform: translateY(-20%);
+			}
+		}
+
+		@keyframes top-in {
+			0% {
+				opacity: 0;
+				transform: translateY(15%);
+			}
+
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+
+		@keyframes top-out {
+			0% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+
+			100% {
+				opacity: 0;
+				transform: translateY(20%);
+			}
+		}
+
+		.contentMask {
+			position: fixed;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 998;
+		}
+	}
+
+	.myitem {
+		border-bottom: 1px dashed #DADDDF;
+		margin: 0 24px;
+	}
+
+	.myitem:last-child {
+		border-bottom: none
+	}
+</style>