修改设备工单

components/pickerSelect/index.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="selectView">
+		<picker mode="selector" @change="bindPickerChange" @cancel="pickerHide" :value="value" range-key="name" :range="list" >
+			<view class="pickerBom" @click="pickerClick">
+				<input type="text" :value="text" :placeholder="placeholder" disabled />
+				<text class="iconfont icon-gengduo" :class="selectShow?'selectOpen':'selectHide'"></text>
+			</view>
+		</picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				selectShow:false,
+				value:'',
+				text:'',
+				id:this.id,
+				array:this.list,
+			}
+		},
+		props: {
+		    placeholder:{
+				type:[String],
+				default:'请选择'
+			},
+			list:{
+				type:[Array],
+				default:[]
+			},
+			id:{
+				type:[String,Number],
+				default:''
+			}
+		},
+		watch:{
+			id:{
+				handler(val){
+					this.array.forEach((item,index)=>{
+						if(item.value == val){
+							this.value = index;
+							this.text = item.name;
+							this.id = val;
+						}
+					})
+				},
+				immediate:true,
+				deep:true
+			},
+			list:{
+				handler(val){
+					this.array = val;
+					this.array.forEach((item,index)=>{
+						if(item.value == this.id){
+							this.value = index;
+							this.text = item.name;
+							this.id = item.value;
+						}
+					})
+				},
+				immediate:true,
+				deep:true
+			}
+		},
+		computed: {
+			
+		},
+		methods: {
+			pickerClick(){
+				this.selectShow = true;
+			},
+			bindPickerChange(e){
+				this.value = e.detail.value;
+				this.text = this.array[e.detail.value].name;
+				this.id = this.array[e.detail.value].value;
+				this.selectShow = false;
+				
+				this.$emit('change',{name:this.array[e.detail.value].name,value:this.array[e.detail.value].value,item:this.array[e.detail.value]});
+			},
+			pickerHide(){
+				this.selectShow = false;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.selectView{
+		width: 100%;
+	}
+	.pickerBom{
+		width: 100%;
+	}
+	.selectOpen{
+		animation: rotate 0.6s;
+		animation-fill-mode: forwards;
+	}
+	.selectHide{
+		animation: rotate180 0.6s ;
+		animation-fill-mode: forwards;
+	}
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(90deg);
+		}
+	}
+	@keyframes rotate180 {
+		from {
+			transform: rotate(90deg);
+		}
+		to {
+			transform: rotate(0deg);
+		}
+	}
+</style>