145 lines
3.9 KiB
Vue
145 lines
3.9 KiB
Vue
<!--
|
||
通用的选择某项业务， 一般用作修改页。
|
||
目前支持： 门店 和 应用
|
||
@author terrfly
|
||
@site https://www.jeepay.vip
|
||
@date 2022/12/08 14:18
|
||
-->
|
||
<template>
|
||
<view class="details-wrapper" style="align-items: flex-start; padding-top: 40rpx">
|
||
<view v-if="props.hasTitle" class="details-title">
|
||
<slot name="title">{{ bizTypeMap[props.bizType].title }}</slot>
|
||
</view>
|
||
<view @tap="show">
|
||
<view class="sub-title">
|
||
<view class="details-info single-text-beyond">
|
||
<text :class="{ 'text-gray': vdata.selectedRow[bizTypeMap[props.bizType].nameKey] ? false : true }">
|
||
{{ vdata.selectedRow[bizTypeMap[props.bizType].nameKey] || bizTypeMap[props.bizType].nameDef }}
|
||
</text>
|
||
</view>
|
||
<image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" v-if="isIcon" />
|
||
</view>
|
||
<view class="sub-info details-info single-text-beyond">{{ vdata.selectedRow[bizTypeMap[props.bizType].id] }}</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<JeepayBizinfoSelect ref="jeepayBizinfoSelectRef" :bizType="props.bizType" :isCheckbox="false" :range="props.range" :ifCode="props.ifCode" :addUse="props.addUse" />
|
||
<JeepayIncomingBizinfoSelect ref="jeepayIncomingBizinfoSelectRef" :bizType="props.bizType" :range="props.range" :ifCode="props.ifCode" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, nextTick, watch, onMounted } from 'vue';
|
||
|
||
const jeepayBizinfoSelectRef = ref();
|
||
const jeepayIncomingBizinfoSelectRef = ref();
|
||
|
||
const bizTypeMap = {
|
||
store: { title: '选择门店', nameKey: 'storeName', nameDef: '请选择门店', id: 'storeId' },
|
||
mchApp: { title: '选择应用', nameKey: 'appName', nameDef: '请选择应用', id: 'appId' },
|
||
isvApp: { title: '选择渠道', nameKey: 'isvName', nameDef: '请选择渠道', id: 'isvNo' },
|
||
incomingApp: { title: '发起进件', nameKey: 'name', nameDef: '请选择场景', id: 'range' }
|
||
};
|
||
|
||
// emit 父组件使用： v-model:value="val" 进行双向绑定。
|
||
const emits = defineEmits(['update:value', 'update:showName', 'change']);
|
||
|
||
const props = defineProps({
|
||
// 是否包含 标题部分
|
||
hasTitle: { type: Boolean, default: true },
|
||
|
||
//绑定的值， 双向绑定
|
||
value: { type: [String, Number] },
|
||
|
||
// 仅仅用作修改的回显
|
||
showName: { type: [String, Number] },
|
||
|
||
// 业务类型： 默认门店
|
||
bizType: { type: String, default: 'store' },
|
||
range: { type: String, default: 0 },
|
||
ifCode: { type: String, default: '' },
|
||
isIcon: { type: Boolean, default: true },
|
||
addUse: { type: Boolean, default: false }
|
||
});
|
||
|
||
onMounted(() => {
|
||
if (props.value) {
|
||
vdata.selectedRow[bizTypeMap[props.bizType].id] = props.value;
|
||
}
|
||
if (props.showName) {
|
||
vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = props.showName;
|
||
}
|
||
});
|
||
|
||
// 切换时
|
||
watch(
|
||
() => props.value,
|
||
(newVal, oldVal) => {
|
||
vdata.selectedRow[bizTypeMap[props.bizType].id] = newVal;
|
||
}
|
||
);
|
||
|
||
// 切换时
|
||
watch(
|
||
() => props.showName,
|
||
(newVal, oldVal) => {
|
||
vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = newVal;
|
||
}
|
||
);
|
||
|
||
const vdata = reactive({
|
||
// 当前选择行
|
||
selectedRow: {}
|
||
});
|
||
|
||
function show() {
|
||
jeepayBizinfoSelectRef.value.open().then((selectedRow) => {
|
||
vdata.selectedRow = selectedRow || {};
|
||
|
||
emits('update:value', vdata.selectedRow[bizTypeMap[props.bizType].id]);
|
||
emits('update:showName', vdata.selectedRow[bizTypeMap[props.bizType].nameKey]);
|
||
emits('change', vdata.selectedRow[bizTypeMap[props.bizType].id]);
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.details-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
background-color: #fff;
|
||
.details-title {
|
||
width: 180rpx;
|
||
color: #4c4c4c;
|
||
}
|
||
.details-info {
|
||
flex-grow: 1;
|
||
width: 405rpx;
|
||
}
|
||
image {
|
||
width: 108rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.sub-title {
|
||
flex: 1;
|
||
display: flex;
|
||
image {
|
||
width: 108rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.sub-info {
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
color: #a1a1a1;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.text-gray {
|
||
color: #b3b3b3;
|
||
}
|
||
}
|
||
</style>
|