源文件

jeepay-ui-manager/src/components/JeepayUIComponents/JeepayInfoModal/JeepaySearchInfoInput.vue

@@ -0,0 +1,86 @@
+<!--
+  封装选择商户， 选择应用的通用组件
+  支持上移效果 和 普通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>