增加维修详情

2024-10-23 17:01:21 +08:00
parent 3d958f9346
commit 527af5d028
8 changed files with 373 additions and 26 deletions
@@ -0,0 +1,122 @@
+<template>
+	<div class="selectedBox">
+		<div class="selected" @click.stop="downClick">
+			<span class="name">{{selectedName}}</span>
+			<el-icon class="icon" :class="downShow?'selectedIcon':''"><el-icon-arrow-down /></el-icon>
+		</div>
+		<slot name="down">
+			<div class="downMain" v-bind="$attrs" v-if="downShow">
+				<div class="item" :class="selectedValue===item.value?'itemTrue':''" @click="itemClick(item)" v-for="(item,index) in list" :key="index">{{item.name}}</div>
+			</div>
+		</slot>
+	</div>
+</template>
+
+<script>
+import {eventBus} from "@/utils/eventBus";
+export default {
+	name: "",
+	data(){
+		return{
+			downShow:false,
+			selectedName:'',
+			selectedValue:'',
+			list:[]
+		}
+	},
+	props:{
+		listData:{
+			type:Array
+		},
+		name:{
+			type:String
+		},
+		value:{
+			type:[String,Number]
+		}
+	},
+	watch:{
+		listData:{
+			handler(val){
+				this.list = val;
+			},
+			deep:true,
+			immediate:true
+		},
+		name:{
+			handler(val){
+				this.selectedName = val
+			},
+			immediate:true
+		},
+		value:{
+			handler(val){
+				this.selectedValue = val
+			},
+			immediate:true
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		downClick(){
+			this.downShow = !this.downShow;
+			eventBus.$emit('searchDownShow',this.downShow);
+		},
+		downOut(){
+			this.downShow = false;
+		},
+		itemClick(item){
+			this.selectedName = item.name;
+			this.selectedValue = item.value;
+			this.downShow = false;
+			this.$emit('scSelect',{name:this.selectedName,value:this.selectedValue});
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.selectedBox{
+		position: relative;
+	}
+	.selected{
+		padding: 0 10px;
+		color: #555;
+		display: flex;align-items: center;
+		height: 30px;
+		border-right: 1px solid #e9e9e9;
+		cursor: pointer;
+		.name{margin-right: 4px;}
+		.selectedIcon{
+			transform: rotate(180deg);
+		}
+	}
+	.downMain{
+		position: absolute;
+		left: 0;
+		top: 35px;
+		z-index: 100;
+		background: var(--el-bg-color);
+		width: 100%;
+		color: #555;
+		border-radius: 0 0 4px 4px;
+		background-color: var(--el-fill-color-blank);
+		transition: var(--el-transition-duration);
+		transform: translateZ(0);
+		box-shadow: 0 6px 4px rgba(180, 207, 235, 0.25);
+		//border: 1px solid var(--el-border-color-light);
+		.item{
+			padding: 0 10px;text-align: center;
+		}
+		.item:hover{
+			background-color: var(--el-color-primary-light-9);
+			color: var(--el-color-primary);
+			cursor: pointer;
+		}
+		.itemTrue{
+			color: var(--el-color-primary);
+		}
+	}
+</style>
@@ -57,13 +57,13 @@
 			async getRemoteData(){
 				this.loading = true
 				this.dicParams[config.request.name] = this.dic
-				var res = {}
+				let res = {};
 				if(this.apiObj){
 					res = await this.apiObj.get(this.params)
 				}else if(this.dic){
 					res = await config.dicApiObj.get(this.params)
 				}
-				var response = config.parseData(res)
+				const response = config.parseData(res);
 				this.options = response.data
 				this.loading = false
 				this.initloading = false