86 lines
2.7 KiB
Vue
86 lines
2.7 KiB
Vue
<!--
|
||
封装选择商户， 选择应用的通用组件
|
||
支持上移效果 和 普通input两种方式；
|
||
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/04/06 10:14
|
||
-->
|
||
<template>
|
||
<template v-if="props.textUpStyle">
|
||
<jeepay-text-up :value="props.value" :placeholder="props.placeholder" @update:value="changeFunc">
|
||
<template #suffix>
|
||
<a-tooltip title="搜索" @click="() => jeepayModelMchListRef.show({mchNo: props.value}) ">
|
||
<search-outlined />
|
||
</a-tooltip>
|
||
</template>
|
||
</jeepay-text-up>
|
||
</template>
|
||
<template v-else>
|
||
<a-input :allowClear="true" :value="props.value" :placeholder="props.placeholder" :disabled="props.disabled" @change="changeFunc($event.target.value)">
|
||
<template #suffix>
|
||
<a-tooltip v-if="!props.disabled" title="搜索" @click="() => jeepayModelMchListRef.show({mchNo: props.value}) ">
|
||
<search-outlined />
|
||
</a-tooltip>
|
||
</template>
|
||
</a-input>
|
||
</template>
|
||
|
||
<JeepayModelMchList
|
||
ref="jeepayModelMchListRef"
|
||
:showType="props.showType"
|
||
:onlyMchNo="onlyMchNo"
|
||
:onlyMchName="onlyMchName"
|
||
:mchNoAndName="mchNoAndName"
|
||
@selectFinishFunc="searchMchFinishFunc"
|
||
/>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {ref, defineProps, defineEmits} from 'vue'
|
||
|
||
const jeepayModelMchListRef = ref()
|
||
|
||
// 定义组件的传入参数
|
||
const props = defineProps({
|
||
value: { type: [String, Number], default: null },
|
||
placeholder: {type: String, default: ''},
|
||
disabled: { type: Boolean, default: false },
|
||
showType: { type: String, default: 'MCH' }, // 选择类型： MCH / MCH_APP / MCH_STORE / MCH_APP_STORE
|
||
textUpStyle: { type: Boolean, default: false }, // 是否文字上移的效果
|
||
onlyMchNo: { type: Boolean, default: false}, // 搜索时仅展示商户号
|
||
onlyMchName: { type: Boolean, default: false}, // 搜索时仅展示商户名称
|
||
mchNoAndName: { type: Boolean, default: false}, // 搜索时展示商户名和商户号
|
||
})
|
||
|
||
// 定义向父组件 通讯 func
|
||
const emit = defineEmits(['update:value','itemRender'])
|
||
|
||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||
function changeFunc(value,info=[]){
|
||
emit('update:value', value)
|
||
emit('itemRender', info)
|
||
}
|
||
|
||
|
||
// 选择商户 / 应用 完成后的操作
|
||
// [用户号， 应用， 门店]
|
||
function searchMchFinishFunc(selectVal){
|
||
if(props.showType =='MCH' && selectVal[0]){
|
||
changeFunc(selectVal[0],selectVal[3])
|
||
}
|
||
|
||
if(props.showType =='MCH_APP' && selectVal[1]){
|
||
changeFunc(selectVal[1])
|
||
}
|
||
|
||
if(props.showType =='MCH_STORE' && selectVal[2]){
|
||
changeFunc(selectVal[2])
|
||
}
|
||
|
||
jeepayModelMchListRef.value.close()
|
||
|
||
}
|
||
|
||
|
||
</script> |