源文件
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" title="自动获取渠道用户ID" :footer="null" :width="300" @ok="handleClose">
|
||||
<div style="width:100%;margin-bottom:20px;text-align:center">
|
||||
<div id="qrCodeUrl" style="width: 300px" class="qrcode" />
|
||||
<QrcodeVue :value="vdata.qrImgUrl" :size="250" class="qrcode" />
|
||||
<hr>
|
||||
<span>{{ vdata.payText }}</span>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import ReconnectingWebSocket from 'reconnectingwebsocket'
|
||||
// import vueQr from 'vue-qr'
|
||||
import QrcodeVue from 'qrcode.vue'
|
||||
import { getWebSocketPrefix, $getChannelUserQrImgUrl } from '@/api/manage'
|
||||
import { reactive, getCurrentInstance} from 'vue'
|
||||
|
||||
// 获取全局函数
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
|
||||
const emit = defineEmits(['changeChannelUserId'])
|
||||
const vdata = reactive({
|
||||
visible: false,
|
||||
qrImgUrl: '',
|
||||
payText: '', // 二维码底部描述文字
|
||||
transferOrderWebSocket: null as any, // 支付订单webSocket对象 //TODO 修改了webSocket类型
|
||||
extObject: null // 扩展对象， 将原样返回。
|
||||
})
|
||||
|
||||
|
||||
// show
|
||||
function showModal (appId, ifCode, extObject) {
|
||||
|
||||
vdata.extObject = extObject
|
||||
// 关闭上一个webSocket监听
|
||||
if (vdata.transferOrderWebSocket) {
|
||||
// console.log( vdata.transferOrderWebSocket)
|
||||
vdata.transferOrderWebSocket.close()
|
||||
}
|
||||
|
||||
// 根据不同的支付方式，展示不同的信息
|
||||
vdata.payText = ''
|
||||
if (ifCode === 'wxpay') {
|
||||
vdata.payText = '请使用微信客户端"扫一扫"'
|
||||
} else if (ifCode === 'alipay') {
|
||||
vdata.payText = '请使用支付宝客户端"扫一扫"'
|
||||
}
|
||||
|
||||
// 当前客户端CID
|
||||
const cid = appId + new Date().getTime()
|
||||
// 获取二维码地址
|
||||
$getChannelUserQrImgUrl(ifCode, appId, cid).then(res => {
|
||||
//console.log( vdata.qrImgUrl,'11111111')
|
||||
|
||||
vdata.qrImgUrl = res
|
||||
|
||||
vdata.visible = true // 打开弹窗
|
||||
|
||||
// 监听响应结果
|
||||
vdata.transferOrderWebSocket = new ReconnectingWebSocket(getWebSocketPrefix() + '/api/anon/ws/channelUserId/' + appId + '/' + cid)
|
||||
vdata.transferOrderWebSocket!.onopen = () => {}
|
||||
vdata.transferOrderWebSocket!.onmessage = (msgObject) => {
|
||||
emit('changeChannelUserId', { channelUserId: msgObject.data, extObject: vdata.extObject }) // 上层赋值
|
||||
handleClose()
|
||||
}
|
||||
})
|
||||
}
|
||||
function handleClose () {
|
||||
if (vdata.transferOrderWebSocket) {
|
||||
|
||||
|
||||
vdata.transferOrderWebSocket.close()
|
||||
}
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
defineExpose({showModal})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.describe {
|
||||
img {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
jeepay-ui-manager/src/components/GlobalFooter/index.vue
Normal file
20
jeepay-ui-manager/src/components/GlobalFooter/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<global-footer class="footer custom-render">
|
||||
<template v-slot:links>
|
||||
</template>
|
||||
<template v-slot:copyright>
|
||||
<a href="http://www.jeequan.com" target="_blank">@计全科技</a>
|
||||
</template>
|
||||
</global-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GlobalFooter } from '@ant-design-vue/pro-layout'
|
||||
|
||||
export default {
|
||||
name: 'ProGlobalFooter',
|
||||
components: {
|
||||
GlobalFooter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<span class="ant-pro-account-avatar">
|
||||
<a-avatar size="small" :src="greetImg" class="antd-pro-global-header-index-avatar" />
|
||||
<span>{{ currentUserName }}</span>
|
||||
</span>
|
||||
<template v-slot:overlay>
|
||||
<a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
|
||||
|
||||
<a-menu-item v-if="$access('ENT_C_USERINFO')" key="settings" @click="handleToSettings">
|
||||
<a-icon type="setting" />
|
||||
账户设置
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-divider />
|
||||
|
||||
<a-menu-item key="logout" @click="handleLogout">
|
||||
<a-icon type="logout" />
|
||||
退出登录
|
||||
</a-menu-item>
|
||||
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'AvatarDropdown',
|
||||
props: {
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
// greetImg: '', // 头像图片地址
|
||||
sex: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 返回用户名
|
||||
currentUserName () {
|
||||
return this.$store.state.user.userName
|
||||
},
|
||||
// 返回头像
|
||||
greetImg () {
|
||||
return this.$store.state.user.avatarImgPath
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToSettings () {
|
||||
this.$router.push({ name: 'ENT_C_USERINFO' })
|
||||
},
|
||||
handleLogout: function (e) {
|
||||
this.$infoBox.confirmPrimary('确认退出?', '', () => {
|
||||
this.$store.dispatch('Logout').then(() => {
|
||||
this.$router.push({ name: 'login' })
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-pro-drop-down {
|
||||
/deep/ .action {
|
||||
margin-right: 8px;
|
||||
}
|
||||
/deep/ .ant-dropdown-menu-item {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!-- <template>
|
||||
<div :class="wrpCls">
|
||||
<avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import AvatarDropdown from './AvatarDropdown'
|
||||
// import store from '@/store'
|
||||
|
||||
export default {
|
||||
name: 'RightContent',
|
||||
components: {
|
||||
AvatarDropdown
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-global-header-index-action'
|
||||
},
|
||||
isMobile: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
topMenu: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showMenu: true,
|
||||
currentUser: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrpCls () {
|
||||
return {
|
||||
'ant-pro-global-header-index-right': true,
|
||||
[`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// console.log(store)
|
||||
this.currentUser = {
|
||||
name: 'dd'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script> -->
|
||||
30
jeepay-ui-manager/src/components/GlobalLoad/GlobalLoad.vue
Normal file
30
jeepay-ui-manager/src/components/GlobalLoad/GlobalLoad.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="loading">
|
||||
<div>
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'GlobalLoad',
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.loading{
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.25);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="split-line">
|
||||
<div v-if="isOpen" class="btns">
|
||||
<div v-if="flag" @click="open">
|
||||
更多筛选<i class="bi bi-chevron-down" />
|
||||
</div>
|
||||
<div v-else @click="close">
|
||||
收起筛选<i class="bi bi-chevron-up" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, ref, reactive } from 'vue'
|
||||
// 定义父组件的传参和类型
|
||||
const props = defineProps({
|
||||
isOpen: { type: Boolean, default: false },
|
||||
flag: { type: Boolean, default: true }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['open', 'close'])
|
||||
const open =(e)=> emit('open')
|
||||
const close =(e)=> emit('close')
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.split-line {
|
||||
border-bottom: 1px solid #ebeff2;
|
||||
position: relative;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btns {
|
||||
width: 100px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ebeff2;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
background-color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
color: #79807E;
|
||||
}
|
||||
}
|
||||
.btns::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% + 2px);
|
||||
height: 50%;
|
||||
background-color: #fff;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.bi-chevron-up::before, .bi-chevron-down::before{
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!--
|
||||
封装高德地图选址组件
|
||||
initMapData: { areacode:[], areacodeNames:[], address: '', lnglat: '' } //areacode 位置、 省市县名称字符串数组、 详细地址， 经纬度（中间,分割）
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/07 11:34
|
||||
-->
|
||||
<template>
|
||||
<a-row>
|
||||
<a-col :span="isMobile ? 24 : 12">
|
||||
<a-form-item label="选址省/市/区" name="areacode">
|
||||
<JeepayAreaSelect
|
||||
ref="jeepayAreaSelect"
|
||||
v-model:value="vdata.mapData.areacode"
|
||||
@change="changeAreaCodeFunc"
|
||||
:getPopupContainer="(triggerNode) => (triggerNode.parentElement)"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="isMobile ? 24 : 12">
|
||||
<a-form-item label="具体位置" name="address">
|
||||
<a-input
|
||||
id="amap-search-input"
|
||||
v-model:value="vdata.mapData.address"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="isMobile ? 24 : 12">
|
||||
<a-form-item label="经纬度" name="lnglat">
|
||||
<a-input v-model:value="vdata.mapData.lnglat" autoComplete="off" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-collapse v-model:activeKey="vdata.showKey" @change="changeMap">
|
||||
<a-collapse-panel key="map" header="地图选址">
|
||||
<div :id="vdata.mapDivId" :style="{width: '100%', height: isMobile?'300px':'600px'}">MAP</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { $getMapConfig } from '@/api/manage'
|
||||
import { reactive, ref, inject } from 'vue'
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 参数注入： 是否手机端
|
||||
let isMobile : any = inject('isMobile')
|
||||
|
||||
const vdata: any = reactive({
|
||||
showKey: 'map',
|
||||
mapData: { areacode: [], areacodeNames: [], address: '', lnglat: '' }, //areacode 位置、 省市县、
|
||||
|
||||
mapDivId: 'mapDIV_' + new Date().getTime()
|
||||
|
||||
})
|
||||
|
||||
const jeepayAreaSelect = ref()
|
||||
|
||||
// 地图对象
|
||||
let AMapInstantiate = null as any // 地图实例
|
||||
let AMapDefine = null as any // 地图定义，初始成功返回的定义对象， 可以通过 AMapDefine.map等获取
|
||||
let AMapDistrictSearch = null as any // 区域搜索插件
|
||||
let AMapMarker = null as any //标记点
|
||||
let AutoComplete = null as any //自动录入组件
|
||||
|
||||
/** 初始化 */
|
||||
function init(initMapData) {
|
||||
// 清空数据
|
||||
vdata.mapData.areacode = initMapData.areacode || []
|
||||
// vdata.mapData.areacodeNames = initMapData.areacodeNames || []
|
||||
vdata.mapData.lnglat = initMapData.lnglat
|
||||
vdata.mapData.address = initMapData.address
|
||||
|
||||
AMapInstantiate = null as any // 地图实例
|
||||
AMapDefine = null as any // 地图定义，初始成功返回的定义对象， 可以通过 AMapDefine.map等获取
|
||||
AMapDistrictSearch = null as any // 区域搜索插件
|
||||
AMapMarker = null as any //标记点
|
||||
AutoComplete = null as any //自动录入组件
|
||||
|
||||
// 获取地图配置参数
|
||||
$getMapConfig()
|
||||
.then((res) => {
|
||||
// @ts-ignore window._AMapSecurityConfig
|
||||
window._AMapSecurityConfig = { securityJsCode: res.apiMapWebSecret }
|
||||
return AMapLoader.load({
|
||||
// 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
key: res.apiMapWebKey,
|
||||
|
||||
// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
version: '2.0',
|
||||
|
||||
// 同步加载插件
|
||||
plugins: [
|
||||
'AMap.ToolBar',
|
||||
'AMap.Scale',
|
||||
'AMap.Marker',
|
||||
'AMap.PlaceSearch',
|
||||
'AMap.AutoComplete',
|
||||
'AMap.Geocoder',
|
||||
'AMap.DistrictSearch',
|
||||
],
|
||||
})
|
||||
})
|
||||
.then((AMap) => {
|
||||
// 定义
|
||||
AMapDefine = AMap
|
||||
|
||||
// 实例化
|
||||
AMapInstantiate = new AMapDefine.Map(vdata.mapDivId, {
|
||||
viewMode: '3D',
|
||||
})
|
||||
|
||||
AMapInstantiate.addControl(new AMapDefine.ToolBar()) // 工具栏
|
||||
AMapInstantiate.addControl(new AMapDefine.Scale()) // 比例尺
|
||||
|
||||
// geocoder 地理位置查询插件
|
||||
var geocoder = new AMap.Geocoder()
|
||||
|
||||
AMapDistrictSearch = new AMapDefine.DistrictSearch()
|
||||
|
||||
// 输入提示插件
|
||||
AutoComplete = new AMapDefine.AutoComplete({
|
||||
input: 'amap-search-input',
|
||||
citylimit: true,
|
||||
})
|
||||
|
||||
// 搜索到内容后的回调函数
|
||||
AutoComplete.on('select', function (e) {
|
||||
let name = e.poi.name // 搜索到的名称
|
||||
selectLocationFunc(e.poi.location.lng, e.poi.location.lat, name)
|
||||
})
|
||||
|
||||
// 地图的选中后的回调函数
|
||||
AMapInstantiate.on('click', (e) => {
|
||||
// 查询省市县、 位置信息
|
||||
geocoder.getAddress(
|
||||
new AMapDefine.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
|
||||
function (state, result) {
|
||||
// 查找失败
|
||||
if (state != 'complete') {
|
||||
return false
|
||||
}
|
||||
|
||||
// 限制城市搜索
|
||||
AutoComplete.setCity(result.regeocode.addressComponent.citycode)
|
||||
|
||||
// 更改省市县 --> 组件调用change事件
|
||||
jeepayAreaSelect.value.changeByAreacode(
|
||||
result.regeocode.addressComponent.adcode
|
||||
)
|
||||
|
||||
// 选中的点
|
||||
selectLocationFunc(
|
||||
e.lnglat.getLng(),
|
||||
e.lnglat.getLat(),
|
||||
result.regeocode.formattedAddress
|
||||
)
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
// 存在数据
|
||||
if (initMapData.lnglat) {
|
||||
AMapInstantiate.setCenter(
|
||||
new AMapDefine.LngLat(
|
||||
initMapData.lnglat.split(',')[0],
|
||||
initMapData.lnglat.split(',')[1]
|
||||
)
|
||||
)
|
||||
selectLocationFunc(
|
||||
initMapData.lnglat.split(',')[0],
|
||||
initMapData.lnglat.split(',')[1],
|
||||
initMapData.address
|
||||
)
|
||||
|
||||
// 查询省市县、 位置信息 ( 限制城市搜索 )
|
||||
geocoder.getAddress(new AMapDefine.LngLat(initMapData.lnglat.split(',')[0], initMapData.lnglat.split(',')[1]), function (state, result) {
|
||||
// 查找失败
|
||||
if (state != 'complete') {
|
||||
return false
|
||||
}
|
||||
// 限制城市搜索
|
||||
AutoComplete.setCity(result.regeocode.addressComponent.citycode)
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 选中某个点的事件： 定位到当前地点
|
||||
function selectLocationFunc(lng, lat, name = null) {
|
||||
if (name) {
|
||||
vdata.mapData.address = name
|
||||
}
|
||||
|
||||
if (!lng || !lat) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 更改经纬度坐标
|
||||
changeInputLnglat(lng, lat)
|
||||
|
||||
if (AMapMarker == null) {
|
||||
// 创建地图标点中心点
|
||||
AMapMarker = new AMapDefine.Marker({
|
||||
position: new AMapDefine.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||
})
|
||||
AMapInstantiate.add([AMapMarker])
|
||||
} else {
|
||||
AMapMarker.setPosition(new AMapDefine.LngLat(lng, lat))
|
||||
}
|
||||
}
|
||||
|
||||
// 选择省市县的回调函数
|
||||
function changeAreaCodeFunc(areacode, val) {
|
||||
// 无无变化
|
||||
if (vdata.mapData.areacode && vdata.mapData.areacode[2] == val[2]) {
|
||||
return
|
||||
}
|
||||
|
||||
// 设置地图的city
|
||||
AMapInstantiate.setCity(val[2])
|
||||
|
||||
// 限制城市搜索
|
||||
AutoComplete.setCity(val[2])
|
||||
|
||||
//
|
||||
vdata.mapData.areacode = val
|
||||
vdata.mapData.areacodeNames = [
|
||||
areacode[0].label,
|
||||
areacode[1].label,
|
||||
areacode[2].label,
|
||||
]
|
||||
}
|
||||
|
||||
// 更改输入框的 经纬度
|
||||
function changeInputLnglat(lng, lat) {
|
||||
vdata.mapData.lnglat = lng + ',' + lat
|
||||
}
|
||||
|
||||
function getMapData() {
|
||||
return vdata.mapData
|
||||
}
|
||||
// 在移动端收起展开后地图组件未能加载 所以要重新初始化
|
||||
const changeMap=(key)=>{
|
||||
if(isMobile && key[0] == 'map'){
|
||||
init(vdata.mapData)
|
||||
}
|
||||
}
|
||||
defineExpose({ init, getMapData })
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<!--
|
||||
省市县三级联动选择 （国标） 返回省市区名称
|
||||
|
||||
直辖市：第一级不包含“市”，比如“北京 北京市 某某区”
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
<template>
|
||||
<a-cascader
|
||||
:field-names="{ label: 'label', value: 'label', children: 'children' }"
|
||||
:value="props.value"
|
||||
:options="allList"
|
||||
placeholder="选择省市县"
|
||||
@change="changeFunc"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeUmhs.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!--
|
||||
省市县三级联动选择 （国标）
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacode.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions, value)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
|
||||
// 递归遍历树状结构数据
|
||||
function recursionTreeData (treeData, func, pid) {
|
||||
for (let i = 0; i < treeData.length; i++) {
|
||||
|
||||
const item = treeData[i]
|
||||
|
||||
if(func(item)){
|
||||
return [item, pid]
|
||||
}
|
||||
|
||||
if (item.children && item.children.length > 0) {
|
||||
let res = recursionTreeData(item.children, func, item.value)
|
||||
if(res){
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据最后一位的（县级编码 搜索展开全部内容 ）
|
||||
function changeByAreacode(areacode){
|
||||
|
||||
if(!areacode){
|
||||
return
|
||||
}
|
||||
|
||||
let p3 : any = recursionTreeData(allList, (r => r.value == areacode), 0)
|
||||
if(!p3){
|
||||
return false
|
||||
}
|
||||
|
||||
let p2: any = recursionTreeData(allList, (r => r.value == p3[1]), 0)
|
||||
if(!p2){
|
||||
return false
|
||||
}
|
||||
|
||||
let p1 : any = recursionTreeData(allList, (r => r.value == p2[1]), 0)
|
||||
if(!p1){
|
||||
return false
|
||||
}
|
||||
|
||||
changeFunc([p1[0].value, p2[0].value, p3[0].value], [p1[0], p2[0], p3[0]])
|
||||
|
||||
}
|
||||
|
||||
defineExpose({changeByAreacode})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<!--
|
||||
省市县三级联动选择 （拉卡拉）
|
||||
|
||||
@author xiaoyu
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, onMounted, ref } from 'vue'
|
||||
import { getOriginIfCode } from '../util/jeepayComponentUtil.js'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
ifCode: { type: Array, default: null }
|
||||
})
|
||||
|
||||
const allList = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
const ifCodeView = getOriginIfCode(props.ifCode).toLowerCase()
|
||||
|
||||
// 根据支付接口名称 动态引入json
|
||||
import(`./areacode${ifCodeView.charAt(0).toUpperCase() + ifCodeView.slice(1)}.json`).then((module) => {
|
||||
allList.value = module.default
|
||||
}).catch((e) => {
|
||||
console.log('省市区编码导入失败！ ', e)
|
||||
})
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
省市县三级联动选择
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="triggerNode => triggerNode.parentNode" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeDg.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
:deep(.ant-select-selector){
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<!--
|
||||
省市县三级联动选择 （富友）
|
||||
|
||||
@author zx
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/15 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeFuiou.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<!--
|
||||
省市县三级联动选择
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeKq.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<!--
|
||||
省市县三级联动选择 （拉卡拉）
|
||||
|
||||
@author xiaoyu
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeLkl.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
省市县三级联动选择
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="triggerNode => triggerNode.parentNode" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeRyx.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
:deep(.ant-select-selector){
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<!--
|
||||
省市县三级联动选择 （收付通接口获取）
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择开户银行省市" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeSft.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'changeSft'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('changeSft', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
省市县三级联动选择
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="triggerNode => triggerNode.parentNode" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeSxf.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
:deep(.ant-select-selector){
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<!--
|
||||
省市县三级联动选择 星驿付 获取支行市编码（基于富友）
|
||||
|
||||
@author yr
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/10/20 17:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeFuiou.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<!--
|
||||
省市县三级联动选择 （国标） 返回省市区编码
|
||||
|
||||
直辖市：第一级不包含“市”，比如“北京 北京市 某某区”
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeUmhs.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions, value)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
|
||||
// 递归遍历树状结构数据
|
||||
function recursionTreeData (treeData, func, pid) {
|
||||
for (let i = 0; i < treeData.length; i++) {
|
||||
|
||||
const item = treeData[i]
|
||||
|
||||
if(func(item)){
|
||||
return [item, pid]
|
||||
}
|
||||
|
||||
if (item.children && item.children.length > 0) {
|
||||
let res = recursionTreeData(item.children, func, item.value)
|
||||
if(res){
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据最后一位的（县级编码 搜索展开全部内容 ）
|
||||
function changeByAreacode(areacode){
|
||||
|
||||
if(!areacode){
|
||||
return
|
||||
}
|
||||
|
||||
let p3 : any = recursionTreeData(allList, (r => r.value == areacode), 0)
|
||||
if(!p3){
|
||||
return false
|
||||
}
|
||||
|
||||
let p2: any = recursionTreeData(allList, (r => r.value == p3[1]), 0)
|
||||
if(!p2){
|
||||
return false
|
||||
}
|
||||
|
||||
let p1 : any = recursionTreeData(allList, (r => r.value == p2[1]), 0)
|
||||
if(!p1){
|
||||
return false
|
||||
}
|
||||
|
||||
changeFunc([p1[0].value, p2[0].value, p3[0].value], [p1[0], p2[0], p3[0]])
|
||||
|
||||
}
|
||||
|
||||
defineExpose({changeByAreacode})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
省市县三级联动选择
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="triggerNode => triggerNode.parentNode" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeYs.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
:deep(.ant-select-selector){
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<!--
|
||||
省市县三级联动选择
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './areacodeYsf.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<!--
|
||||
省市县三级联动选择 （拉卡拉）
|
||||
|
||||
@author xiaoyu
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import allList from './bankAreacodeLkl.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
[{"name":"无忧付","children":[{"entName":"项目管理","entId":"ENT_MCH_PAYMENT_TASK","menuUri":"/DfTaskPage","path":"/dfList","component_url":"@/views/paydf/task/List.vue"},{"entName":"资金账户","entId":"ENT_MCH_PAYMENT_AQF","menuUri":"/AqfListPage","path":"/aqfList","component_url":"@/views/paydf/aqf/List.vue"},{"entName":"人员管理","entId":"ENT_MCH_PAYMENT_AQF_USER_LIST","menuUri":"/AqfUserListPage","path":"/aqfUserList","component_url":"@/views/paydf/aqf/userList.vue"},{"entName":"发起结算","entId":"ENT_MCH_PAYMENT_TASK_SETTLE_LIST","menuUri":"/TaskSettleListPage","path":"/taskSettleList","component_url":"@/views/paydf/settle/List.vue"}]}]
|
||||
@@ -0,0 +1 @@
|
||||
[{"name":"无忧付","children":[{"entName":"项目管理","entId":"ENT_MCH_PAYMENT_TASK","menuUri":"/DfTaskPage","path":"/dfList","component_url":"@/views/paydf/task/List.vue"},{"entName":"资金账户","entId":"ENT_MCH_PAYMENT_AQF","menuUri":"/AqfListPage","path":"/aqfList","component_url":"@/views/paydf/aqf/List.vue"},{"entName":"人员管理","entId":"ENT_MCH_PAYMENT_AQF_USER_LIST","menuUri":"/AqfUserListPage","path":"/aqfUserList","component_url":"@/views/paydf/aqf/userList.vue"},{"entName":"发起结算","entId":"ENT_MCH_PAYMENT_TASK_SETTLE_LIST","menuUri":"/TaskSettleListPage","path":"/taskSettleList","component_url":"@/views/paydf/settle/List.vue"},{"entName":"结算数据","entId":"ENT_MCH_AQF_SETTLEMENT_STATISTICS","menuUri":"/SettleStatisticsDataPage","path":"/settleStatisticsList","component_url":"@/views/paydf/aqf/settleStatistics.vue"}]}]
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="props.value"
|
||||
placeholder="选择开户银行"
|
||||
:disabled="props.readonly"
|
||||
@change="changeFunc"
|
||||
>
|
||||
<a-select-option v-for="(item) in allList" :key="item.bankCode" :value="item.bankName">
|
||||
{{ item.bankName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps} from 'vue'
|
||||
import allList from './bankcode.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
readonly: { type: Boolean, default: false },
|
||||
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="props.value"
|
||||
placeholder="选择开户银行"
|
||||
:disabled="props.readonly"
|
||||
@change="changeFunc"
|
||||
>
|
||||
<a-select-option v-for="(item) in allList" :key="item.bankType" :value="item.bankType">
|
||||
{{ item.bankName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps} from 'vue'
|
||||
import allList from './bankcodeFuiou.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
readonly: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="props.value"
|
||||
:key = "props.key"
|
||||
placeholder="选择开户银行"
|
||||
:disabled="props.readonly"
|
||||
@change="changeFunc"
|
||||
>
|
||||
<a-select-option v-for="(item) in allList" :key="item.bankType" :value="item.bankName">
|
||||
{{ item.bankName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps} from 'vue'
|
||||
import allList from './bankcodeHulu.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
key: { type: Array, default: null },
|
||||
readonly: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change','changeSelect'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value,key){
|
||||
emit('update:value', value)
|
||||
emit('changeSelect', key)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="props.value"
|
||||
placeholder="选择开户银行"
|
||||
:disabled="props.readonly"
|
||||
@change="changeFunc"
|
||||
>
|
||||
<a-select-option v-for="(item) in allList" :key="item.bankCode" :value="item.bankCode">
|
||||
{{ item.bankName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps} from 'vue'
|
||||
import allList from './bankCodeRuipay.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
readonly: { type: Boolean, default: false },
|
||||
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="props.value"
|
||||
placeholder="选择开户银行"
|
||||
:disabled="props.readonly"
|
||||
@change="changeFunc"
|
||||
>
|
||||
<a-select-option v-for="(item) in allList" :key="item.bank_alias" :value="item.bank_alias">
|
||||
{{ item.bank_alias }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, computed} from 'vue'
|
||||
import personalList from './bankCodeSftPersonal.json'
|
||||
import corporateList from './bankCodeSftCorporate.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
settAccountType: { type: String, default: null },
|
||||
readonly: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
let allList = computed(() => {
|
||||
return props.settAccountType == 'B' ? corporateList : personalList
|
||||
}) as any
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
const bankInfo = allList.value.find(item => item.bank_alias == value) || {} as any
|
||||
emit('update:value', bankInfo.bank_alias)
|
||||
emit('change', bankInfo)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="props.value"
|
||||
placeholder="选择开户银行"
|
||||
:disabled="props.readonly"
|
||||
:filterOption="filterOption"
|
||||
@change="changeFunc"
|
||||
>
|
||||
<a-select-option v-for="(item) in allList" :key="item.bankName" :value="item.bankCode">
|
||||
{{ item.bankName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps} from 'vue'
|
||||
import allList from './bankCodeTerpay.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
readonly: { type: Boolean, default: false },
|
||||
|
||||
})
|
||||
|
||||
// 伪查询 将输入值和key值做对比过滤数据
|
||||
function filterOption(input, option) {
|
||||
return option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="props.value"
|
||||
placeholder="选择开户银行"
|
||||
:disabled="props.readonly"
|
||||
@change="changeFunc"
|
||||
>
|
||||
<a-select-option v-for="(item) in allList" :key="item.value" :value="item.label">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps} from 'vue'
|
||||
import allList from './bankNameYs.json'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
readonly: { type: Boolean, default: false },
|
||||
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--
|
||||
银行编码code
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/03/01 14:57
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-select show-search :value="props.value" :key="props.key" placeholder="选择开户银行" :disabled="props.readonly"
|
||||
@change="changeFunc">
|
||||
<a-select-option v-for="(item) in props.allList" :key="item.pbcBankId" :value="item.branchName">
|
||||
{{ item.branchName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
|
||||
|
||||
|
||||
const props:any = defineProps({
|
||||
value: { type: Array, default: null },
|
||||
key: { type: Array, default: null },
|
||||
readonly: { type: Boolean, default: false },
|
||||
allList: { type: Array, default: null }
|
||||
})
|
||||
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change','changeSelect'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value,key) {
|
||||
emit('update:value', value)
|
||||
emit('changeSelect', key)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,292 @@
|
||||
[{
|
||||
"bankCode": "319",
|
||||
"bankName": "徽商银行"
|
||||
}, {
|
||||
"bankCode": "402",
|
||||
"bankName": "农村信用合作社"
|
||||
}, {
|
||||
"bankCode": "325",
|
||||
"bankName": "城市商业银行"
|
||||
}, {
|
||||
"bankCode": "401",
|
||||
"bankName": "城市信用合作社"
|
||||
}, {
|
||||
"bankCode": "317",
|
||||
"bankName": "农村合作银行"
|
||||
}, {
|
||||
"bankCode": "322",
|
||||
"bankName": "上海农村商业银行"
|
||||
}, {
|
||||
"bankCode": "314",
|
||||
"bankName": "农村商业银行"
|
||||
}, {
|
||||
"bankCode": "309",
|
||||
"bankName": "兴业银行"
|
||||
}, {
|
||||
"bankCode": "310",
|
||||
"bankName": "上海浦东发展银行"
|
||||
}, {
|
||||
"bankCode": "308",
|
||||
"bankName": "招商银行"
|
||||
}, {
|
||||
"bankCode": "102",
|
||||
"bankName": "中国工商银行"
|
||||
}, {
|
||||
"bankCode": "104",
|
||||
"bankName": "中国银行"
|
||||
}, {
|
||||
"bankCode": "318",
|
||||
"bankName": "渤海银行"
|
||||
}, {
|
||||
"bankCode": "313",
|
||||
"bankName": "商业银行"
|
||||
}, {
|
||||
"bankCode": "320",
|
||||
"bankName": "村镇银行"
|
||||
}, {
|
||||
"bankCode": "315",
|
||||
"bankName": "恒丰银行"
|
||||
}, {
|
||||
"bankCode": "316",
|
||||
"bankName": "浙商银行"
|
||||
}, {
|
||||
"bankCode": "302",
|
||||
"bankName": "中信银行"
|
||||
}, {
|
||||
"bankCode": "301",
|
||||
"bankName": "交通银行"
|
||||
}, {
|
||||
"bankCode": "304",
|
||||
"bankName": "华夏银行"
|
||||
}, {
|
||||
"bankCode": "403",
|
||||
"bankName": "中国邮政储蓄银行"
|
||||
}, {
|
||||
"bankCode": "103",
|
||||
"bankName": "中国农业银行"
|
||||
}, {
|
||||
"bankCode": "502",
|
||||
"bankName": "东亚银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "531",
|
||||
"bankName": "花旗银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "501",
|
||||
"bankName": "汇丰银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "597",
|
||||
"bankName": "韩亚银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "785",
|
||||
"bankName": "华商银行"
|
||||
}, {
|
||||
"bankCode": "303",
|
||||
"bankName": "中国光大银行"
|
||||
}, {
|
||||
"bankCode": "307",
|
||||
"bankName": "平安银行"
|
||||
}, {
|
||||
"bankCode": "306",
|
||||
"bankName": "广东发展银行"
|
||||
}, {
|
||||
"bankCode": "305",
|
||||
"bankName": "中国民生银行"
|
||||
}, {
|
||||
"bankCode": "105",
|
||||
"bankName": "中国建设银行"
|
||||
}, {
|
||||
"bankCode": "713",
|
||||
"bankName": "德国商业银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "732",
|
||||
"bankName": "意大利联合圣保罗银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "741",
|
||||
"bankName": "瑞士信贷银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "752",
|
||||
"bankName": "蒙特利尔银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "761",
|
||||
"bankName": "澳大利亚和新西兰银行集团有限公司"
|
||||
}, {
|
||||
"bankCode": "771",
|
||||
"bankName": "摩根士丹利国际银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "775",
|
||||
"bankName": "华美银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "776",
|
||||
"bankName": "荷兰合作银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "781",
|
||||
"bankName": "厦门国际银行"
|
||||
}, {
|
||||
"bankCode": "533",
|
||||
"bankName": "摩根大通银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "503",
|
||||
"bankName": "南洋商业银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "504",
|
||||
"bankName": "恒生银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "506",
|
||||
"bankName": "集友银行有限公司"
|
||||
}, {
|
||||
"bankCode": "904",
|
||||
"bankName": "城市商业银行资金清算中心"
|
||||
}, {
|
||||
"bankCode": "641",
|
||||
"bankName": "奥地利中央合作银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "651",
|
||||
"bankName": "比利时联合银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "661",
|
||||
"bankName": "苏格兰皇家银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "662",
|
||||
"bankName": "荷兰安智银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "671",
|
||||
"bankName": "渣打银行（中国）有限责任公司"
|
||||
}, {
|
||||
"bankCode": "691",
|
||||
"bankName": "法国兴业银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "694",
|
||||
"bankName": "东方汇理银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "532",
|
||||
"bankName": "美国银行有限公司"
|
||||
}, {
|
||||
"bankCode": "561",
|
||||
"bankName": "三菱东京日联银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "782",
|
||||
"bankName": "法国巴黎银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "787",
|
||||
"bankName": "华一银行"
|
||||
}, {
|
||||
"bankCode": "564",
|
||||
"bankName": "瑞穗实业银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "565",
|
||||
"bankName": "日本山口银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "591",
|
||||
"bankName": "韩国外换银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "593",
|
||||
"bankName": "友利银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "594",
|
||||
"bankName": "韩国产业银行"
|
||||
}, {
|
||||
"bankCode": "595",
|
||||
"bankName": "新韩银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "596",
|
||||
"bankName": "韩国中小企业银行"
|
||||
}, {
|
||||
"bankCode": "621",
|
||||
"bankName": "华侨银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "695",
|
||||
"bankName": "法国外贸银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "712",
|
||||
"bankName": "德意志银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "563",
|
||||
"bankName": "三井住友银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "622",
|
||||
"bankName": "大华银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "510",
|
||||
"bankName": "永亨银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "716",
|
||||
"bankName": "德国北德意志州银行"
|
||||
}, {
|
||||
"bankCode": "512",
|
||||
"bankName": "永隆银行有限公司"
|
||||
}, {
|
||||
"bankCode": "751",
|
||||
"bankName": "加拿大丰业银行有限公司"
|
||||
}, {
|
||||
"bankCode": "742",
|
||||
"bankName": "瑞士银行有限公司"
|
||||
}, {
|
||||
"bankCode": "321",
|
||||
"bankName": "重庆三峡银行"
|
||||
}, {
|
||||
"bankCode": "534",
|
||||
"bankName": "美国建东银行有限公司"
|
||||
}, {
|
||||
"bankCode": "507",
|
||||
"bankName": "创兴银行有限公司"
|
||||
}, {
|
||||
"bankCode": "509",
|
||||
"bankName": "星展银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "631",
|
||||
"bankName": "盘古银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "717",
|
||||
"bankName": "中德住房储蓄银行有限责任公司"
|
||||
}, {
|
||||
"bankCode": "681",
|
||||
"bankName": "瑞典商业银行公共有限公司"
|
||||
}, {
|
||||
"bankCode": "682",
|
||||
"bankName": "瑞典北欧斯安银行有限公司"
|
||||
}, {
|
||||
"bankCode": "616",
|
||||
"bankName": "菲律宾首都银行及信托有限公司"
|
||||
}, {
|
||||
"bankCode": "514",
|
||||
"bankName": "中信嘉华银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "513",
|
||||
"bankName": "大新银行（中国）有限公司"
|
||||
}, {
|
||||
"bankCode": "633",
|
||||
"bankName": "泰华农民银行大众有限公司"
|
||||
}, {
|
||||
"bankCode": "731",
|
||||
"bankName": "意大利罗马银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "511",
|
||||
"bankName": "上海商业银行"
|
||||
}, {
|
||||
"bankCode": "673",
|
||||
"bankName": "英国巴克莱银行有限公司"
|
||||
}, {
|
||||
"bankCode": "566",
|
||||
"bankName": "日本住友信托银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "611",
|
||||
"bankName": "马来亚银行有限公司"
|
||||
}, {
|
||||
"bankCode": "323",
|
||||
"bankName": "众邦银行"
|
||||
}, {
|
||||
"bankCode": "910",
|
||||
"bankName": "农信银资金清算中心"
|
||||
}, {
|
||||
"bankCode": "581",
|
||||
"bankName": "挪威银行公共有限公司"
|
||||
}, {
|
||||
"bankCode": "632",
|
||||
"bankName": "泰国泰京银行大众有限公司"
|
||||
}, {
|
||||
"bankCode": "773",
|
||||
"bankName": "新联商业银行"
|
||||
}, {
|
||||
"bankCode": "551",
|
||||
"bankName": "印度国家银行"
|
||||
}]
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,802 @@
|
||||
[{
|
||||
"bankCode": "PSBC",
|
||||
"bankName": "中国邮政储蓄银行"
|
||||
}, {
|
||||
"bankCode": "CEB",
|
||||
"bankName": "中国光大银行"
|
||||
}, {
|
||||
"bankCode": "ICBC",
|
||||
"bankName": "中国工商银行"
|
||||
}, {
|
||||
"bankCode": "ABC",
|
||||
"bankName": "中国农业银行"
|
||||
}, {
|
||||
"bankCode": "CIB",
|
||||
"bankName": "兴业银行"
|
||||
}, {
|
||||
"bankCode": "CNCB",
|
||||
"bankName": "中信银行"
|
||||
}, {
|
||||
"bankCode": "HXB",
|
||||
"bankName": "华夏银行"
|
||||
}, {
|
||||
"bankCode": "BOC",
|
||||
"bankName": "中国银行"
|
||||
}, {
|
||||
"bankCode": "CCB",
|
||||
"bankName": "中国建设银行"
|
||||
}, {
|
||||
"bankCode": "BCM",
|
||||
"bankName": "交通银行"
|
||||
}, {
|
||||
"bankCode": "CMBC",
|
||||
"bankName": "中国民生银行"
|
||||
}, {
|
||||
"bankCode": "CMB",
|
||||
"bankName": "招商银行"
|
||||
}, {
|
||||
"bankCode": "NXBANK",
|
||||
"bankName": "宁夏银行"
|
||||
}, {
|
||||
"bankCode": "CRCB",
|
||||
"bankName": "成都农村商业银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "HBRB",
|
||||
"bankName": "湖北农信联合社"
|
||||
}, {
|
||||
"bankCode": "SPDB",
|
||||
"bankName": "浦东发展银行"
|
||||
}, {
|
||||
"bankCode": "LSB",
|
||||
"bankName": "临商银行"
|
||||
}, {
|
||||
"bankCode": "TZB",
|
||||
"bankName": "台州银行"
|
||||
}, {
|
||||
"bankCode": "DZB",
|
||||
"bankName": "德州银行"
|
||||
}, {
|
||||
"bankCode": "NJCB",
|
||||
"bankName": "南京银行"
|
||||
}, {
|
||||
"bankCode": "BOS",
|
||||
"bankName": "上海银行"
|
||||
}, {
|
||||
"bankCode": "NBCB",
|
||||
"bankName": "宁波银行"
|
||||
}, {
|
||||
"bankCode": "GLB",
|
||||
"bankName": "桂林银行"
|
||||
}, {
|
||||
"bankCode": "JLB",
|
||||
"bankName": "吉林银行"
|
||||
}, {
|
||||
"bankCode": "ZYB",
|
||||
"bankName": "中原银行"
|
||||
}, {
|
||||
"bankCode": "HFB",
|
||||
"bankName": "恒丰银行"
|
||||
}, {
|
||||
"bankCode": "WZCB",
|
||||
"bankName": "温州银行"
|
||||
}, {
|
||||
"bankCode": "QZB",
|
||||
"bankName": "泉州银行"
|
||||
}, {
|
||||
"bankCode": "LJB",
|
||||
"bankName": "龙江银行"
|
||||
}, {
|
||||
"bankCode": "LWB",
|
||||
"bankName": "莱芜银行"
|
||||
}, {
|
||||
"bankCode": "JSB",
|
||||
"bankName": "江苏银行"
|
||||
}, {
|
||||
"bankCode": "CZB",
|
||||
"bankName": "浙商银行"
|
||||
}, {
|
||||
"bankCode": "CBHB",
|
||||
"bankName": "渤海银行"
|
||||
}, {
|
||||
"bankCode": "JSHB",
|
||||
"bankName": "晋商银行"
|
||||
}, {
|
||||
"bankCode": "QDRB",
|
||||
"bankName": "青岛农信"
|
||||
}, {
|
||||
"bankCode": "WJRCB",
|
||||
"bankName": "吴江农商行"
|
||||
}, {
|
||||
"bankCode": "KSRB",
|
||||
"bankName": "昆山农信社"
|
||||
}, {
|
||||
"bankCode": "KMRB",
|
||||
"bankName": "昆明农联社"
|
||||
}, {
|
||||
"bankCode": "HBB",
|
||||
"bankName": "哈尔滨银行"
|
||||
}, {
|
||||
"bankCode": "WHCB",
|
||||
"bankName": "威海商业银行"
|
||||
}, {
|
||||
"bankCode": "HZCB",
|
||||
"bankName": "杭州商业银行"
|
||||
}, {
|
||||
"bankCode": "XIB",
|
||||
"bankName": "厦门国际银行"
|
||||
}, {
|
||||
"bankCode": "LZCB",
|
||||
"bankName": "泸州市商业银行"
|
||||
}, {
|
||||
"bankCode": "TLCB",
|
||||
"bankName": "泰隆城市信用社"
|
||||
}, {
|
||||
"bankCode": "TJCB",
|
||||
"bankName": "天津市商业银行"
|
||||
}, {
|
||||
"bankCode": "GXNGB",
|
||||
"bankName": "广西北部湾银行"
|
||||
}, {
|
||||
"bankCode": "NMGRB",
|
||||
"bankName": "内蒙古农村信用社"
|
||||
}, {
|
||||
"bankCode": "BJRCB",
|
||||
"bankName": "北京农村商业银行"
|
||||
}, {
|
||||
"bankCode": "ZJMTCB",
|
||||
"bankName": "浙江民泰商业银行"
|
||||
}, {
|
||||
"bankCode": "DRCB",
|
||||
"bankName": "东莞农村商业银行"
|
||||
}, {
|
||||
"bankCode": "TRCB",
|
||||
"bankName": "天津农村商业银行"
|
||||
}, {
|
||||
"bankCode": "JRCB",
|
||||
"bankName": "江阴农村商业银行"
|
||||
}, {
|
||||
"bankCode": "CZCB",
|
||||
"bankName": "浙江稠州商业银行"
|
||||
}, {
|
||||
"bankCode": "CQRCB",
|
||||
"bankName": "重庆农村商业银行"
|
||||
}, {
|
||||
"bankCode": "WSHYVB",
|
||||
"bankName": "尉氏合益村镇银行"
|
||||
}, {
|
||||
"bankCode": "CGB",
|
||||
"bankName": "广发银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "BHB",
|
||||
"bankName": "天津滨海农村商业银行"
|
||||
}, {
|
||||
"bankCode": "RSRB",
|
||||
"bankName": "福建建瓯瑞狮村镇银行"
|
||||
}, {
|
||||
"bankCode": "JURB",
|
||||
"bankName": "浙江嘉善联合村镇银行"
|
||||
}, {
|
||||
"bankCode": "GMYH",
|
||||
"bankName": "南宁江南国民村镇银行"
|
||||
}, {
|
||||
"bankCode": "BOCFDB",
|
||||
"bankName": "中银富登村镇银行"
|
||||
}, {
|
||||
"bankCode": "JZB",
|
||||
"bankName": "锦州银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "QLB",
|
||||
"bankName": "齐鲁银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "JCB",
|
||||
"bankName": "晋城银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "JHB",
|
||||
"bankName": "金华银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "JNB",
|
||||
"bankName": "济宁银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "LZB",
|
||||
"bankName": "柳州银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "ZZB",
|
||||
"bankName": "郑州银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "SZB",
|
||||
"bankName": "苏州银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "XMB",
|
||||
"bankName": "厦门银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "FJNX",
|
||||
"bankName": "福建省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "ZJNX",
|
||||
"bankName": "浙江省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "HNNX",
|
||||
"bankName": "河南省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "JSNX",
|
||||
"bankName": "江苏省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "SXNX",
|
||||
"bankName": "陕西省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "SDNX",
|
||||
"bankName": "山东省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "GDNYB",
|
||||
"bankName": "广东南粤银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "HLJNX",
|
||||
"bankName": "黑龙江省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "GRCB",
|
||||
"bankName": "广州农村商业银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "JLRB",
|
||||
"bankName": "吉林农信联合社"
|
||||
}, {
|
||||
"bankCode": "GXRB",
|
||||
"bankName": "广西农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "GDNX",
|
||||
"bankName": "广东省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "JLNX",
|
||||
"bankName": "吉林省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "PAB",
|
||||
"bankName": "平安银行"
|
||||
}, {
|
||||
"bankCode": "BOQHD",
|
||||
"bankName": "秦皇岛银行"
|
||||
}, {
|
||||
"bankCode": "BOCD",
|
||||
"bankName": "成都银行"
|
||||
}, {
|
||||
"bankCode": "BOWH",
|
||||
"bankName": "乌海银行"
|
||||
}, {
|
||||
"bankCode": "BOLY",
|
||||
"bankName": "辽阳银行"
|
||||
}, {
|
||||
"bankCode": "HTRBB",
|
||||
"bankName": "巴彦淖尔河套农村商业银行"
|
||||
}, {
|
||||
"bankCode": "JHXHB",
|
||||
"bankName": "天津静海新华村镇银行"
|
||||
}, {
|
||||
"bankCode": "BOHK",
|
||||
"bankName": "汉口银行"
|
||||
}, {
|
||||
"bankCode": "FJHXB",
|
||||
"bankName": "海峡银行"
|
||||
}, {
|
||||
"bankCode": "NMGB",
|
||||
"bankName": "内蒙古银行"
|
||||
}, {
|
||||
"bankCode": "SDB",
|
||||
"bankName": "深圳发展银行"
|
||||
}, {
|
||||
"bankCode": "BOGZ",
|
||||
"bankName": "广州银行"
|
||||
}, {
|
||||
"bankCode": "BOHZ",
|
||||
"bankName": "杭州银行"
|
||||
}, {
|
||||
"bankCode": "BOHB",
|
||||
"bankName": "河北银行"
|
||||
}, {
|
||||
"bankCode": "HSBC",
|
||||
"bankName": "汇丰银行"
|
||||
}, {
|
||||
"bankCode": "WRB",
|
||||
"bankName": "友利银行有限公司"
|
||||
}, {
|
||||
"bankCode": "GDHXB",
|
||||
"bankName": "广东华兴银行"
|
||||
}, {
|
||||
"bankCode": "ZJUCB",
|
||||
"bankName": "诸暨联合村镇银行"
|
||||
}, {
|
||||
"bankCode": "SJB",
|
||||
"bankName": "盛京银行"
|
||||
}, {
|
||||
"bankCode": "AHRXYS",
|
||||
"bankName": "安徽省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "EEDSB",
|
||||
"bankName": "鄂尔多斯银行"
|
||||
}, {
|
||||
"bankCode": "HSB",
|
||||
"bankName": "徽商银行"
|
||||
}, {
|
||||
"bankCode": "SXB",
|
||||
"bankName": "三峡银行"
|
||||
}, {
|
||||
"bankCode": "XQGKB",
|
||||
"bankName": "西青国开村镇银行"
|
||||
}, {
|
||||
"bankCode": "BOGY",
|
||||
"bankName": "贵阳银行"
|
||||
}, {
|
||||
"bankCode": "BSB",
|
||||
"bankName": "包商银行"
|
||||
}, {
|
||||
"bankCode": "LSBC",
|
||||
"bankName": "莱商银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "QSB",
|
||||
"bankName": "齐商银行"
|
||||
}, {
|
||||
"bankCode": "GSRB",
|
||||
"bankName": "广西横县桂商村镇银行"
|
||||
}, {
|
||||
"bankCode": "YWURB",
|
||||
"bankName": "义乌联合村镇银行"
|
||||
}, {
|
||||
"bankCode": "BEA",
|
||||
"bankName": "东亚银行"
|
||||
}, {
|
||||
"bankCode": "SHRBB",
|
||||
"bankName": "上海农村商业银行"
|
||||
}, {
|
||||
"bankCode": "SXRCB",
|
||||
"bankName": "河南嵩县农村商业银行"
|
||||
}, {
|
||||
"bankCode": "CSCB",
|
||||
"bankName": "长沙银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "HRXJ",
|
||||
"bankName": "华融湘江银行"
|
||||
}, {
|
||||
"bankCode": "BOWF",
|
||||
"bankName": "潍坊银行"
|
||||
}, {
|
||||
"bankCode": "NCSY",
|
||||
"bankName": "农村商业银行"
|
||||
}, {
|
||||
"bankCode": "JNCB",
|
||||
"bankName": "江南农村商业银行"
|
||||
}, {
|
||||
"bankCode": "CAB",
|
||||
"bankName": "长安银行"
|
||||
}, {
|
||||
"bankCode": "NCXYS",
|
||||
"bankName": "农村信用联社"
|
||||
}, {
|
||||
"bankCode": "SZNSB",
|
||||
"bankName": "深圳农村商业银行"
|
||||
}, {
|
||||
"bankCode": "LZHB",
|
||||
"bankName": "兰州银行"
|
||||
}, {
|
||||
"bankCode": "HRNX",
|
||||
"bankName": "湖南省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "HBRCB",
|
||||
"bankName": "哈尔滨农村商业银行"
|
||||
}, {
|
||||
"bankCode": "QDYH",
|
||||
"bankName": "青岛银行"
|
||||
}, {
|
||||
"bankCode": "TJJNCZ",
|
||||
"bankName": "天津津南村镇银行"
|
||||
}, {
|
||||
"bankCode": "GZNX",
|
||||
"bankName": "贵州省农村信用社联合社"
|
||||
}, {
|
||||
"bankCode": "QHCB",
|
||||
"bankName": "青海银行"
|
||||
}, {
|
||||
"bankCode": "JXCB",
|
||||
"bankName": "江西银行"
|
||||
}, {
|
||||
"bankCode": "AHRC",
|
||||
"bankName": "安徽省农村信用社"
|
||||
}, {
|
||||
"bankCode": "JLFMCZ",
|
||||
"bankName": "吉林丰满惠民村镇银行"
|
||||
}, {
|
||||
"bankCode": "TJWQCZ",
|
||||
"bankName": "天津武清村镇银行"
|
||||
}, {
|
||||
"bankCode": "LQXYS",
|
||||
"bankName": "禄劝彝族苗族自治县农村信用合作联社屏山信用社"
|
||||
}, {
|
||||
"bankCode": "CTHCZ",
|
||||
"bankName": "柘荣刺桐红村镇银行有限公司"
|
||||
}, {
|
||||
"bankCode": "PNXNCHZXYS",
|
||||
"bankName": "农村信用合作联社"
|
||||
}, {
|
||||
"bankCode": "CQRC",
|
||||
"bankName": "渝农商村镇银行"
|
||||
}, {
|
||||
"bankCode": "CQBANK",
|
||||
"bankName": "重庆银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "ZTCB",
|
||||
"bankName": "浙江泰隆商业银行"
|
||||
}, {
|
||||
"bankCode": "YZB",
|
||||
"bankName": "深圳福田银座村镇银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0075",
|
||||
"bankName": "富滇银行"
|
||||
}, {
|
||||
"bankCode": "creat0001",
|
||||
"bankName": "国家开发银行"
|
||||
}, {
|
||||
"bankCode": "creat0002",
|
||||
"bankName": "中国进出口银行"
|
||||
}, {
|
||||
"bankCode": "creat0003",
|
||||
"bankName": "中国农业发展银行"
|
||||
}, {
|
||||
"bankCode": "creat0004",
|
||||
"bankName": "广东发展银行"
|
||||
}, {
|
||||
"bankCode": "creat0005",
|
||||
"bankName": "上海浦东发展银行"
|
||||
}, {
|
||||
"bankCode": "creat0006",
|
||||
"bankName": "北京银行"
|
||||
}, {
|
||||
"bankCode": "creat0007",
|
||||
"bankName": "天津银行"
|
||||
}, {
|
||||
"bankCode": "creat0008",
|
||||
"bankName": "大连银行"
|
||||
}, {
|
||||
"bankCode": "creat0009",
|
||||
"bankName": "哈尔滨银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0010",
|
||||
"bankName": "廊坊银行"
|
||||
}, {
|
||||
"bankCode": "creat0011",
|
||||
"bankName": "张家口银行"
|
||||
}, {
|
||||
"bankCode": "creat0012",
|
||||
"bankName": "沧州银行"
|
||||
}, {
|
||||
"bankCode": "creat0013",
|
||||
"bankName": "承德银行"
|
||||
}, {
|
||||
"bankCode": "creat0014",
|
||||
"bankName": "邯郸银行"
|
||||
}, {
|
||||
"bankCode": "creat0015",
|
||||
"bankName": "唐山银行"
|
||||
}, {
|
||||
"bankCode": "creat0016",
|
||||
"bankName": "保定银行"
|
||||
}, {
|
||||
"bankCode": "creat0017",
|
||||
"bankName": "邢台银行"
|
||||
}, {
|
||||
"bankCode": "creat0018",
|
||||
"bankName": "晋城银行"
|
||||
}, {
|
||||
"bankCode": "creat0019",
|
||||
"bankName": "大同银行"
|
||||
}, {
|
||||
"bankCode": "creat0020",
|
||||
"bankName": "晋中银行"
|
||||
}, {
|
||||
"bankCode": "creat0021",
|
||||
"bankName": "阳泉市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0022",
|
||||
"bankName": "长治银行"
|
||||
}, {
|
||||
"bankCode": "creat0023",
|
||||
"bankName": "蒙商银行"
|
||||
}, {
|
||||
"bankCode": "creat0024",
|
||||
"bankName": "朝阳银行"
|
||||
}, {
|
||||
"bankCode": "creat0025",
|
||||
"bankName": "丹东银行"
|
||||
}, {
|
||||
"bankCode": "creat0026",
|
||||
"bankName": "锦州银行"
|
||||
}, {
|
||||
"bankCode": "creat0027",
|
||||
"bankName": "营口银行"
|
||||
}, {
|
||||
"bankCode": "creat0028",
|
||||
"bankName": "阜新银行"
|
||||
}, {
|
||||
"bankCode": "creat0029",
|
||||
"bankName": "鞍山银行"
|
||||
}, {
|
||||
"bankCode": "creat0030",
|
||||
"bankName": "抚顺银行"
|
||||
}, {
|
||||
"bankCode": "creat0031",
|
||||
"bankName": "本溪银行"
|
||||
}, {
|
||||
"bankCode": "creat0032",
|
||||
"bankName": "葫芦岛银行"
|
||||
}, {
|
||||
"bankCode": "creat0033",
|
||||
"bankName": "营口沿海银行"
|
||||
}, {
|
||||
"bankCode": "creat0034",
|
||||
"bankName": "城市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0035",
|
||||
"bankName": "昆仑银行"
|
||||
}, {
|
||||
"bankCode": "creat0036",
|
||||
"bankName": "宁波通商银行"
|
||||
}, {
|
||||
"bankCode": "creat0037",
|
||||
"bankName": "苏州银行"
|
||||
}, {
|
||||
"bankCode": "creat0038",
|
||||
"bankName": "江苏长江商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0039",
|
||||
"bankName": "莱商银行"
|
||||
}, {
|
||||
"bankCode": "creat0040",
|
||||
"bankName": "金华银行"
|
||||
}, {
|
||||
"bankCode": "creat0041",
|
||||
"bankName": "台州银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0042",
|
||||
"bankName": "湖州银行"
|
||||
}, {
|
||||
"bankCode": "creat0043",
|
||||
"bankName": "宁波东海银行"
|
||||
}, {
|
||||
"bankCode": "creat0044",
|
||||
"bankName": "绍兴银行"
|
||||
}, {
|
||||
"bankCode": "creat0045",
|
||||
"bankName": "嘉兴银行"
|
||||
}, {
|
||||
"bankCode": "creat0046",
|
||||
"bankName": "东莞银行"
|
||||
}, {
|
||||
"bankCode": "creat0047",
|
||||
"bankName": "九江银行"
|
||||
}, {
|
||||
"bankCode": "creat0048",
|
||||
"bankName": "福建海峡银行"
|
||||
}, {
|
||||
"bankCode": "creat0049",
|
||||
"bankName": "厦门银行"
|
||||
}, {
|
||||
"bankCode": "creat0050",
|
||||
"bankName": "赣州银行"
|
||||
}, {
|
||||
"bankCode": "creat0051",
|
||||
"bankName": "上饶银行"
|
||||
}, {
|
||||
"bankCode": "creat0052",
|
||||
"bankName": "齐鲁银行"
|
||||
}, {
|
||||
"bankCode": "creat0053",
|
||||
"bankName": "日照银行"
|
||||
}, {
|
||||
"bankCode": "creat0054",
|
||||
"bankName": "泰安银行"
|
||||
}, {
|
||||
"bankCode": "creat0055",
|
||||
"bankName": "东营银行"
|
||||
}, {
|
||||
"bankCode": "creat0056",
|
||||
"bankName": "威海市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0057",
|
||||
"bankName": "济宁银行"
|
||||
}, {
|
||||
"bankCode": "creat0058",
|
||||
"bankName": "枣庄银行"
|
||||
}, {
|
||||
"bankCode": "creat0059",
|
||||
"bankName": "烟台银行"
|
||||
}, {
|
||||
"bankCode": "creat0060",
|
||||
"bankName": "郑州银行"
|
||||
}, {
|
||||
"bankCode": "creat0061",
|
||||
"bankName": "焦作中旅银行"
|
||||
}, {
|
||||
"bankCode": "creat0062",
|
||||
"bankName": "洛阳银行"
|
||||
}, {
|
||||
"bankCode": "creat0063",
|
||||
"bankName": "平顶山银行"
|
||||
}, {
|
||||
"bankCode": "creat0064",
|
||||
"bankName": "湖北银行"
|
||||
}, {
|
||||
"bankCode": "creat0065",
|
||||
"bankName": "广东南粤银行"
|
||||
}, {
|
||||
"bankCode": "creat0066",
|
||||
"bankName": "长沙银行"
|
||||
}, {
|
||||
"bankCode": "creat0067",
|
||||
"bankName": "广西北部湾银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0068",
|
||||
"bankName": "海南银行"
|
||||
}, {
|
||||
"bankCode": "creat0069",
|
||||
"bankName": "乐山市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0070",
|
||||
"bankName": "绵阳市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0071",
|
||||
"bankName": "重庆银行"
|
||||
}, {
|
||||
"bankCode": "creat0072",
|
||||
"bankName": "雅安市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0073",
|
||||
"bankName": "宜宾市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0074",
|
||||
"bankName": "贵州银行"
|
||||
}, {
|
||||
"bankCode": "creat0076",
|
||||
"bankName": "曲靖市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0077",
|
||||
"bankName": "西藏银行"
|
||||
}, {
|
||||
"bankCode": "creat0078",
|
||||
"bankName": "西安银行"
|
||||
}, {
|
||||
"bankCode": "creat0080",
|
||||
"bankName": "甘肃银行"
|
||||
}, {
|
||||
"bankCode": "creat0081",
|
||||
"bankName": "石嘴山银行"
|
||||
}, {
|
||||
"bankCode": "creat0082",
|
||||
"bankName": "乌鲁木齐银行"
|
||||
}, {
|
||||
"bankCode": "creat0083",
|
||||
"bankName": "库尔勒银行"
|
||||
}, {
|
||||
"bankCode": "creat0084",
|
||||
"bankName": "哈密市商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0085",
|
||||
"bankName": "新疆汇和银行"
|
||||
}, {
|
||||
"bankCode": "creat0086",
|
||||
"bankName": "成都农商银行"
|
||||
}, {
|
||||
"bankCode": "creat0087",
|
||||
"bankName": "农村合作银行"
|
||||
}, {
|
||||
"bankCode": "creat0088",
|
||||
"bankName": "镇银行有限责任公司"
|
||||
}, {
|
||||
"bankCode": "creat0089",
|
||||
"bankName": "南康赣商村镇银行"
|
||||
}, {
|
||||
"bankCode": "creat0090",
|
||||
"bankName": "湘乡市村镇银行"
|
||||
}, {
|
||||
"bankCode": "creat0091",
|
||||
"bankName": "重庆三峡银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0092",
|
||||
"bankName": "重庆富民银行股份有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0093",
|
||||
"bankName": "农村信用社"
|
||||
}, {
|
||||
"bankCode": "creat0094",
|
||||
"bankName": "杭州联合农村商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0095",
|
||||
"bankName": "武汉农村商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0096",
|
||||
"bankName": "宁夏黄河农村商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0098",
|
||||
"bankName": "南洋商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0099",
|
||||
"bankName": "恒生银行"
|
||||
}, {
|
||||
"bankCode": "creat0100",
|
||||
"bankName": "集友银行"
|
||||
}, {
|
||||
"bankCode": "creat0101",
|
||||
"bankName": "创兴银行有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0102",
|
||||
"bankName": "上海商业银行"
|
||||
}, {
|
||||
"bankCode": "creat0103",
|
||||
"bankName": "永隆银行"
|
||||
}, {
|
||||
"bankCode": "creat0104",
|
||||
"bankName": "新韩银行"
|
||||
}, {
|
||||
"bankCode": "creat0105",
|
||||
"bankName": "韩国中小企业银行有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0106",
|
||||
"bankName": "韩亚银行"
|
||||
}, {
|
||||
"bankCode": "creat0107",
|
||||
"bankName": "国民银行"
|
||||
}, {
|
||||
"bankCode": "creat0108",
|
||||
"bankName": "马来亚银行"
|
||||
}, {
|
||||
"bankCode": "creat0109",
|
||||
"bankName": "首都银行"
|
||||
}, {
|
||||
"bankCode": "creat0110",
|
||||
"bankName": "华侨银行(中国)有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0111",
|
||||
"bankName": "大华银行"
|
||||
}, {
|
||||
"bankCode": "creat0112",
|
||||
"bankName": "星展银行(中国)有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0113",
|
||||
"bankName": "泰国盘谷银行(大众有限公司)"
|
||||
}, {
|
||||
"bankCode": "creat0114",
|
||||
"bankName": "泰华农民银行"
|
||||
}, {
|
||||
"bankCode": "creat0115",
|
||||
"bankName": "渣打银行"
|
||||
}, {
|
||||
"bankCode": "creat0116",
|
||||
"bankName": "德国北德意志州银行"
|
||||
}, {
|
||||
"bankCode": "creat0117",
|
||||
"bankName": "瑞士银行"
|
||||
}, {
|
||||
"bankCode": "creat0118",
|
||||
"bankName": "蒙特利尔银行"
|
||||
}, {
|
||||
"bankCode": "creat0119",
|
||||
"bankName": "澳大利亚和新西兰银行集团有限公司"
|
||||
}, {
|
||||
"bankCode": "creat0120",
|
||||
"bankName": "富邦华一银行"
|
||||
}, {
|
||||
"bankCode": "LCRBANK",
|
||||
"bankName": "湛江廉江长江村镇银行"
|
||||
}, {
|
||||
"bankCode": "WSCZBK",
|
||||
"bankName": "文山砚山长江村镇银行"
|
||||
}, {
|
||||
"bankCode": "YNHTBK",
|
||||
"bankName": "云南红塔银行"
|
||||
}, {
|
||||
"bankCode": "SLBK",
|
||||
"bankName": "遂宁银行"
|
||||
}, {
|
||||
"bankCode": "HSBK",
|
||||
"bankName": "衡水银行"
|
||||
}, {
|
||||
"bankCode": "CZBK",
|
||||
"bankName": "集宁包闹村镇银行"
|
||||
}, {
|
||||
"bankCode": "CFCZ",
|
||||
"bankName": "安徽长丰科源村镇银行股份有限公司"
|
||||
}]
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,124 @@
|
||||
[{
|
||||
"bankType": "0323",
|
||||
"bankName": "上海华瑞银行"
|
||||
}, {
|
||||
"bankType": "A000",
|
||||
"bankName": "境外银行"
|
||||
}, {
|
||||
"bankType": "0102",
|
||||
"bankName": "中国工商银行"
|
||||
}, {
|
||||
"bankType": "0103",
|
||||
"bankName": "中国农业银行"
|
||||
}, {
|
||||
"bankType": "0104",
|
||||
"bankName": "中国银行"
|
||||
}, {
|
||||
"bankType": "0105",
|
||||
"bankName": "中国建设银行"
|
||||
}, {
|
||||
"bankType": "0301",
|
||||
"bankName": "交通银行"
|
||||
}, {
|
||||
"bankType": "0308",
|
||||
"bankName": "招商银行"
|
||||
}, {
|
||||
"bankType": "0309",
|
||||
"bankName": "兴业银行"
|
||||
}, {
|
||||
"bankType": "0305",
|
||||
"bankName": "中国民生银行"
|
||||
}, {
|
||||
"bankType": "0306",
|
||||
"bankName": "广东发展银行"
|
||||
}, {
|
||||
"bankType": "0307",
|
||||
"bankName": "平安银行股份有限公司"
|
||||
}, {
|
||||
"bankType": "0310",
|
||||
"bankName": "上海浦东发展银行"
|
||||
}, {
|
||||
"bankType": "0304",
|
||||
"bankName": "华夏银行"
|
||||
}, {
|
||||
"bankType": "0313",
|
||||
"bankName": "其他城市商业银行"
|
||||
}, {
|
||||
"bankType": "0402",
|
||||
"bankName": "其他农村信用合作社"
|
||||
}, {
|
||||
"bankType": "0203",
|
||||
"bankName": "中国农业发展银行"
|
||||
}, {
|
||||
"bankType": "0314",
|
||||
"bankName": "其他农村商业银行"
|
||||
}, {
|
||||
"bankType": "0315",
|
||||
"bankName": "恒丰银行"
|
||||
}, {
|
||||
"bankType": "0403",
|
||||
"bankName": "中国邮政储蓄银行股份有限公司"
|
||||
}, {
|
||||
"bankType": "0303",
|
||||
"bankName": "中国光大银行"
|
||||
}, {
|
||||
"bankType": "0302",
|
||||
"bankName": "中信银行"
|
||||
}, {
|
||||
"bankType": "0316",
|
||||
"bankName": "浙商银行股份有限公司"
|
||||
}, {
|
||||
"bankType": "0318",
|
||||
"bankName": "渤海银行股份有限公司"
|
||||
}, {
|
||||
"bankType": "0319",
|
||||
"bankName": "徽商银行"
|
||||
}, {
|
||||
"bankType": "0671",
|
||||
"bankName": "香港地区渣打银行"
|
||||
}, {
|
||||
"bankType": "0502",
|
||||
"bankName": "东亚银行(中国)有限公司"
|
||||
}, {
|
||||
"bankType": "0317",
|
||||
"bankName": "其他农村合作银行"
|
||||
}, {
|
||||
"bankType": "0322",
|
||||
"bankName": "上海农村商业银行"
|
||||
}, {
|
||||
"bankType": "0320",
|
||||
"bankName": "村镇银行"
|
||||
}, {
|
||||
"bankType": "0501",
|
||||
"bankName": "汇丰银行"
|
||||
}, {
|
||||
"bankType": "0503",
|
||||
"bankName": "南洋商业银行"
|
||||
}, {
|
||||
"bankType": "0593",
|
||||
"bankName": "友利银行"
|
||||
}, {
|
||||
"bankType": "0595",
|
||||
"bankName": "新韩银行"
|
||||
}, {
|
||||
"bankType": "0596",
|
||||
"bankName": "企业银行"
|
||||
}, {
|
||||
"bankType": "0597",
|
||||
"bankName": "韩亚银行"
|
||||
}, {
|
||||
"bankType": "0621",
|
||||
"bankName": "华侨银行"
|
||||
}, {
|
||||
"bankType": "0622",
|
||||
"bankName": "大华银行"
|
||||
}, {
|
||||
"bankType": "0531",
|
||||
"bankName": "花旗银行"
|
||||
}, {
|
||||
"bankType": "0781",
|
||||
"bankName": "厦门国际银行"
|
||||
}, {
|
||||
"bankType": "0787",
|
||||
"bankName": "华一银行"
|
||||
}]
|
||||
@@ -0,0 +1,154 @@
|
||||
[
|
||||
{
|
||||
"bankType": "102",
|
||||
"bankName": "中国工商银行"
|
||||
},
|
||||
{
|
||||
"bankType": "103",
|
||||
"bankName": "中国农业银行"
|
||||
},
|
||||
{
|
||||
"bankType": "104",
|
||||
"bankName": "中国银行"
|
||||
},
|
||||
{
|
||||
"bankType": "105",
|
||||
"bankName": "中国建设银行"
|
||||
},
|
||||
{
|
||||
"bankType": "201",
|
||||
"bankName": "国家开发银行"
|
||||
},
|
||||
{
|
||||
"bankType": "202",
|
||||
"bankName": "中国进出口银行"
|
||||
},
|
||||
{
|
||||
"bankType": "203",
|
||||
"bankName": "中国农业发展银行"
|
||||
},
|
||||
{
|
||||
"bankType": "301",
|
||||
"bankName": "交通银行"
|
||||
},
|
||||
{
|
||||
"bankType": "302",
|
||||
"bankName": "中信实业银行"
|
||||
},
|
||||
{
|
||||
"bankType": "303",
|
||||
"bankName": "中国光大银行"
|
||||
},
|
||||
{
|
||||
"bankType": "304",
|
||||
"bankName": "华夏银行"
|
||||
},
|
||||
{
|
||||
"bankType": "305",
|
||||
"bankName": "中国民生银行"
|
||||
},
|
||||
{
|
||||
"bankType": "306",
|
||||
"bankName": "广东发展银行"
|
||||
},
|
||||
{
|
||||
"bankType": "307",
|
||||
"bankName": "深圳发展银行"
|
||||
},
|
||||
{
|
||||
"bankType": "308",
|
||||
"bankName": "招商银行"
|
||||
},
|
||||
{
|
||||
"bankType": "309",
|
||||
"bankName": "兴业银行"
|
||||
},
|
||||
{
|
||||
"bankType": "310",
|
||||
"bankName": "上海浦东发展银行"
|
||||
},
|
||||
{
|
||||
"bankType": "313",
|
||||
"bankName": "城市商业银行"
|
||||
},
|
||||
{
|
||||
"bankType": "314",
|
||||
"bankName": "农村商业银行"
|
||||
},
|
||||
{
|
||||
"bankType": "315",
|
||||
"bankName": "恒丰银行"
|
||||
},
|
||||
{
|
||||
"bankType": "316",
|
||||
"bankName": "浙商银行"
|
||||
},
|
||||
{
|
||||
"bankType": "317",
|
||||
"bankName": "农村合作银行"
|
||||
},
|
||||
{
|
||||
"bankType": "318",
|
||||
"bankName": "渤海银行"
|
||||
},
|
||||
{
|
||||
"bankType": "319",
|
||||
"bankName": "徽商银行"
|
||||
},
|
||||
{
|
||||
"bankType": "320",
|
||||
"bankName": "村镇银行"
|
||||
},
|
||||
{
|
||||
"bankType": "321",
|
||||
"bankName": "重庆三峡银行"
|
||||
},
|
||||
{
|
||||
"bankType": "322",
|
||||
"bankName": "上海农村商业银行"
|
||||
},
|
||||
{
|
||||
"bankType": "323",
|
||||
"bankName": "众邦银行"
|
||||
},
|
||||
{
|
||||
"bankType": "402",
|
||||
"bankName": "农村信用合作社"
|
||||
},
|
||||
{
|
||||
"bankType": "403",
|
||||
"bankName": "中国邮政储蓄银行"
|
||||
},
|
||||
{
|
||||
"bankType": "501",
|
||||
"bankName": "汇丰银行（中国）有限公司"
|
||||
},
|
||||
{
|
||||
"bankType": "502",
|
||||
"bankName": "东亚银行（中国）有限公司"
|
||||
},
|
||||
{
|
||||
"bankType": "503",
|
||||
"bankName": "南洋商业银行（中国）有限公司"
|
||||
},
|
||||
{
|
||||
"bankType": "504",
|
||||
"bankName": "恒生银行（中国）有限公司"
|
||||
},
|
||||
{
|
||||
"bankType": "506",
|
||||
"bankName": "集友银行有限公司"
|
||||
},
|
||||
{
|
||||
"bankType": "507",
|
||||
"bankName": "创兴银行有限公司"
|
||||
},
|
||||
{
|
||||
"bankType": "781",
|
||||
"bankName": "厦门国际银行"
|
||||
},
|
||||
{
|
||||
"bankType": "787",
|
||||
"bankName": "华一银行"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<a-carousel autoplay arrows :style="{ '--banner-height': height }">
|
||||
<!-- 左右且切换指示器 -->
|
||||
<template #prevArrow>
|
||||
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
|
||||
<left-circle-outlined />
|
||||
</div>
|
||||
</template>
|
||||
<template #nextArrow>
|
||||
<div class="custom-slick-arrow" style="right: 10px">
|
||||
<right-circle-outlined />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 循环渲染 轮播图部分 -->
|
||||
<img v-for="(v, i) in bannerList" :key="i" :src="v.imgUrl" width="100" height="100" alt=""
|
||||
@click="jumpPage(v.linkUrl)">
|
||||
</a-carousel>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue'
|
||||
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const props: any = defineProps({
|
||||
height: { type: String, default: '35vh' },
|
||||
bannerList: { type: Array, default: [] } as any
|
||||
})
|
||||
const jumpPage = (link: String) => {
|
||||
if (!link) return
|
||||
const a: any = document.createElement('a')
|
||||
a.href = link
|
||||
a.target = '_blank'
|
||||
a.click()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* For demo */
|
||||
.ant-carousel :deep(.slick-slide) {
|
||||
text-align: center;
|
||||
height: var(--banner-height);
|
||||
line-height: 160px;
|
||||
// background: #364d79;
|
||||
overflow: hidden;
|
||||
div{
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
color: #111111;
|
||||
// background-color: rgba(31, 45, 61, 0.11);
|
||||
opacity: 0.3;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ant-carousel :deep(.custom-slick-arrow:before) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-carousel :deep(.custom-slick-arrow:hover) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-row :gutter="[24,24]" style="width:100%">
|
||||
<!-- 卡片默认新增框 -->
|
||||
<a-col
|
||||
v-if="addAuthority"
|
||||
:xxl="24/span.xxl"
|
||||
:xl="24/span.xl"
|
||||
:lg="24/span.lg"
|
||||
:md="24/span.md"
|
||||
:sm="24/span.sm"
|
||||
:xs="24/span.xs"
|
||||
@click="$emit('addJeepayCard')"
|
||||
>
|
||||
<div class="jeepay-card-add" :style="{'height': height + 'px'}">
|
||||
<div class="jeepay-card-add-top">
|
||||
<img src="~@/assets/svg/add-icon.svg" alt="add-icon" class="jeepay-card-add-icon">
|
||||
<img src="~@/assets/svg/add-icon-hover.svg" alt="add-icon" class="jeepay-card-add-icon-hover">
|
||||
</div>
|
||||
<div class="jeepay-card-add-text">
|
||||
新建{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<!-- 数据 -->
|
||||
<a-col
|
||||
v-for="(item, key) in vdata.cardList"
|
||||
:key="key"
|
||||
:xxl="24/span.xxl"
|
||||
:xl="24/span.xl"
|
||||
:lg="24/span.lg"
|
||||
:md="24/span.md"
|
||||
:sm="24/span.sm"
|
||||
:xs="24/span.xs"
|
||||
>
|
||||
<slot name="cardContentSlot" :record="item" />
|
||||
<slot name="cardOpSlot" :record="item" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue'
|
||||
|
||||
const props = defineProps ({
|
||||
span: { type: Object, default: () => ({ xxl: 6, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }) },
|
||||
height: { type: Number, default: 200 },
|
||||
name: { type: String, default: '' },
|
||||
addAuthority: { type: Boolean, default: false },
|
||||
reqCardListFunc: { type: Function, default: () => () => ({}) }
|
||||
})
|
||||
|
||||
const vdata = reactive({cardList: [] as any[]})
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
refCardList()
|
||||
})
|
||||
|
||||
defineExpose({refCardList})
|
||||
function refCardList () {
|
||||
props.reqCardListFunc().then(resData => {
|
||||
vdata.cardList = resData
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeepay-card-add {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px dashed rgba(0, 0, 0, 0.15);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.jeepay-card-add-top {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.jeepay-card-add:hover {
|
||||
border-color: rgba(25,83,255,0.3);
|
||||
background: rgba(25,83,255,0.06);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.jeepay-card-add:hover .jeepay-card-add-icon {
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.jeepay-card-add:hover .jeepay-card-add-icon-hover {
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.jeepay-card-add:hover .jeepay-card-add-text {
|
||||
color: rgba(25,83,255,1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.jeepay-card-add-icon {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 1;
|
||||
}
|
||||
.jeepay-card-add-icon-hover {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 0;
|
||||
}
|
||||
.jeepay-card-add-text {
|
||||
padding-top: 5px;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,225 @@
|
||||
<!--
|
||||
Jeepay plus 通用时间选择器， 支持下拉框选择和自定义时间。
|
||||
示例： <JeepayDateRangePicker customDateRangeType="dateTime" v-model="dateVal" />
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2021/12/09 17:17
|
||||
-->
|
||||
<template>
|
||||
<a-select v-if="!vdata.showCustomTimeFlag" v-model:value="vdata.selectValue" placeholder="选择搜索时间" @change="selectChangeFunc">
|
||||
<!-- 通用的时间选择项 -->
|
||||
<template v-if="!statisticalTimeIsShow">
|
||||
<a-select-option v-if="allTimeIsShow" value="">全部时间</a-select-option>
|
||||
<a-select-option value="today">今天</a-select-option>
|
||||
<a-select-option value="yesterday">昨天</a-select-option>
|
||||
<a-select-option value="near2now_7">近7天</a-select-option>
|
||||
<a-select-option value="near2now_30">近30天</a-select-option>
|
||||
</template>
|
||||
|
||||
<!-- 首页交易统计折线图独有的时间选择项 -->
|
||||
<template v-if="statisticalTimeIsShow">
|
||||
<a-select-option value="near2now_7">近7天</a-select-option>
|
||||
<a-select-option value="near2now_30">近30天</a-select-option>
|
||||
<a-select-option value="near2now_90">近90天</a-select-option>
|
||||
</template>
|
||||
|
||||
<!-- 自定义 -->
|
||||
<a-select-option value="custom">自定义时间</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<div v-else>
|
||||
<a-popover placement="bottom">
|
||||
<template #content>
|
||||
<div v-if="getReqCustomDateTimeStr()">
|
||||
搜索时间： {{ getReqCustomDateTimeStr('未选择', ' ~ ') }}
|
||||
</div>
|
||||
</template>
|
||||
<a-range-picker
|
||||
ref="rangePickerRef"
|
||||
v-model:value="vdata.customDateValue"
|
||||
:input-read-only="true"
|
||||
:allow-empty="[true, true]"
|
||||
:show-time="customDateRangeType === 'dateTime' ? {defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')]} : false"
|
||||
@change="customDateChangeFunc"
|
||||
>
|
||||
<!-- 隐藏掉尾部 icon -->
|
||||
<template #suffixIcon />
|
||||
|
||||
<!-- 自定义footer -->
|
||||
<template #renderExtraFooter>
|
||||
<span style="cursor:pointer" @click="returnSelectModel"> <left-circle-outlined /> 返回日期下拉框</span>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { toRaw, ref, reactive, nextTick, defineProps, defineEmits, onMounted, watch } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
// 定义父组件的传值
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' },
|
||||
customDateRangeType: { type: String, default: 'dateTime' }, // date 和 dateTime
|
||||
allTimeIsShow: { type: Boolean, default: true }, // 首页饼图，不显示全部时间
|
||||
// 首页交易统计折线图独有的时间选择项
|
||||
statisticalTimeIsShow: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 响应式数据
|
||||
const vdata : any = reactive({
|
||||
|
||||
// 首次加载组件的默认值 （用作当自定义时间切换到下拉框时， 可以正确回显默认的时间， 如果没有该字段则props被覆写。 ）
|
||||
modelValueDefault: '',
|
||||
|
||||
// a. 时间类型 【下拉框】 选择的值
|
||||
selectValue: '',
|
||||
|
||||
// b. 自定义时间选择空间选择的时间
|
||||
customDateValue: null,
|
||||
|
||||
// 是否显示自定义时间控件
|
||||
showCustomTimeFlag: false,
|
||||
|
||||
// 控制是否默认展开时间选择器： 当设置了 : open = "dateRangePickerIsOpen" 生效， 但是将导致所有的失焦等事件的失效，
|
||||
// 可使openChange解决: https://juejin.cn/post/6844903859987415047
|
||||
dateRangePickerIsOpen: false, // 定义这个， 暂时没有使用了。
|
||||
})
|
||||
|
||||
// 自定义时间的$ref对象 用作聚焦使用。
|
||||
const rangePickerRef = ref()
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
// 包含默认值， 需要自动切换。
|
||||
if (props.value){
|
||||
vdata.selectValue = props.value
|
||||
vdata.modelValueDefault = props.value
|
||||
|
||||
// 包含自定义时间值
|
||||
if(props.value.indexOf('customDateTime_') == 0){
|
||||
vdata.showCustomTimeFlag = true // 切换页面
|
||||
let strArr : any = props.value.split('_')
|
||||
vdata.customDateValue = [dayjs(strArr[1]), dayjs(strArr[2])]
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
// 重置按钮，不能直接重置时间选择，需要通过watch监听，进行重置
|
||||
watch( () => props.value ,(newVal,oldVal)=>{
|
||||
if (!props.value) {
|
||||
vdata.selectValue = ''
|
||||
}
|
||||
})
|
||||
|
||||
// 切换下拉框的事件
|
||||
function selectChangeFunc(val){
|
||||
|
||||
if(val === 'custom'){ // 选择了自定义时间
|
||||
|
||||
vdata.customDateValue = null // 重置日期组件的值
|
||||
changeModelValue('') // 重置父组件的值
|
||||
vdata.showCustomTimeFlag = true // 切换页面
|
||||
|
||||
// 如果默认打开时间弹层， 会出现一个问题：
|
||||
// 选择了【自定义】， 选择开始时间 --》 现在结束时间。 光标又回到了开始时间。 正常应该是关闭弹层了。
|
||||
// 如果默认不打开， 用户自己点击进入， 那么是没有问题的。
|
||||
// v-model:open="vdata.dateRangePickerIsOpen" ，打开注释， 需要添加这一行。
|
||||
// nextTick(() => {
|
||||
// vdata.dateRangePickerIsOpen = true //默认展开
|
||||
// })
|
||||
}else{
|
||||
|
||||
vdata.showCustomTimeFlag = false // 不显示自定义
|
||||
changeModelValue(val)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 获取到自定义时间的字符串 （noSelectText 未选择时的占位符， 请求是： N, 显示是未选择 ）
|
||||
function getReqCustomDateTimeStr(noSelectText = 'N', splitStr = '_'){
|
||||
|
||||
let timeArray = toRaw(vdata.customDateValue) as any
|
||||
|
||||
// 未选择日期
|
||||
if(!timeArray || timeArray.length <= 0){
|
||||
changeModelValue('')
|
||||
return false
|
||||
}
|
||||
|
||||
let start = noSelectText
|
||||
let end = noSelectText
|
||||
|
||||
if(timeArray.length >= 1 && timeArray[0]){
|
||||
start = timeArray[0].format(props.customDateRangeType == 'dateTime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD 00:00:00')
|
||||
}
|
||||
|
||||
if(timeArray.length >= 2 && timeArray[1]){
|
||||
end = timeArray[1].format(props.customDateRangeType == 'dateTime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD 23:59:59')
|
||||
}
|
||||
|
||||
return ( start + splitStr + end )
|
||||
}
|
||||
|
||||
// 自定义时间控件， 切换时间的监听事件
|
||||
function customDateChangeFunc(){
|
||||
|
||||
let reqDateStr = getReqCustomDateTimeStr()
|
||||
|
||||
if(reqDateStr){
|
||||
// 全部使用： customDateTime类型
|
||||
changeModelValue('customDateTime_' + reqDateStr)
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// 更新父组件的值
|
||||
function changeModelValue(val){
|
||||
emit('update:value', val)
|
||||
}
|
||||
|
||||
// 返回下拉框模式 （返回页面， 清空值）
|
||||
function returnSelectModel(){
|
||||
|
||||
vdata.customDateValue = null //日期清空
|
||||
|
||||
// 如果上一次（默认）是自定义时间， 那么直接返回到【全部时间】 下拉框选项。
|
||||
if(vdata.modelValueDefault && vdata.modelValueDefault.indexOf('customDateTime_') == 0){
|
||||
vdata.selectValue = ''
|
||||
}else{
|
||||
vdata.selectValue = vdata.modelValueDefault // 选择第一次的默认选择项。
|
||||
}
|
||||
|
||||
changeModelValue(vdata.selectValue) //重置 父组件的值
|
||||
vdata.showCustomTimeFlag = false // 切换显示页面
|
||||
}
|
||||
|
||||
|
||||
defineExpose({returnSelectModel})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// .ant-picker .ant-picker-input {
|
||||
// border: none !important;
|
||||
// border: 1px solid #c3c3c3 !important;
|
||||
// padding: 4px 11px 4px !important;
|
||||
// width: 160px !important;
|
||||
// background: #ff0000;
|
||||
// width:160px !important;
|
||||
// }
|
||||
// .pay-statistics > div >.ant-picker-input > input{
|
||||
// border: 1px solid #c3c3c3 !important;
|
||||
// padding: 4px 11px 4px !important;
|
||||
// width: 160px !important;
|
||||
// background: #ff0000;
|
||||
// }
|
||||
// .pay-statistics > div > .date{
|
||||
// left: 50%;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="70%" title="关联设备" @ok="() => vdata.visible = false">
|
||||
<div class="modal-div">
|
||||
<!-- 受支持的设备列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
rowKey="deviceId"
|
||||
:scrollX="400"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'provider'">
|
||||
<a-tag :key="record.provider" color="processing">
|
||||
{{ (speakerList.find(item => item.value == record.provider) as any).text || '其他' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'storeId'">
|
||||
<a-tooltip class="my-tooltip">
|
||||
<template #title>
|
||||
门店编号：{{record.storeId}}
|
||||
</template>
|
||||
{{record.storeName}}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'op'">
|
||||
<!-- 操作列插槽 -->
|
||||
<JeepayTableColumns>
|
||||
<a-button type="link" @click="editFunc(record.deviceNo)">设备管理</a-button>
|
||||
</JeepayTableColumns>
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { $bindDeviceList } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick } from 'vue'
|
||||
import provider from './provider.json'
|
||||
const speakerList = provider.speaker
|
||||
import router from '@/router'
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
sysType: { type: String, default: 'PLATFORM' }, // 系统类型： PLATFORM
|
||||
})
|
||||
|
||||
const tableColumns = [
|
||||
{ key: 'provider', title: '设备厂商', },
|
||||
{ key: 'deviceNo', title: '设备号', dataIndex: 'deviceNo' },
|
||||
// { key: 'deviceId', title: '设备ID', dataIndex: 'deviceId' },
|
||||
// { title: '批次号', dataIndex: 'batchId' },
|
||||
{ title: '设备名称', dataIndex: 'deviceName' },
|
||||
{ key: 'storeId', title: '门店名称', dataIndex: 'storeId', },
|
||||
{ key: 'op', title: '操作', width: 260, fixed: 'right', align: 'center' }
|
||||
]
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
recordId: null
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
return $bindDeviceList(vdata.recordId, params)
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 绑定管理
|
||||
function editFunc(recordId) {
|
||||
if (props.sysType == 'MCH') {
|
||||
router.push({
|
||||
path: '/speaker',
|
||||
query: { deviceName: recordId }
|
||||
})
|
||||
} else {
|
||||
router.push({
|
||||
path: '/speaker/device',
|
||||
query: { deviceId: recordId }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (recordId) {
|
||||
vdata.selectedRowKeys = { agent: [] } //清空已选择的数据
|
||||
vdata.recordId = recordId // 默认划拨
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
{"all":[{"text":"智谷联","value":"zgwl"},{"text":"品生","value":"ps"},{"text":"博实结","value":"bsj"},{"text":"飞鹅","value":"fe"},{"text":"财来聚","value":"clj"},{"text":"微收银","value":"wsy"},{"text":"小精灵","value":"xjl"},{"text":"智网","value":"zw"},{"text":"零零智能","value":"llzn"}],"speaker":[{"text":"智谷联","value":"zgwl"},{"text":"品生","value":"ps"},{"text":"博实结","value":"bsj"},{"text":"智网","value":"zw"},{"text":"拉卡拉","value":"lkls"}],"printer":[{"text":"智谷联","value":"zgwl"},{"text":"飞鹅","value":"fe"},{"text":"博实结","value":"bsj"},{"text":"智网","value":"zw"}],"pos":[{"text":"智谷联","value":"zgwl"},{"text":"品生","value":"ps"},{"text":"博实结","value":"bsj"},{"text":"零零智能","value":"llzn"}],"plugin":[{"text":"财来聚","value":"clj"},{"text":"微收银","value":"wsy"},{"text":"小精灵","value":"xjl"}]}
|
||||
@@ -0,0 +1,61 @@
|
||||
<!--
|
||||
由于每个页面无法动态读取UIC组件， 需要将动态引入封装到组件中
|
||||
商户 / 运营平台 引入
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
|
||||
<template>
|
||||
<!-- 引入具体的接口组件 -->
|
||||
<component :is="vdata.currentComponent" ref="ifCodeComponentRef" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
import Commons from './commons/Commons.vue'
|
||||
import { reactive, ref, nextTick } from 'vue'
|
||||
import { getOriginIfCode } from '../util/jeepayComponentUtil.js'
|
||||
|
||||
const ifCodeComponentRef = ref()
|
||||
|
||||
const vdata : any = reactive({
|
||||
currentComponent: null
|
||||
})
|
||||
|
||||
|
||||
// 选择支付接口 切换事件
|
||||
function ifCodeChangeFunc(selectIfCode){
|
||||
|
||||
if(!selectIfCode){ //清空
|
||||
vdata.currentComponent = null
|
||||
return
|
||||
}
|
||||
|
||||
// selectIfCode格式： ifCode或ifCode_1等等，保存数据使用传入的ifCode或ifCode_1，页面渲染使用ifCode(需截取ifCode_1)
|
||||
const ifCodeView = getOriginIfCode(selectIfCode)
|
||||
|
||||
// 根据支付接口名称 动态引入组件
|
||||
import(`./diy/${ifCodeView}/DivisionChannelAccount.vue`).then((module) => {
|
||||
|
||||
vdata.currentComponent = null
|
||||
nextTick(() => vdata.currentComponent = module.default)
|
||||
|
||||
}).catch((e) => {
|
||||
|
||||
vdata.currentComponent = null
|
||||
nextTick(() => vdata.currentComponent = Commons)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function getReqDataList(){
|
||||
return ifCodeComponentRef.value.getReqDataList()
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
return ifCodeComponentRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
defineExpose({ifCodeChangeFunc, getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,164 @@
|
||||
<!--
|
||||
新建分账用户（通用组件 微信支付宝这种）
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/09 14:20
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-button type="primary" style="margin-bottom: 10px;" @click="addReceiverRow"> <plus-outlined />添加接收账号</a-button>
|
||||
<!-- 表格 -->
|
||||
<a-table :columns="accTableColumns" :data-source="vdata.receiverTableData" :pagination="false" rowKey="rowKey" style="margin:0">
|
||||
<template #bodyCell="{column, record}">
|
||||
<!-- 账号类型 -->
|
||||
<template v-if="column.key == 'reqBindState'">
|
||||
<div v-show="record.reqBindState == 0" style="color: salmon ">
|
||||
<info-circle-outlined />待绑定
|
||||
</div>
|
||||
<div v-show="record.reqBindState == 1" style="color: green; ">
|
||||
<check-circle-outlined /> 绑定成功
|
||||
</div>
|
||||
<div v-show="record.reqBindState == 2" style="color: red; ">
|
||||
<close-circle-outlined /> 绑定异常
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 账号别名 -->
|
||||
<template v-if="column.key == 'receiverAlias'">
|
||||
<a-input v-model:value="record.receiverAlias" style="width: 150px" placeholder="(选填)默认为账号" />
|
||||
</template>
|
||||
|
||||
<!-- 账号类型 -->
|
||||
<template v-if="column.key == 'accType'">
|
||||
<a-select v-model:value="record.accType" style="width: 110px" placeholder="账号类型" default-value="0">
|
||||
<a-select-option :value="0">个人</a-select-option>
|
||||
<a-select-option :value="1">商户类型</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<!-- 接收方账号 -->
|
||||
<template v-if="column.key == 'accNo'">
|
||||
<a-input v-model:value="record.accNo" style="width: 150px;margin-right: 7px" />
|
||||
<!-- 只有微信， 支付宝官方可扫码获取 -->
|
||||
<template v-if="selectedMchAndIfcodeInfo.ifCode == 'wxpay' || selectedMchAndIfcodeInfo.ifCode == 'alipay' || selectedMchAndIfcodeInfo.ifCode == 'sftpay'">
|
||||
<qrcode-outlined v-if="record.accType == 0" @click="showChannelUserModal(record)" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 接收方姓名 -->
|
||||
<template v-if="column.key == 'accName'">
|
||||
<a-input v-model:value="record.accName" style="min-width: 100px;" />
|
||||
</template>
|
||||
|
||||
<!-- 分账关系 -->
|
||||
<template v-if="column.key == 'relationType'">
|
||||
<RelationType v-model:relationType="record.relationType" v-model:relationTypeName="record.relationTypeName" />
|
||||
</template>
|
||||
|
||||
<!-- 关系名称 -->
|
||||
<template v-if="column.key == 'relationTypeName'">
|
||||
<a-input v-model:value="record.relationTypeName" :disabled="record.relationType !== 'CUSTOM'" style="min-width:100px;" />
|
||||
</template>
|
||||
|
||||
<!-- 默认分账比例 -->
|
||||
<template v-if="column.key == 'divisionProfit'">
|
||||
<a-input-number
|
||||
v-model:value="record.divisionProfit"
|
||||
style="width: 120px"
|
||||
:precision="2"
|
||||
:min="0.01"
|
||||
:max="100"
|
||||
>
|
||||
<template #addonAfter>%</template>
|
||||
</a-input-number>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key == 'op'"><a-button type="link" @click="delRow(record)">删除</a-button></template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 获取渠道用户信息组件 -->
|
||||
<ChannelUserModal ref="channelUserModal" @changeChannelUserId="changeChannelUserIdFunc($event)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import RelationType from '../relationType/RelationType.vue'
|
||||
import { genRowKey } from '@/utils/util'
|
||||
import { reactive, ref,getCurrentInstance, inject } from 'vue'
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
|
||||
// 参数注入： 当前选择的数据对象信息（包含 ifCode, mchNo, appId 等参数 ）
|
||||
let selectedMchAndIfcodeInfoRef : any = inject('selectedMchAndIfcodeInfo')
|
||||
let selectedMchAndIfcodeInfo : any = selectedMchAndIfcodeInfoRef.value
|
||||
|
||||
|
||||
const channelUserModal = ref()
|
||||
|
||||
const accTableColumns = [
|
||||
{ key: 'reqBindState', title: '状态',width:100 },
|
||||
{ key: 'receiverAlias', title: '账号别名' },
|
||||
{ key: 'accType', title: '账号类型' },
|
||||
{ key: 'accNo', title: '接收方账号',width:220 },
|
||||
{ key: 'accName', title: '接收方姓名',width:120 },
|
||||
{ key: 'relationType', title: '分账关系'},
|
||||
{ key: 'relationTypeName', title: '关系名称' },
|
||||
{ key: 'divisionProfit', title: '默认分账比例',width:100},
|
||||
{ key: 'op', title: '操作',align:'center' }
|
||||
]
|
||||
|
||||
const vdata : any = reactive({
|
||||
accTableColumns: accTableColumns, // 表头模板（微信支付宝公用）
|
||||
receiverTableData: [], // 分账用户列表集合
|
||||
})
|
||||
|
||||
|
||||
// 添加一行账号信息
|
||||
function addReceiverRow () {
|
||||
vdata.receiverTableData.push(
|
||||
{
|
||||
rowKey: genRowKey(),
|
||||
reqBindState: 0, // 默认待绑定
|
||||
accType: 0,
|
||||
relationType: 'PARTNER', // 默认合作伙伴, 需要同时更改select的defaultValue
|
||||
relationTypeName: '合作伙伴',
|
||||
})
|
||||
}
|
||||
|
||||
// 删除某一行
|
||||
function delRow (item) {
|
||||
const index = vdata.receiverTableData.indexOf(item)
|
||||
if (index > -1) {
|
||||
vdata.receiverTableData.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示获取用户ID的弹层
|
||||
function showChannelUserModal ( record) {
|
||||
channelUserModal.value.showModal(
|
||||
selectedMchAndIfcodeInfo.appId,
|
||||
selectedMchAndIfcodeInfo.ifCode,
|
||||
record
|
||||
)
|
||||
}
|
||||
|
||||
// 接收到当前渠道用户ID信息
|
||||
function changeChannelUserIdFunc ({ channelUserId, extObject }) {
|
||||
extObject.accNo = channelUserId
|
||||
}
|
||||
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
function getReqDataList(){
|
||||
return Promise.resolve(vdata.receiverTableData)
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
vdata.receiverTableData[index].reqBindState = state
|
||||
}
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!--
|
||||
斗拱的分账渠道账号
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 引入公共样式和数据表单 -->
|
||||
<DiyDivisionFormPage ref="diyDivisionFormPageRef" />
|
||||
|
||||
<a-row>
|
||||
<a-col offset="2" span="10">
|
||||
<a-alert type="info">
|
||||
<template #message>
|
||||
<a-button v-if="vdata.showMode == 'detail'" type="link" @click="vdata.showMode = 'subMchId'">已有子商户号？ 切换到快速模式</a-button>
|
||||
<a-button v-else type="link" @click="vdata.showMode = 'detail'">切换到详细信息模式</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="vdata.showMode == 'subMchId'">
|
||||
<a-divider orientation="left" style="color: #1A66FF;">账户信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionAccountFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="subMchRules"
|
||||
>
|
||||
<a-form-item label="持卡人姓名" name="accName">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="账号类型" name="accType">
|
||||
<a-select v-model:value="vdata.currentReceiver.accType" style="width: 110px" placeholder="账号类型">
|
||||
<a-select-option :value="0">个人</a-select-option>
|
||||
<a-select-option :value="1">商户类型</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="子商户号（subMchId）" name="accNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accNo" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="取现卡序列号" name="tokenNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.tokenNo" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<DgpayApplyment v-if="vdata.showMode == 'detail'" ref="dgpayApplymentRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import DgpayApplyment from 'UIC/JeepayMchApplyment/diy/dgpay/Applyment.vue'
|
||||
import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
|
||||
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
const diyDivisionFormPageRef = ref()
|
||||
const divisionAccountFormRef = ref()
|
||||
const dgpayApplymentRef = ref()
|
||||
|
||||
let emptyObject = {}
|
||||
|
||||
const subMchRules = {
|
||||
accNo: [ ruleGenerator.requiredInput('子商户号') ],
|
||||
tokenNo: [ ruleGenerator.requiredInput('取现卡序列号') ],
|
||||
accName: [ ruleGenerator.requiredInput('持卡人姓名') ],
|
||||
accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
applymentDetailInfo: {}, //盛付通的进件资料对象
|
||||
|
||||
showMode: 'detail', //detail: 详细信息， subMchId: 简介模式
|
||||
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
accType: 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 向子组件注入： 兼容数据
|
||||
provide('mchApplymentData', computed( ()=> emptyObject) )
|
||||
|
||||
// 向子组件注入： 进件参数具体数据
|
||||
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )
|
||||
|
||||
provide('isView', false)
|
||||
provide('configMode', 'divsionMode')
|
||||
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
async function getReqDataList(){
|
||||
|
||||
// 验证主表单 and 复制信息到主提交记录中
|
||||
await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
|
||||
Object.assign(vdata.currentReceiver, formData)
|
||||
})
|
||||
|
||||
// 验证
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
await divisionAccountFormRef.value.validate()
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
await dgpayApplymentRef.value.saveDataPreCallback(false)
|
||||
}
|
||||
|
||||
// 组装数据
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
|
||||
vdata.currentReceiver.channelExtInfo = { tokenNo: vdata.currentReceiver.tokenNo, isHasAccount: true }
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
// 个人类型
|
||||
if(vdata.applymentDetailInfo.merchantType == 1){
|
||||
vdata.currentReceiver.accType = 0
|
||||
}else{
|
||||
vdata.currentReceiver.accType = 1 //商户类型
|
||||
}
|
||||
|
||||
vdata.currentReceiver.accNo = vdata.applymentDetailInfo.settAccountNo
|
||||
vdata.currentReceiver.accName = vdata.applymentDetailInfo.settAccountName
|
||||
vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
|
||||
}
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
resolve([vdata.currentReceiver])
|
||||
})
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
diyDivisionFormPageRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!--
|
||||
易票联的分账渠道账号
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 引入公共样式和数据表单 -->
|
||||
<DiyDivisionFormPage ref="diyDivisionFormPageRef" />
|
||||
|
||||
<a-row>
|
||||
<a-col offset="2" span="10">
|
||||
<a-alert type="info">
|
||||
<template #message>
|
||||
<a-button v-if="vdata.showMode == 'detail'" type="link" @click="vdata.showMode = 'subMchId'">已有子商户号？ 切换到快速模式</a-button>
|
||||
<a-button v-else type="link" @click="vdata.showMode = 'detail'">切换到详细信息模式</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="vdata.showMode == 'subMchId'">
|
||||
<a-divider orientation="left" style="color: #1A66FF;">易票联账户信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionAccountFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="subMchRules"
|
||||
>
|
||||
<a-form-item label="持卡人姓名" name="accName">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="账号类型" name="accType">
|
||||
<a-select v-model:value="vdata.currentReceiver.accType" style="width: 110px" placeholder="账号类型">
|
||||
<a-select-option :value="0">个人</a-select-option>
|
||||
<a-select-option :value="1">商户类型</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item label="子商户号（subMchId）" name="accNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accNo" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<EpspayApplyment v-if="vdata.showMode == 'detail'" ref="epspayApplymentRef" applyType="0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import EpspayApplyment from 'UIC/JeepayMchApplyment/diy/epspay/Applyment.vue'
|
||||
import { reactive, ref, provide, computed } from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
|
||||
|
||||
const diyDivisionFormPageRef = ref()
|
||||
const divisionAccountFormRef = ref()
|
||||
const epspayApplymentRef = ref()
|
||||
|
||||
let emptyObject = {}
|
||||
|
||||
const subMchRules = {
|
||||
accNo: [ ruleGenerator.requiredInput('持卡人姓名') ],
|
||||
accName: [ ruleGenerator.requiredInput('子商户号') ],
|
||||
accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
applymentDetailInfo: {}, // 易票联的进件资料对象
|
||||
|
||||
showMode: 'detail', // detail: 详细信息， subMchId: 简介模式
|
||||
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
accType: 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 向子组件注入： 兼容数据
|
||||
provide('mchApplymentData', computed( ()=> emptyObject) )
|
||||
|
||||
// 向子组件注入： 进件参数具体数据
|
||||
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )
|
||||
|
||||
provide('isView', false)
|
||||
provide('configMode', 'divsionMode')
|
||||
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
async function getReqDataList(){
|
||||
|
||||
// 验证主表单 and 复制信息到主提交记录中
|
||||
await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
|
||||
Object.assign(vdata.currentReceiver, formData)
|
||||
})
|
||||
|
||||
// 验证
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
await divisionAccountFormRef.value.validate()
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
await epspayApplymentRef.value.saveDataPreCallback(false)
|
||||
}
|
||||
|
||||
// 组装数据
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
|
||||
vdata.currentReceiver.channelExtInfo = '{}' //空数据
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
// 个人类型
|
||||
if(vdata.applymentDetailInfo.merchantType == 1){
|
||||
vdata.currentReceiver.accType = 0
|
||||
}else{
|
||||
vdata.currentReceiver.accType = 1 //商户类型
|
||||
}
|
||||
|
||||
vdata.currentReceiver.accNo = vdata.applymentDetailInfo.settAccountNo
|
||||
vdata.currentReceiver.accName = vdata.applymentDetailInfo.settAccountName
|
||||
vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
|
||||
}
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
resolve([vdata.currentReceiver])
|
||||
})
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
diyDivisionFormPageRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,376 @@
|
||||
<!--
|
||||
富友创建分账渠道账号
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 引入公共样式和数据表单 -->
|
||||
<DiyDivisionFormPage ref="diyDivisionFormPageRef" />
|
||||
|
||||
<a-row>
|
||||
<a-col offset="2" span="10">
|
||||
<a-alert type="info">
|
||||
<template #message>
|
||||
<a-button v-if="vdata.showMode == 'applyInfo'" type="link" @click="vdata.showMode = 'accountInfo'">已有分账账户？ 切换到快速模式</a-button>
|
||||
<a-button v-else type="link" @click="vdata.showMode = 'applyInfo'">切换到详细信息模式</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="vdata.showMode == 'accountInfo'">
|
||||
<a-divider orientation="left" style="color: #1A66FF;">富友分账账户信息</a-divider>
|
||||
<a-form
|
||||
ref="accountInfoRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="accountInfoRules"
|
||||
>
|
||||
<a-form-item label="持卡人姓名" name="accName">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="账号类型" name="accType">
|
||||
<a-select v-model:value="vdata.currentReceiver.accType" style="width: 200px" placeholder="账号类型">
|
||||
<a-select-option :value="0">个人银行卡</a-select-option>
|
||||
<a-select-option :value="1">对公银行账户</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="入账方编号" name="accountIn">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accountIn" />
|
||||
</a-form-item>
|
||||
<a-form-item label="合同编号" name="contractSsn">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.contractSsn" />
|
||||
</a-form-item>
|
||||
<a-form-item label="合同规则编号" name="ruleNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.ruleNo" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div v-if="vdata.showMode == 'applyInfo'">
|
||||
<a-divider orientation="left" style="color: #1A66FF;">主体信息</a-divider>
|
||||
|
||||
<a-form
|
||||
ref="divisionAccountFormRef1"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.applymentDetailInfo"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="rules1"
|
||||
>
|
||||
<a-form-item label="主体类型" name="isIndividualMchnt">
|
||||
<a-radio-group v-model:value="vdata.applymentDetailInfo.isIndividualMchnt">
|
||||
<a-radio value="8">个体</a-radio>
|
||||
<a-radio value="0">企业</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="主体名称" name="insNameCn">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.insNameCn" placeholder="请输入主体名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="账户类型" name="settleTp">
|
||||
<a-radio-group v-model:value="vdata.applymentDetailInfo.settleTp">
|
||||
<a-radio value="02">个人银行卡</a-radio>
|
||||
<a-radio v-if="vdata.applymentDetailInfo.isIndividualMchnt == '0'" value="01">对公银行账户</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="到账周期类型" name="revenueTp">
|
||||
<a-radio-group v-model:value="vdata.applymentDetailInfo.revenueTp">
|
||||
<a-radio value="01">T+1</a-radio>
|
||||
<!-- <a-radio value="02">D+1</a-radio>
|
||||
<a-radio value="03">留存虚拟户</a-radio> -->
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="开户行行号" name="interBankNo">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.interBankNo" placeholder="请输入开户行行号" />
|
||||
<span><a href="https://www.icvio.cn/" target="_blank">开户行行号查询</a></span>
|
||||
</a-form-item>
|
||||
<a-form-item label="开户名称" name="outAcntNm">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.outAcntNm" placeholder="请输入开户名称" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.settleTp == '02'" label="身份证号" name="outAcntIdNo">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.outAcntIdNo" placeholder="请输入身份证号" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.settleTp == '02'" label="银行卡正面照片" name="yhkzmPic">
|
||||
<JeepayUpload v-model:src="vdata.applymentDetailInfo.yhkzmPic" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanBySettAccountBankCardFunc" />
|
||||
<span class="jeepay-tip-text">(上传图片自动银行卡号)</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="银行卡号" name="outAcntNo">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.outAcntNo" placeholder="请输入银行卡号" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.settleTp == '01'" label="开户许可证照片" name="khxkjPic">
|
||||
<JeepayUpload v-model:src="vdata.applymentDetailInfo.khxkjPic" bizType="applyment" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-divider v-if="vdata.applymentDetailInfo.isIndividualMchnt == '8' || vdata.applymentDetailInfo.isIndividualMchnt == '0'" orientation="left" style="color: #1A66FF;">其他信息</a-divider>
|
||||
|
||||
<a-form
|
||||
ref="divisionAccountFormRef2"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.applymentDetailInfo"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="rules2"
|
||||
>
|
||||
<div v-if="vdata.applymentDetailInfo.isIndividualMchnt == '0'">
|
||||
<a-form-item label="证件类型" name="flagTp">
|
||||
<a-select v-model:value="vdata.applymentDetailInfo.flagTp" placeholder="请选择证件类型">
|
||||
<a-select-option value="0">营业执照</a-select-option>
|
||||
<a-select-option value="1">营业执照三证合一</a-select-option>
|
||||
<a-select-option value="2">医疗从业许可证</a-select-option>
|
||||
<a-select-option value="3">民办非企业单位凭证登记证书</a-select-option>
|
||||
<a-select-option value="9">其他</a-select-option>
|
||||
</a-select>
|
||||
<span class="jeepay-tip-text">执照编号非18位社会统一信用代码，请选择营业执照</span>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.flagTp == '9'" label="证件名称" name="certifiNm">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.certifiNm" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.flagTp == '3'" label="开办资金" name="startUpCapital">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.startUpCapital" />
|
||||
</a-form-item>
|
||||
<a-form-item label="证件照片" name="licPic1">
|
||||
<JeepayUpload v-model:src="vdata.applymentDetailInfo.licPic1" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
|
||||
<span class="jeepay-tip-text">(上传营业执照 自动识别营业执照编号)</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="证件代码" name="licNo">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.licNo" />
|
||||
</a-form-item>
|
||||
<a-form-item label="有效期" name="licTov">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.licTov" />
|
||||
</a-form-item>
|
||||
<a-form-item label="品牌名称" name="platNameCn">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.platNameCn" />
|
||||
</a-form-item>
|
||||
<a-form-item label="电子邮件" name="email">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.email" />
|
||||
</a-form-item>
|
||||
<a-form-item label="联系人" name="contactPerson">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.contactPerson" />
|
||||
</a-form-item>
|
||||
<a-form-item label="联系手机" name="contactMobile">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.contactMobile" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.flagTp == '0'" label="组织机构代码证编号" name="zzjgdmzNo">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.zzjgdmzNo" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.flagTp == '0'" label="组织机构代码证有效期" name="zzjgdmzExpireDt">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.zzjgdmzExpireDt" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="vdata.applymentDetailInfo.flagTp == '0'" label="组织机构代码证照片" name="zzjgdmzPic1">
|
||||
<JeepayUpload v-model:src="vdata.applymentDetailInfo.zzjgdmzPic1" bizType="applyment" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<div v-else-if="vdata.applymentDetailInfo.isIndividualMchnt == '8'">
|
||||
<a-form-item label="身份证人像面照片" name="certifIdPic1">
|
||||
<JeepayUpload v-model:src="vdata.applymentDetailInfo.certifIdPic1" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
|
||||
<span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="身份证国徽面照片" name="certifIdPic2">
|
||||
<JeepayUpload v-model:src="vdata.applymentDetailInfo.certifIdPic2" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
|
||||
<span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="法人姓名" name="artifNm">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.artifNm" />
|
||||
</a-form-item>
|
||||
<a-form-item label="身份证号" name="certifId">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.certifId" />
|
||||
</a-form-item>
|
||||
<a-form-item label="身份证有效期截止日期" name="validDt">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.validDt" />
|
||||
</a-form-item>
|
||||
<a-form-item label="联系手机" name="contactPhone">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.contactPhone" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
<a-divider orientation="left" style="color: #1A66FF;">合同信息</a-divider>
|
||||
|
||||
<a-form
|
||||
ref="divisionAccountFormRef3"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.applymentDetailInfo"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="rules3"
|
||||
>
|
||||
<a-form-item label="合同名称" name="contractName">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.contractName" placeholder="请输入合同名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="合同照片" name="contractUrl">
|
||||
<JeepayUpload v-model:src="vdata.applymentDetailInfo.contractUrl" bizType="applyment" />
|
||||
</a-form-item>
|
||||
<a-form-item label="合同开始日期" name="startDate">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.startDate" />
|
||||
</a-form-item>
|
||||
<a-form-item label="合同结束日期" name="endDate">
|
||||
<a-input v-model:value.trim="vdata.applymentDetailInfo.endDate" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
|
||||
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
|
||||
const diyDivisionFormPageRef = ref()
|
||||
const accountInfoRef = ref()
|
||||
const divisionAccountFormRef1 = ref()
|
||||
const divisionAccountFormRef2 = ref()
|
||||
const divisionAccountFormRef3 = ref()
|
||||
|
||||
const accountInfoRules = {
|
||||
accName: [ ruleGenerator.requiredInput('持卡人姓名') ],
|
||||
accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
|
||||
accountIn: [ ruleGenerator.requiredInput('入账方编号') ],
|
||||
contractSsn: [ ruleGenerator.requiredInput('合同编号') ],
|
||||
ruleNo: [ ruleGenerator.requiredInput('合同规则编号') ],
|
||||
}
|
||||
|
||||
const rules1 = {
|
||||
isIndividualMchnt: [ ruleGenerator.requiredSelect('主体类型') ],
|
||||
insNameCn: [ ruleGenerator.requiredInput('主体名称') ],
|
||||
settleTp: [ ruleGenerator.requiredSelect('账户类型') ],
|
||||
revenueTp: [ ruleGenerator.requiredSelect('到账周期类型') ],
|
||||
interBankNo: [ ruleGenerator.requiredInput('开户行行号') ],
|
||||
outAcntNm: [ ruleGenerator.requiredInput('开户名称') ],
|
||||
outAcntIdNo: [ ruleGenerator.requiredInput('身份证号') ],
|
||||
outAcntNo: [ ruleGenerator.requiredInput('银行卡号') ],
|
||||
yhkzmPic: [ ruleGenerator.requiredUpload('银行卡正面照片') ],
|
||||
khxkjPic: [ ruleGenerator.requiredUpload('开户许可证照片') ],
|
||||
}
|
||||
|
||||
const rules2 = {
|
||||
flagTp: [ ruleGenerator.requiredSelect('证件类型') ],
|
||||
certifiNm: [ ruleGenerator.requiredInput('证件名称') ],
|
||||
startUpCapital: [ ruleGenerator.requiredInput('开办资金') ],
|
||||
licNo: [ ruleGenerator.requiredInput('证件代码') ],
|
||||
licTov: [ ruleGenerator.requiredInput('有效期') ],
|
||||
licPic1: [ ruleGenerator.requiredUpload('证件照片') ],
|
||||
platNameCn: [ ruleGenerator.requiredInput('品牌名称') ],
|
||||
email: [ ruleGenerator.requiredInput('电子邮件') ],
|
||||
contactPerson: [ ruleGenerator.requiredInput('联系人') ],
|
||||
contactMobile: [ ruleGenerator.requiredInput('联系手机') ],
|
||||
zzjgdmzNo: [ ruleGenerator.requiredInput('组织机构代码证编号') ],
|
||||
zzjgdmzExpireDt: [ ruleGenerator.requiredInput('组织机构代码证有效期') ],
|
||||
zzjgdmzPic1: [ ruleGenerator.requiredUpload('组织机构代码证照片') ],
|
||||
|
||||
artifNm: [ ruleGenerator.requiredInput('法人姓名') ],
|
||||
certifId: [ ruleGenerator.requiredInput('身份证号') ],
|
||||
validDt: [ ruleGenerator.requiredInput('身份证有效期截止日期') ],
|
||||
contactPhone: [ ruleGenerator.requiredInput('联系手机') ],
|
||||
certifIdPic1: [ ruleGenerator.requiredUpload('身份证人像面照片') ],
|
||||
certifIdPic2: [ ruleGenerator.requiredUpload('身份证国徽面照片') ],
|
||||
}
|
||||
|
||||
const rules3 = {
|
||||
contractName: [ ruleGenerator.requiredInput('合同名称') ],
|
||||
contractUrl: [ ruleGenerator.requiredUpload('合同照片') ],
|
||||
startDate: [ ruleGenerator.requiredInput('合同开始日期') ],
|
||||
endDate: [ ruleGenerator.requiredInput('合同结束日期') ],
|
||||
}
|
||||
|
||||
|
||||
const vdata : any = reactive({
|
||||
applymentDetailInfo: { revenueTp: '01' }, //富友的资料对象
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
reqBindState: 0, // 默认待绑定
|
||||
accType: 0,
|
||||
relationType: 'PARTNER', // 默认合作伙伴, 需要同时更改select的defaultValue
|
||||
relationTypeName: '合作伙伴',
|
||||
},
|
||||
showMode: 'applyInfo', //applyInfo: 详细信息， accountInfo: 简介模式
|
||||
})
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
async function getReqDataList(){
|
||||
|
||||
// 验证主表单 and 复制信息到主提交记录中
|
||||
await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
|
||||
Object.assign(vdata.currentReceiver, formData)
|
||||
})
|
||||
|
||||
// 验证
|
||||
if(vdata.showMode == 'accountInfo'){
|
||||
await accountInfoRef.value.validate()
|
||||
|
||||
vdata.currentReceiver.channelExtInfo = '{}' //空数据
|
||||
|
||||
const { accountIn, contractSsn, ruleNo } = vdata.currentReceiver
|
||||
vdata.currentReceiver.accNo = JSON.stringify({ accountIn, contractSsn, ruleNo })
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
await divisionAccountFormRef1.value.validate()
|
||||
await divisionAccountFormRef2.value.validate()
|
||||
await divisionAccountFormRef3.value.validate()
|
||||
|
||||
vdata.currentReceiver.accType = vdata.applymentDetailInfo.settleTp == '02' ? 0 : 1
|
||||
vdata.currentReceiver.accNo = vdata.applymentDetailInfo.outAcntNo
|
||||
vdata.currentReceiver.accName = vdata.applymentDetailInfo.outAcntNm
|
||||
vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
|
||||
}
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
resolve([vdata.currentReceiver])
|
||||
})
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
diyDivisionFormPageRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
// 识别银行卡信息
|
||||
function ocrScanBySettAccountBankCardFunc(orcObject){
|
||||
if(orcObject){
|
||||
if(orcObject.settAccountNo){
|
||||
vdata.applymentDetailInfo.outAcntNo = orcObject.settAccountNo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图片识别的回调函数
|
||||
function ocrScanBySettAccountFunc(orcObject){
|
||||
|
||||
if(orcObject){
|
||||
if(orcObject.idcardName){
|
||||
vdata.applymentDetailInfo.artifNm = orcObject.idcardName
|
||||
}
|
||||
if(orcObject.idcardNo){
|
||||
vdata.applymentDetailInfo.certifId = orcObject.idcardNo
|
||||
}
|
||||
|
||||
if(orcObject.idcardEffectEnd){
|
||||
vdata.applymentDetailInfo.validDt = orcObject.idcardEffectEnd
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 图片识别的回调函数
|
||||
function ocrScanFunc(orcObject){
|
||||
|
||||
if(orcObject){
|
||||
if(orcObject.licenseNo){
|
||||
vdata.applymentDetailInfo.licNo = orcObject.licenseNo
|
||||
}
|
||||
if(orcObject.licenseEffectEnd){
|
||||
vdata.applymentDetailInfo.licTov = orcObject.licenseEffectEnd
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!--
|
||||
河马付的分账渠道账号
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 引入公共样式和数据表单 -->
|
||||
<DiyDivisionFormPage ref="diyDivisionFormPageRef" />
|
||||
|
||||
<a-row>
|
||||
<a-col offset="2" span="10">
|
||||
<a-alert type="info">
|
||||
<template #message>
|
||||
<a-button v-if="vdata.showMode == 'detail'" type="link" @click="vdata.showMode = 'subMchId'">已有子商户号？ 切换到快速模式</a-button>
|
||||
<a-button v-else type="link" @click="vdata.showMode = 'detail'">切换到详细信息模式</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="vdata.showMode == 'subMchId'">
|
||||
<a-divider orientation="left" style="color: #1A66FF;">河马付账户信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionAccountFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="subMchRules"
|
||||
>
|
||||
<a-form-item label="持卡人姓名" name="accName">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="账号类型" name="accType">
|
||||
<a-select v-model:value="vdata.currentReceiver.accType" style="width: 110px" placeholder="账号类型">
|
||||
<a-select-option :value="0">个人</a-select-option>
|
||||
<a-select-option :value="1">商户类型</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item label="子商户号（subMchId）" name="accNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accNo" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<SplitMchForm v-if="vdata.showMode == 'detail'" ref="splitMchFormRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { reactive, ref, provide, computed } from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
|
||||
import SplitMchForm from './SplitMchForm.vue'
|
||||
|
||||
const diyDivisionFormPageRef = ref()
|
||||
const divisionAccountFormRef = ref()
|
||||
const splitMchFormRef = ref()
|
||||
|
||||
let emptyObject = {}
|
||||
|
||||
const subMchRules = {
|
||||
accNo: [ ruleGenerator.requiredInput('持卡人姓名') ],
|
||||
accName: [ ruleGenerator.requiredInput('子商户号') ],
|
||||
accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
applymentDetailInfo: {}, // 河马付的进件资料对象
|
||||
|
||||
showMode: 'detail', // detail: 详细信息， subMchId: 简介模式
|
||||
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
accType: 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 向子组件注入： 兼容数据
|
||||
provide('mchApplymentData', computed( ()=> emptyObject) )
|
||||
|
||||
// 向子组件注入： 进件参数具体数据
|
||||
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )
|
||||
|
||||
provide('isView', false)
|
||||
provide('configMode', 'divsionMode')
|
||||
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
async function getReqDataList(){
|
||||
|
||||
// 验证主表单 and 复制信息到主提交记录中
|
||||
await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
|
||||
Object.assign(vdata.currentReceiver, formData)
|
||||
})
|
||||
|
||||
// 验证
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
await divisionAccountFormRef.value.validate()
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
await splitMchFormRef.value.saveDataPreCallback(false)
|
||||
}
|
||||
|
||||
// 组装数据
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
|
||||
vdata.currentReceiver.channelExtInfo = '{}' //空数据
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
// 个人类型
|
||||
if(vdata.applymentDetailInfo.merchantType == 1){
|
||||
vdata.currentReceiver.accType = 0
|
||||
}else{
|
||||
vdata.currentReceiver.accType = 1 //商户类型
|
||||
}
|
||||
|
||||
vdata.currentReceiver.accNo = vdata.applymentDetailInfo.settAccountNo
|
||||
vdata.currentReceiver.accName = vdata.applymentDetailInfo.settAccountName
|
||||
vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
|
||||
}
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
resolve([vdata.currentReceiver])
|
||||
})
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
diyDivisionFormPageRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
|
||||
<a-form
|
||||
ref="applyFormRef"
|
||||
:model="applymentDetailInfo"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="applyRules"
|
||||
>
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">经营信息</a-divider>
|
||||
<a-form-item label="子商户类型" name="hmMerchantType">
|
||||
<a-radio-group v-model:value="applymentDetailInfo.hmMerchantType" @change="()=>{applymentDetailInfo.bankAccountType = ''}">
|
||||
<a-radio value="GENERAL_MERCHANT">普通商户</a-radio>
|
||||
<a-radio value="PERSONAL_MERCHANT">个人小微</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT'" label="企业性质" name="enterpriseNature">
|
||||
<a-radio-group v-model:value="applymentDetailInfo.enterpriseNature">
|
||||
<a-radio value="STOCK_COMPANY">股份公司</a-radio>
|
||||
<a-radio value="LIMITED_COMPANY">有限公司</a-radio>
|
||||
<a-radio value="INDIVIDUAL_BUSINESS">个体工商户</a-radio>
|
||||
<a-radio value="GOVERNMENT_INSTITUTION">事业单位</a-radio>
|
||||
<a-radio value="OTHER">其他组织</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT'" label="营业执照照片" name="licenseImg">
|
||||
<JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT' ? '商户执照名称' : '子商户名称'" name="mchFullName">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT'" label="营业执照编号" name="licenseNo">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT' &&
|
||||
(applymentDetailInfo.enterpriseNature=='STOCK_COMPANY' || applymentDetailInfo.enterpriseNature=='LIMITED_COMPANY' || applymentDetailInfo.enterpriseNature=='INDIVIDUAL_BUSINESS')"
|
||||
label="工商网截图"
|
||||
name="icNetScreenShot"
|
||||
>
|
||||
<JeepayUpload v-model:src="applymentDetailInfo.icNetScreenShot" bizType="applyment" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">商户信息</a-divider>
|
||||
|
||||
<a-form-item label="商户地理位置选择省市县" name="areaCode">
|
||||
<JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商户详细地址" name="address">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.address" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法人信息</a-divider>
|
||||
|
||||
<a-form-item label="法人身份证人像面照片" name="idcard1Img">
|
||||
<JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="法人身份证国徽面照片" name="idcard2Img">
|
||||
<JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="法人姓名" name="idcardName">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.idcardName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="法人证件号" name="idcardNo">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="联系电话" name="contactPhone">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">银行账户信息</a-divider>
|
||||
|
||||
<a-form-item label="银行账户类型" name="bankAccountType">
|
||||
<a-radio-group v-model:value="applymentDetailInfo.bankAccountType">
|
||||
<a-radio value="PUBLIC_ACCOUNT" :disabled="applymentDetailInfo.hmMerchantType == 'PERSONAL_MERCHANT'">对公帐户</a-radio>
|
||||
<a-radio value="PRIVATE_DEBIT_ACCOUNT" :checked="true">对私借记卡</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="银行开户名" name="settAccountName">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.settAccountName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="银行卡卡号" name="settAccountNo">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.settAccountNo" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="银行联行号" name="bankChannelNo">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.bankChannelNo" />
|
||||
<span><a href="https://www.icvio.cn/" target="_blank">联行号查询</a></span>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="银行预留手机号" name="bankAccountPhone">
|
||||
<a-input v-model:value.trim="applymentDetailInfo.bankAccountPhone" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="分账计费模式" name="feeType">
|
||||
<a-radio-group v-model:value="applymentDetailInfo.feeType">
|
||||
<a-radio value="1">主账户计费模式(默认)</a-radio>
|
||||
<a-radio value="2">子账户计费模式</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">其他补充材料</a-divider>
|
||||
<a-form-item label="补充材料1" name="otherPicUrl1">
|
||||
<JeepayUpload v-model:src="applymentDetailInfo.otherPicUrl1" bizType="applyment" />
|
||||
</a-form-item>
|
||||
<a-form-item label="补充材料2" name="otherPicUrl2">
|
||||
<JeepayUpload v-model:src="applymentDetailInfo.otherPicUrl2" bizType="applyment" />
|
||||
</a-form-item>
|
||||
<a-form-item label="补充材料3" name="otherPicUrl3">
|
||||
<JeepayUpload v-model:src="applymentDetailInfo.otherPicUrl3" bizType="applyment" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
import {ref, reactive, defineEmits, defineExpose, inject, getCurrentInstance} from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
|
||||
|
||||
// 获取当前实例的代理对象
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 接收父组件的进件详细参数
|
||||
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
|
||||
let applymentDetailInfo : any = applymentDetailInfoInject.value
|
||||
|
||||
if(!applymentDetailInfo.hmMerchantType) {
|
||||
applymentDetailInfo.hmMerchantType = 'GENERAL_MERCHANT'
|
||||
}
|
||||
|
||||
if(!applymentDetailInfo.feeType) {
|
||||
applymentDetailInfo.feeType = '1'
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
hideItem : []
|
||||
})
|
||||
|
||||
|
||||
// 表单实例
|
||||
const applyFormRef = ref()
|
||||
// 表单验证规则
|
||||
const applyRules = {
|
||||
hmMerchantType: [ ruleGenerator.requiredSelect('商户类型', 'string') ],
|
||||
enterpriseNature: [ ruleGenerator.requiredSelect('企业性质', 'string') ],
|
||||
licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
|
||||
mchFullName: [ ruleGenerator.requiredInput('名称') ],
|
||||
licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
|
||||
icNetScreenShot: [ ruleGenerator.requiredUpload('工商网截图') ],
|
||||
|
||||
areaCode: [ ruleGenerator.requiredInput('省市县', 'array') ],
|
||||
address: [ ruleGenerator.requiredInput('详细地址') ],
|
||||
|
||||
idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
|
||||
idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
|
||||
idcardName: [ ruleGenerator.requiredInput('法人姓名') ],
|
||||
idcardNo: [ ruleGenerator.requiredInput('法人证件号') ],
|
||||
contactPhone: [ ruleGenerator.requiredInput('联系电话'), ruleGenerator.mobile ],
|
||||
|
||||
bankAccountType: [ ruleGenerator.requiredSelect('银行账户类型', 'string') ],
|
||||
settAccountName: [ ruleGenerator.requiredInput('银行开户名') ],
|
||||
settAccountNo: [ ruleGenerator.requiredInput('银行卡卡号') ],
|
||||
bankChannelNo: [ ruleGenerator.requiredInput('银行联行号') ],
|
||||
bankAccountPhone: [ ruleGenerator.requiredInput('银行预留手机号') ],
|
||||
feeType: [ ruleGenerator.requiredSelect('分账计费模式', 'string') ]
|
||||
}
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['itemRender'])
|
||||
|
||||
// 验证所有的规则 & 提交进件资料
|
||||
function saveDataPreCallback(isTempData){
|
||||
// 转换商户类型
|
||||
convertMerchentType()
|
||||
|
||||
// 草稿状态直接提交
|
||||
if(isTempData){
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
// 验证所有表单
|
||||
return applyFormRef.value.validate().then(() => {
|
||||
return Promise.resolve()
|
||||
}).catch((params) => {
|
||||
$infoBox.message.error('数据填写不完整， 请检查后提交')
|
||||
return Promise.reject()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 图片识别的回调函数
|
||||
function ocrScanFunc(orcObject){
|
||||
if(orcObject){
|
||||
Object.assign(applymentDetailInfo, orcObject)
|
||||
if(orcObject.idcardSex) {
|
||||
applymentDetailInfo.idcardSex = orcObject.idcardSex
|
||||
}
|
||||
if(orcObject.idcardAddress) {
|
||||
applymentDetailInfo.idcardAddress = orcObject.idcardAddress
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 转换商户类型
|
||||
function convertMerchentType() {
|
||||
applymentDetailInfo.merchantType = 5
|
||||
if(!applymentDetailInfo.hmMerchantType){
|
||||
return
|
||||
}
|
||||
|
||||
if (applymentDetailInfo.hmMerchantType == 'PERSONAL_MERCHANT') {
|
||||
// 个人小微
|
||||
applymentDetailInfo.merchantType = 1
|
||||
} else {
|
||||
if (!applymentDetailInfo.enterpriseNature) {
|
||||
return
|
||||
}
|
||||
// 股份和有限公司
|
||||
if (applymentDetailInfo.enterpriseNature == 'STOCK_COMPANY' || applymentDetailInfo.enterpriseNature == 'LIMITED_COMPANY') {
|
||||
applymentDetailInfo.merchantType = 3
|
||||
// 个体工商户
|
||||
} else if (applymentDetailInfo.enterpriseNature == 'INDIVIDUAL_BUSINESS') {
|
||||
applymentDetailInfo.merchantType = 2
|
||||
// 事业单位
|
||||
} else if (applymentDetailInfo.enterpriseNature == 'GOVERNMENT_INSTITUTION') {
|
||||
applymentDetailInfo.merchantType = 4
|
||||
// 其他组织
|
||||
} else {
|
||||
applymentDetailInfo.merchantType = 5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ saveDataPreCallback })
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
盛付通的分账渠道账号
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 引入公共样式和数据表单 -->
|
||||
<DiyDivisionFormPage ref="diyDivisionFormPageRef" />
|
||||
|
||||
<a-row>
|
||||
<a-col offset="2" span="10">
|
||||
<a-alert type="info">
|
||||
<template #message>
|
||||
<a-button v-if="vdata.showMode == 'detail'" type="link" @click="vdata.showMode = 'subMchId'">已有子商户号？ 切换到快速模式</a-button>
|
||||
<a-button v-else type="link" @click="vdata.showMode = 'detail'">切换到详细信息模式</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="vdata.showMode == 'subMchId'">
|
||||
<a-divider orientation="left" style="color: #1A66FF;">盛付通账户信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionAccountFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="subMchRules"
|
||||
>
|
||||
<a-form-item label="持卡人姓名" name="accName">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="账号类型" name="accType">
|
||||
<a-select v-model:value="vdata.currentReceiver.accType" style="width: 110px" placeholder="账号类型">
|
||||
<a-select-option :value="0">个人</a-select-option>
|
||||
<a-select-option :value="1">商户类型</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item label="子商户号（subMchId）" name="accNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accNo" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<ShengpayApplyment v-if="vdata.showMode == 'detail'" ref="shengpayApplymentRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import ShengpayApplyment from 'UIC/JeepayMchApplyment/diy/shengpay/Applyment.vue'
|
||||
import RelationType from '../../relationType/RelationType.vue'
|
||||
import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
|
||||
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
const diyDivisionFormPageRef = ref()
|
||||
const divisionAccountFormRef = ref()
|
||||
const shengpayApplymentRef = ref()
|
||||
|
||||
let emptyObject = {}
|
||||
|
||||
const subMchRules = {
|
||||
accNo: [ ruleGenerator.requiredInput('持卡人姓名') ],
|
||||
accName: [ ruleGenerator.requiredInput('子商户号') ],
|
||||
accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
applymentDetailInfo: {}, //盛付通的进件资料对象
|
||||
|
||||
showMode: 'detail', //detail: 详细信息， subMchId: 简介模式
|
||||
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
accType: 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 向子组件注入： 兼容数据
|
||||
provide('mchApplymentData', computed( ()=> emptyObject) )
|
||||
|
||||
// 向子组件注入： 进件参数具体数据
|
||||
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )
|
||||
|
||||
provide('isView', false)
|
||||
provide('configMode', 'divsionMode')
|
||||
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
async function getReqDataList(){
|
||||
|
||||
// 验证主表单 and 复制信息到主提交记录中
|
||||
await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
|
||||
Object.assign(vdata.currentReceiver, formData)
|
||||
})
|
||||
|
||||
// 验证
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
await divisionAccountFormRef.value.validate()
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
await shengpayApplymentRef.value.saveDataPreCallback(false)
|
||||
}
|
||||
|
||||
// 组装数据
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
|
||||
vdata.currentReceiver.channelExtInfo = '{}' //空数据
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
// 个人类型
|
||||
if(vdata.applymentDetailInfo.merchantType == 1){
|
||||
vdata.currentReceiver.accType = 0
|
||||
}else{
|
||||
vdata.currentReceiver.accType = 1 //商户类型
|
||||
}
|
||||
|
||||
vdata.currentReceiver.accNo = vdata.applymentDetailInfo.settAccountNo
|
||||
vdata.currentReceiver.accName = vdata.applymentDetailInfo.settAccountName
|
||||
vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
|
||||
}
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
resolve([vdata.currentReceiver])
|
||||
})
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
diyDivisionFormPageRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,154 @@
|
||||
<!--
|
||||
联动惠商的分账渠道账号
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 引入公共样式和数据表单 -->
|
||||
<DiyDivisionFormPage ref="diyDivisionFormPageRef" />
|
||||
|
||||
<!-- 合同信息 -->
|
||||
<a-divider orientation="left" style="color: #1A66FF;">合同信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionApplyFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.applymentDetailInfo"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="subMchRules"
|
||||
>
|
||||
<a-form-item label="三方协议形式" name="contractType">
|
||||
<a-radio-group v-model:value="vdata.applymentDetailInfo.contractType">
|
||||
<a-radio :value="1">纸质协议</a-radio>
|
||||
<a-radio :value="2">电子协议</a-radio>
|
||||
</a-radio-group>
|
||||
<br><span class="jeepay-tip-text">
|
||||
注意事项：
|
||||
<br>● 纸质协议：纸质协议需要盖章邮寄，相关流程请咨询联动平台；
|
||||
<br>● 电子协议：需要分账方先申请电子签约：在对应的进件条目中的【签约开通】中--》分账电签（发起申请）
|
||||
</span>
|
||||
</a-form-item>
|
||||
|
||||
<div v-if="vdata.applymentDetailInfo.contractType == 1">
|
||||
<a-form-item label="商户收单主协议" name="agrmPic">
|
||||
<JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.agrmPic" bizType="applyment" listType="picture-card" />
|
||||
<span class="jeepay-tip-text">(若该主商户历史有过成功的绑定记录，可以不传)</span>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="三方分账授权协议" name="shareAgrmPic">
|
||||
<JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.shareAgrmPic" bizType="applyment" listType="picture-card" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<a-form-item label="分账开通登记表" name="supmtAgrmPic">
|
||||
<JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.supmtAgrmPic" bizType="applyment" listType="picture-card" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="合作协议" name="copAgrmPic">
|
||||
<JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.copAgrmPic" bizType="applyment" listType="picture-card" />
|
||||
<span class="jeepay-tip-text">(分账方和分账接收方之间的业务合作协议)</span>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-divider orientation="left" style="color: #1A66FF;">账户信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionAccountFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="subMchRules"
|
||||
>
|
||||
<a-form-item label="持卡人姓名" name="accName">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="账号类型" name="accType">
|
||||
<a-select v-model:value="vdata.currentReceiver.accType" style="width: 110px" placeholder="账号类型">
|
||||
<a-select-option :value="0">个人</a-select-option>
|
||||
<a-select-option :value="1">商户类型</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="子商户号（subMchId）" name="accNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accNo" />
|
||||
<span class="jeepay-tip-text">请使用进件成功并开通D0提现权限的子商户号
|
||||
<br>注意事项：
|
||||
<br>● 分账接收方不支持非法人结算；
|
||||
<br>● 分账接收方若为企业只支持对公结算；
|
||||
<br>● 分账方也可做为另一个分账方商户的分账接收方（无需重新进件一个分账接收方商户），即两个正常商户（有交易权限）也可建立分账关系；
|
||||
<br>● 店铺类型为“合并结算分店”的商户不可成为分账方，也不可成为分账接收方；
|
||||
</span>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { reactive, ref, provide, computed } from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
|
||||
|
||||
const diyDivisionFormPageRef = ref()
|
||||
const divisionAccountFormRef = ref()
|
||||
const divisionApplyFormRef = ref()
|
||||
|
||||
let emptyObject = {}
|
||||
|
||||
const subMchRules = {
|
||||
accNo: [ ruleGenerator.requiredInput('子商户号') ],
|
||||
accName: [ ruleGenerator.requiredInput('持卡人姓名') ],
|
||||
accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
|
||||
contractType: [ ruleGenerator.requiredSelect('三方协议形式', 'number') ],
|
||||
shareAgrmPic: [ ruleGenerator.requiredUpload('三方分账授权协议') ],
|
||||
supmtAgrmPic: [ ruleGenerator.requiredUpload('分账开通登记表') ],
|
||||
copAgrmPic: [ ruleGenerator.requiredUpload('合作协议') ]
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
applymentDetailInfo: {}, //盛付通的进件资料对象
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
accType: 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 向子组件注入： 兼容数据
|
||||
provide('mchApplymentData', computed( ()=> emptyObject) )
|
||||
|
||||
// 向子组件注入： 进件参数具体数据
|
||||
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )
|
||||
|
||||
provide('isView', false)
|
||||
provide('configMode', 'divsionMode')
|
||||
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
async function getReqDataList(){
|
||||
|
||||
// 验证主表单 and 复制信息到主提交记录中
|
||||
await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
|
||||
Object.assign(vdata.currentReceiver, formData)
|
||||
})
|
||||
|
||||
// 验证
|
||||
await divisionApplyFormRef.value.validate()
|
||||
await divisionAccountFormRef.value.validate()
|
||||
|
||||
// 组装数据
|
||||
vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
|
||||
// 验证 进件资料表单信息
|
||||
return await new Promise((resolve, reject) => {
|
||||
resolve([vdata.currentReceiver])
|
||||
})
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
diyDivisionFormPageRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!--
|
||||
随行付的分账渠道账号
|
||||
@author zx
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 引入公共样式和数据表单 -->
|
||||
<DiyDivisionFormPage ref="diyDivisionFormPageRef" />
|
||||
|
||||
<a-row>
|
||||
<a-col offset="2" span="10">
|
||||
<a-alert type="info">
|
||||
<template #message>
|
||||
<a-button v-if="vdata.showMode == 'detail'" type="link" @click="vdata.showMode = 'subMchId'">已有子商户号？ 切换到快速模式</a-button>
|
||||
<a-button v-else type="link" @click="vdata.showMode = 'detail'">切换到详细信息模式</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="vdata.showMode == 'subMchId'">
|
||||
<a-divider orientation="left" style="color: #1A66FF;">随行付账户信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionAccountFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="subMchRules"
|
||||
>
|
||||
<a-form-item label="持卡人姓名" name="accName">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="子商户号（mno）" name="accNo">
|
||||
<a-input v-model:value.trim="vdata.currentReceiver.accNo" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<VbillpayApplyment v-if="vdata.showMode == 'detail'" ref="vbillpayApplymentRef" :showStyle="'block'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import VbillpayApplyment from 'UIC/JeepayMchApplyment/diy/vbillpay/Applyment.vue'
|
||||
import RelationType from '../../relationType/RelationType.vue'
|
||||
import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
|
||||
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
const diyDivisionFormPageRef = ref()
|
||||
const divisionAccountFormRef = ref()
|
||||
const vbillpayApplymentRef = ref()
|
||||
|
||||
let emptyObject = {}
|
||||
|
||||
const subMchRules = {
|
||||
accNo: [ ruleGenerator.requiredInput('持卡人姓名') ],
|
||||
accName: [ ruleGenerator.requiredInput('子商户号') ],
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
applymentDetailInfo: {}, //随行付的进件资料对象
|
||||
|
||||
showMode: 'subMchId', //detail: 详细信息， subMchId: 简介模式
|
||||
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
}
|
||||
})
|
||||
|
||||
// 向子组件注入： 兼容数据
|
||||
provide('mchApplymentData', computed( ()=> emptyObject) )
|
||||
|
||||
// 向子组件注入： 进件参数具体数据
|
||||
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )
|
||||
|
||||
provide('isView', false)
|
||||
provide('configMode', 'divsionMode')
|
||||
|
||||
|
||||
// 获取请求列表（List格式）， 返回Promise对象， 值为数组类型
|
||||
async function getReqDataList(){
|
||||
|
||||
// 验证主表单 and 复制信息到主提交记录中
|
||||
await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
|
||||
Object.assign(vdata.currentReceiver, formData)
|
||||
})
|
||||
|
||||
// 验证
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
await divisionAccountFormRef.value.validate()
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
await vbillpayApplymentRef.value.saveDataPreCallback(false)
|
||||
}
|
||||
|
||||
// 组装数据
|
||||
if(vdata.showMode == 'subMchId'){
|
||||
|
||||
vdata.currentReceiver.channelExtInfo = '{}' //空数据
|
||||
|
||||
}else{ // 验证 进件资料表单信息
|
||||
|
||||
vdata.currentReceiver.accNo = vdata.applymentDetailInfo.settAccountNo
|
||||
vdata.currentReceiver.accName = vdata.applymentDetailInfo.settAccountName
|
||||
vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
|
||||
}
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
resolve([vdata.currentReceiver])
|
||||
})
|
||||
}
|
||||
|
||||
function changeState(index, state){
|
||||
diyDivisionFormPageRef.value.changeState(index, state)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({getReqDataList, changeState})
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!--
|
||||
封装分账公共信息
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/12 10:59
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-alert v-if="vdata.currentReceiver.reqBindState == 0" type="warning" message="待绑定" banner />
|
||||
|
||||
<a-alert v-if="vdata.currentReceiver.reqBindState == 1" type="success" message="绑定成功" banner />
|
||||
<a-alert v-if="vdata.currentReceiver.reqBindState == 2" type="error" message="绑定异常" banner />
|
||||
|
||||
<!-- 分账信息 -->
|
||||
|
||||
<a-divider orientation="left" style="color: #1A66FF;">分账信息</a-divider>
|
||||
<a-form
|
||||
ref="divisionFormRef"
|
||||
style="margin-top: 20px;"
|
||||
:model="vdata.currentReceiver"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 8 }"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-item label="账号别名" name="receiverAlias">
|
||||
<a-input v-model:value="vdata.currentReceiver.receiverAlias" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="分账关系" name="relationType">
|
||||
<RelationType v-model:relationType="vdata.currentReceiver.relationType" v-model:relationTypeName="vdata.currentReceiver.relationTypeName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="关系名称" name="relationTypeName">
|
||||
<a-input v-model:value="vdata.currentReceiver.relationTypeName" :disabled="vdata.currentReceiver.relationType !== 'CUSTOM'" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="默认分账比例" name="divisionProfit">
|
||||
<!-- 预览模式 || 不是运营平台（其他系统）： 不可更改分账费率， 使用默认值 -->
|
||||
<a-input-number
|
||||
v-model:value="vdata.currentReceiver.divisionProfit"
|
||||
:precision="2"
|
||||
:min="0.01"
|
||||
:max="100"
|
||||
>
|
||||
<template #addonAfter>%</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
import RelationType from '../relationType/RelationType.vue'
|
||||
import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
|
||||
import ruleGenerator from '@/utils/ruleGenerator'
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
const divisionFormRef = ref()
|
||||
|
||||
const rules = {
|
||||
receiverAlias: [ ruleGenerator.requiredInput('账号别名') ],
|
||||
relationType: [ ruleGenerator.requiredSelect('分账关系') ],
|
||||
relationTypeName: [ ruleGenerator.requiredInput('关系名称') ],
|
||||
divisionProfit: [ ruleGenerator.requiredInput('默认分账比例', 'number') ],
|
||||
}
|
||||
|
||||
const vdata : any = reactive({
|
||||
|
||||
currentReceiver: { // 当前分账用户信息
|
||||
reqBindState: 0, // 默认待绑定
|
||||
relationType: 'PARTNER', // 默认合作伙伴, 需要同时更改select的defaultValue
|
||||
relationTypeName: '合作伙伴',
|
||||
}
|
||||
})
|
||||
|
||||
// 验证 and 获取表单数据
|
||||
function validateAndGetData(){
|
||||
|
||||
return divisionFormRef.value.validate().then(() => {
|
||||
return Promise.resolve(JSON.parse(JSON.stringify(vdata.currentReceiver)))
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 更改状态
|
||||
function changeState(index, state){
|
||||
vdata.currentReceiver.reqBindState = state
|
||||
}
|
||||
|
||||
|
||||
defineExpose({ validateAndGetData, changeState })
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!--
|
||||
分账关系类型的封装
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/05/09 17:14
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<a-select labelInValue placeholder="分账关系类型" style="width: 100px;" @change="changeRelationType($event)">
|
||||
<a-select-option v-for="item in vdata.relationList" :key="item.value">{{ item.text }}</a-select-option>
|
||||
|
||||
<!-- <a-select-option key="PARTNER">合作伙伴</a-select-option>
|
||||
<a-select-option key="SERVICE_PROVIDER">服务商</a-select-option>
|
||||
<a-select-option key="STORE">门店</a-select-option>
|
||||
<a-select-option key="STAFF">员工</a-select-option>
|
||||
<a-select-option key="STORE_OWNER">店主</a-select-option>
|
||||
<a-select-option key="HEADQUARTER">总部</a-select-option>
|
||||
<a-select-option key="BRAND">品牌方</a-select-option>
|
||||
<a-select-option key="DISTRIBUTOR">分销商</a-select-option>
|
||||
<a-select-option key="USER">用户</a-select-option>
|
||||
<a-select-option key="SUPPLIER">供应商</a-select-option>
|
||||
<a-select-option key="CUSTOM">自定义</a-select-option>-->
|
||||
</a-select>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {reactive, onMounted, inject} from 'vue'
|
||||
|
||||
// 默认分账关系类型
|
||||
const defaultRelationList = [{value: 'PARTNER', text: '合作伙伴'}, {value: 'SERVICE_PROVIDER', text: '服务商'}, {value: 'STORE', text: '门店'}, {value: 'STAFF', text: '员工'},
|
||||
{value: 'STORE_OWNER', text: '店主'}, {value: 'HEADQUARTER', text: '总部'}, {value: 'BRAND', text: '品牌方'}, {value: 'DISTRIBUTOR', text: '分销商'}, {value: 'USER', text: '用户'},
|
||||
{value: 'SUPPLIER', text: '供应商'}, {value:'PLAT_RED', text:'平台红包'}, {value: 'CUSTOM', text: '自定义'}]
|
||||
|
||||
// 收付通分账关系类型
|
||||
const sftRelationList = [{value: 'SUPPLIER', text: '供应商'}, {value: 'DISTRIBUTOR', text: '分销商'}, {value: 'SERVICE_PROVIDER', text: '服务商'}, {value: 'PLATFORM', text: '平台'},
|
||||
{value: 'OTHERS', text: '其他'}]
|
||||
|
||||
// 河马付分账关系类型
|
||||
const hmRelationList = [{value: 'PARTNER', text: '合作伙伴'}, {value: 'SERVICE_PROVIDER', text: '服务商'}, {value: 'STORE', text: '门店'}, {value: 'HEAD_QUARTERS', text: '总部'},
|
||||
{value: 'BRAND_PARTY', text: '品牌方'}, {value: 'DISTRIBUTOR', text: '分销商'}, {value: 'SUPPLIER', text: '供应商'}, {value: 'OTHER', text: '其他'}]
|
||||
|
||||
// 参数注入： 当前选择的数据对象信息（包含 ifCode, mchNo, appId 等参数 ）
|
||||
let selectedMchAndIfcodeInfoRef : any = inject('selectedMchAndIfcodeInfo')
|
||||
let selectedMchAndIfcodeInfo : any = selectedMchAndIfcodeInfoRef.value
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
relationType: { type: String, default: '' },
|
||||
relationTypeName: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const vdata:any = reactive({
|
||||
relationList: []
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
vdata.relationList = []
|
||||
if (selectedMchAndIfcodeInfo.ifCode == 'sftpay') {
|
||||
vdata.relationList = sftRelationList
|
||||
}if (selectedMchAndIfcodeInfo.ifCode == 'hmpay') {
|
||||
vdata.relationList = hmRelationList
|
||||
}else {
|
||||
vdata.relationList = defaultRelationList
|
||||
}
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:relationType', 'update:relationTypeName'])
|
||||
|
||||
|
||||
// 切换 账号关系
|
||||
function changeRelationType (value) {
|
||||
emit('update:relationType', value.key)
|
||||
|
||||
if (value.key !== 'CUSTOM') {
|
||||
emit('update:relationTypeName', value.label[0].children)
|
||||
|
||||
} else {
|
||||
emit('update:relationTypeName', '')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="footer-info">
|
||||
<div v-if="oemSiteInfo.copyrightInfo?.configDesc">
|
||||
<span @click="jumpUrl(oemSiteInfo.copyrightInfo.configUrl)">{{ oemSiteInfo.copyrightInfo.configDesc }}</span>
|
||||
</div>
|
||||
<div class="top-list">
|
||||
<div v-if="oemSiteInfo.reportIcp?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportIcp.configUrl)">
|
||||
<img src="./icons/icon-icp.png" alt="">
|
||||
ICP备案：{{ oemSiteInfo.reportIcp.configDesc }}
|
||||
</div>
|
||||
<div v-if="oemSiteInfo.reportJh?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportJh.configUrl)">
|
||||
<img src="./icons/icon-pay.png" alt="">
|
||||
中国支付清算协会备案编码：{{ oemSiteInfo.reportJh.configDesc }}
|
||||
</div>
|
||||
<div v-if="oemSiteInfo.reportDx?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportDx.configUrl)">
|
||||
<img src="./icons/icon-telecom.png" alt="">
|
||||
电信增值业务许可证编号：{{ oemSiteInfo.reportDx.configDesc }}
|
||||
</div>
|
||||
<div v-if="oemSiteInfo.reportGa?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportGa.configUrl)">
|
||||
<img src="./icons/icon-public.png" alt="">
|
||||
公安备案：{{ oemSiteInfo.reportGa.configDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useOem } from '@/store/modules/oem'
|
||||
// 获取网站信息
|
||||
const oemSiteInfo: any = useOem().getSiteInfo()
|
||||
// 判断链接 是否 合法 不合法 自动 拼接 https
|
||||
const url_REG = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
|
||||
const jumpUrl = (url: any) => {
|
||||
if (!url) return
|
||||
if (!url_REG.test(url)) url = 'https://' + url
|
||||
const a = document.createElement('a')
|
||||
a.target = '_blank'
|
||||
a.href = url
|
||||
a.click()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer-info {
|
||||
|
||||
padding-bottom: 25px;
|
||||
color: #b3b3b3;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1.5px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.top-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.t-list-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="选择码牌" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 码牌列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.qrcId" class="rate-input" placeholder="搜索码牌ID" />
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="qrcId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'isvNo'">
|
||||
<a-tooltip overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>渠道名称：{{record.isvName}}</span><br>
|
||||
<span>渠道号：{{record.isvNo}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box"> {{record.isvName}}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'qrcType'">
|
||||
<a-tag v-if="record.qrcType == 0" color="blue">电子码牌</a-tag>
|
||||
<a-tag v-if="record.qrcType == 1" color="orange">实体码牌</a-tag>
|
||||
<a-tag v-if="record.qrcType == 2" color="green">实体立牌</a-tag>
|
||||
<a-tag v-if="record.qrcType == 3" color="tan">音响码牌</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'qrcId'">
|
||||
{{ record.qrcId }}
|
||||
<QrcodeOutlined style="font-size: 16px" @click="showQrImgFunc(record.qrcId)" />
|
||||
</template>
|
||||
<template v-if="column.key === 'storeId'">
|
||||
<a-tooltip class="my-tooltip">
|
||||
<template #title>
|
||||
门店编号：{{record.storeId}}
|
||||
</template>
|
||||
{{record.storeName}}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.qrcId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record.qrcId, state)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_QR_CODE_LIST, req, $qrcShellViewByQrc } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
// 导入全局函数
|
||||
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const tableColumns = ref([
|
||||
{ key: 'qrcType', title: '码牌类型', },
|
||||
{ key: 'entryPage', title: '页面类型', customRender: ({ record }) => {return record.entryPage == 'default' ? '默认' : record.entryPage == 'h5' ? 'H5' : '小程序'} ,},
|
||||
{ key: 'qrcId', title: '二维码编号'},
|
||||
{ key: 'qrcAlias', dataIndex: 'qrcAlias', title: '二维码名称'},
|
||||
{ key: 'storeId', title: '门店名称', dataIndex: 'storeId', },
|
||||
{ key: "ifName", title: "支付通道", dataIndex: "ifName" },
|
||||
{ key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
|
||||
{ key: 'bindState', dataIndex: 'bindState', title: '是否绑定'},
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
searchData: {},
|
||||
selectRecordIdList: []
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
return req.list(API_URL_MCH_QR_CODE_LIST, params)
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格行开关开启、关闭
|
||||
function updateBindState(recordId, bindState) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
if (bindState) {
|
||||
vdata.selectRecordIdList.push(recordId)
|
||||
} else {
|
||||
vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(recordId), 1)
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
// return reqLoad.updateById(API_URL_STORE_DEVICE, recordId, { state: state }).then(res => {
|
||||
// searchFunc()
|
||||
// resolve()
|
||||
// }).catch(err => reject(err))
|
||||
})
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (storeId, bindQrcList,ifCode = '') {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
|
||||
// vdata.searchData.qrcBelongType = 2
|
||||
vdata.searchData.getType = 1
|
||||
if(ifCode){
|
||||
vdata.searchData.ifName = ifCode
|
||||
}
|
||||
if (bindQrcList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindQrcList))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 显示二维码图片
|
||||
function showQrImgFunc(recordId){
|
||||
$qrcShellViewByQrc(recordId).then((res) => {
|
||||
$viewerApi({images: [res]})
|
||||
})
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="划拨/收回设备" @ok="okFunc">
|
||||
<a-row>
|
||||
<a-space align="center">
|
||||
<label>请选择分配类型：</label>
|
||||
<a-radio-group v-model:value="vdata.allotOrRecover">
|
||||
<a-radio value="allot">划拨</a-radio>
|
||||
<a-radio value="recover">收回</a-radio>
|
||||
</a-radio-group>
|
||||
</a-space>
|
||||
</a-row>
|
||||
<div class="modal-div">
|
||||
<!-- 代理商列表 -->
|
||||
<div v-show="vdata.allotOrRecover == 'allot'" class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.agentSearchData.agentNo" class="rate-input" placeholder="搜索服务商号" />
|
||||
<a-input v-model:value="vdata.agentSearchData.agentName" class="rate-input" placeholder="搜索服务商名称" />
|
||||
<a-button type="primary" @click="searchFunc">
|
||||
<template #icon><search-outlined /></template>查询
|
||||
</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.agentSearchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="agentTableRef"
|
||||
:initData="true"
|
||||
:reqTableDataFunc="reqAgentTableDataFunc"
|
||||
:tableColumns="agentTableColumns"
|
||||
:searchData="vdata.agentSearchData"
|
||||
:rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.agent, onChange: agentTableSelectChangeFunc }"
|
||||
rowKey="agentNo"
|
||||
:scrollX="400"
|
||||
>
|
||||
<template #topBtnSlot>
|
||||
<p>请选择服务商</p>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_AGENT_LIST, req } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, computed } from 'vue'
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
showType: { type: String, default: 'AGENT' }, // 选择类型： AGENT
|
||||
})
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const agentTableColumns = [
|
||||
{ key: 'agentNo', title: '服务商号', dataIndex: 'agentNo' },
|
||||
{ title: '服务商名称', dataIndex: 'agentName' }
|
||||
]
|
||||
|
||||
// 当前 table 组件
|
||||
const agentTableRef = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
agentSearchData: { },
|
||||
allotOrRecover: 'allot',
|
||||
selectedRowKeys: { agent: [] } //列表的选择项
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
// const showTypeArray = computed((params) => {
|
||||
// return props.showType.split('_')
|
||||
// })
|
||||
|
||||
// 请求table接口数据
|
||||
function reqAgentTableDataFunc (params){
|
||||
return req.list(API_URL_AGENT_LIST, Object.assign({}, params, { state: 1 }))
|
||||
}
|
||||
|
||||
// 商户表格搜索事件
|
||||
const searchFunc = () => agentTableRef.value.refTable(true)
|
||||
|
||||
// 表格的选择事件
|
||||
function agentTableSelectChangeFunc(selectedRowKeys) {
|
||||
vdata.selectedRowKeys.agent = selectedRowKeys
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
|
||||
// [代理商号， 分配类型]
|
||||
emit('selectFinishFunc', [
|
||||
vdata.selectedRowKeys.agent.length > 0 ? vdata.selectedRowKeys.agent[0] : null, vdata.allotOrRecover
|
||||
])
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show () {
|
||||
vdata.selectedRowKeys = { agent: [] } //清空已选择的数据
|
||||
vdata.allotOrRecover = 'allot' // 默认划拨
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,272 @@
|
||||
<!--
|
||||
封装选择商户， 选择应用的通用弹层
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/04/06 10:14
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="60%"
|
||||
:title="showTypeArray.indexOf('STORE') > -1 ? '请选择门店' : showTypeArray.indexOf('APP') > -1 ? '请选择应用' : '请选择用户'"
|
||||
@ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 商户列表 ( 必选 ) -->
|
||||
<div class="modal-div1">
|
||||
<p>用户列表</p>
|
||||
|
||||
<div v-if="props.onlyMchNo || props.onlyMchName || props.mchNoAndName" class="search">
|
||||
<a-input v-if="props.onlyMchNo || props.mchNoAndName" v-model:value="vdata.mchSearchData.mchNo"
|
||||
class="rate-input" placeholder="搜索商户号" />
|
||||
<a-input v-if="props.onlyMchName || props.mchNoAndName" v-model:value="vdata.mchSearchData.mchName"
|
||||
class="rate-input" placeholder="搜索商户名称" />
|
||||
<a-button type="primary" @click="searchFunc">
|
||||
<template #icon><search-outlined /></template>查询
|
||||
</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.mchSearchData = {}"><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
<div class="list-table">
|
||||
<!-- 列表渲染 -->
|
||||
<JeepayTable ref="mchTableRef" :initData="true" :reqTableDataFunc="reqMchTableDataFunc"
|
||||
:tableColumns="mchTableColumns" :searchData="vdata.mchSearchData"
|
||||
:rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.mch, onChange: mchTableSelectChangeFunc }"
|
||||
rowKey="mchNo" :scrollX="400">
|
||||
<!-- 自定义插槽 -->
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="record.type === 1 ? 'green' : 'orange'">
|
||||
{{ record.type === 1 ? '普通商户' : '特约商户' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 应用列表 -->
|
||||
<div v-if="showTypeArray.indexOf('APP') > -1" class="modal-div1 second-div">
|
||||
<p>应用列表</p>
|
||||
<div v-show="vdata.selectedRowKeys.mch.length > 0" class="list-table">
|
||||
<JeepayTable ref="mchAppTableRef" :initData="false" :reqTableDataFunc="reqMchAppTableDataFunc"
|
||||
:tableColumns="mchAppTableColumns" :searchData="vdata.mchAppSearchData"
|
||||
:rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.app, onChange: mchAppTableSelectChangeFunc }"
|
||||
rowKey="appId" :scrollX="400" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 门店列表 -->
|
||||
<div v-if="showTypeArray.indexOf('STORE') > -1" class="modal-div1">
|
||||
<p>门店列表</p>
|
||||
<div v-show="vdata.selectedRowKeys.mch.length > 0" class="list-table">
|
||||
<JeepayTable ref="mchStoreTableRef" :initData="false" :reqTableDataFunc="reqMchStoreTableDataFunc"
|
||||
:tableColumns="mchStoreTableColumns" :searchData="vdata.mchStoreSearchData"
|
||||
:rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.store, onChange: mchStoreTableSelectChangeFunc }"
|
||||
rowKey="storeId" :scrollX="400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_APP, API_URL_MCH_LIST, API_URL_MCH_STORE_LIST, req } from '@/api/manage'
|
||||
import { toRaw, reactive, ref, onMounted, defineExpose, nextTick, computed } from 'vue'
|
||||
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
showType: { type: String, default: 'MCH' }, // 选择类型： MCH / MCH_APP / MCH_STORE / MCH_APP_STORE
|
||||
onlyMchNo: { type: Boolean, default: false }, // 搜索时仅展示商户号
|
||||
onlyMchName: { type: Boolean, default: false }, // 搜索时仅展示商户名称
|
||||
mchNoAndName: { type: Boolean, default: false }, // 搜索时同时展示商户名和商户号
|
||||
})
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
|
||||
const mchTableColumns = [
|
||||
{ title: '用户名称', dataIndex: 'mchName' },
|
||||
{ key: 'mchNo', title: '用户号', dataIndex: 'mchNo' },
|
||||
{ key: 'contactTel', title: '用户手机号', dataIndex: 'contactTel' },
|
||||
{ title: '用户类型', key: 'type', dataIndex: 'type' }
|
||||
]
|
||||
const mchAppTableColumns = [
|
||||
{ title: '应用AppId', dataIndex: 'appId' },
|
||||
{ title: '应用名称', dataIndex: 'appName' }
|
||||
]
|
||||
|
||||
const mchStoreTableColumns = [
|
||||
{ title: '门店ID', dataIndex: 'storeId' },
|
||||
{ title: '门店名称', dataIndex: 'storeName' }
|
||||
]
|
||||
|
||||
// 当前 table 组件
|
||||
const mchTableRef = ref()
|
||||
const mchAppTableRef = ref()
|
||||
const mchStoreTableRef = ref()
|
||||
|
||||
|
||||
// 响应式数据
|
||||
const vdata: any = reactive({
|
||||
|
||||
visible: false,
|
||||
mchSearchData: {
|
||||
mchNo: '',
|
||||
mchName: '',
|
||||
},
|
||||
mchAppSearchData: {},
|
||||
mchStoreSearchData: {},
|
||||
selectedRowKeys: { mch: [], app: [], store: [], userInfo: [], mchApplyId: [], } //列表的选择项
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const showTypeArray = computed((params) => {
|
||||
return props.showType.split('_')
|
||||
})
|
||||
|
||||
|
||||
// 请求table接口数据 商户列表
|
||||
function reqMchTableDataFunc(params) {
|
||||
return req.list(API_URL_MCH_LIST, params)
|
||||
}
|
||||
|
||||
// 请求table接口数据 商户应用列表
|
||||
function reqMchAppTableDataFunc(params) {
|
||||
return req.list(API_URL_MCH_APP, params)
|
||||
}
|
||||
|
||||
|
||||
const mchApplyIdList = ref([])
|
||||
|
||||
// 请求table接口数据 商户门店列表
|
||||
async function reqMchStoreTableDataFunc(params) {
|
||||
mchApplyIdList.value = await req.list(API_URL_MCH_STORE_LIST, params)
|
||||
return mchApplyIdList.value
|
||||
}
|
||||
|
||||
// 商户表格搜索事件
|
||||
const searchFunc = () => mchTableRef.value.refTable(true)
|
||||
|
||||
// 商户表格的选择事件
|
||||
function mchTableSelectChangeFunc(selectedRowKeys, e) {
|
||||
console.log(e[0], 'onChangeonChangeonChangeonChangeonChange')
|
||||
console.log(selectedRowKeys, 'selectedRowKeysselectedRowKeysselectedRowKeys')
|
||||
|
||||
vdata.selectedRowKeys.userInfo = e
|
||||
vdata.selectedRowKeys.mch = selectedRowKeys
|
||||
vdata.selectedRowKeys.app = []
|
||||
vdata.selectedRowKeys.store = []
|
||||
|
||||
vdata.mchAppSearchData.mchNo = selectedRowKeys[0]
|
||||
vdata.mchStoreSearchData.mchNo = selectedRowKeys[0]
|
||||
|
||||
if (mchAppTableRef.value) {
|
||||
mchAppTableRef.value.refTable(true)
|
||||
}
|
||||
|
||||
if (mchStoreTableRef.value) {
|
||||
mchStoreTableRef.value.refTable(true)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 商户表格的选择事件
|
||||
function mchAppTableSelectChangeFunc(selectedRowKeys) {
|
||||
vdata.selectedRowKeys.app = selectedRowKeys
|
||||
}
|
||||
|
||||
// 商户表格的选择事件
|
||||
function mchStoreTableSelectChangeFunc(selectedRowKeys) {
|
||||
console.log(mchApplyIdList.value);
|
||||
|
||||
vdata.selectedRowKeys.mchApplyId = [mchApplyIdList.value.records.find(item => item.storeId == selectedRowKeys[0]).mchApplyId]
|
||||
console.log(vdata.selectedRowKeys.mchApplyId);
|
||||
|
||||
vdata.selectedRowKeys.store = selectedRowKeys
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc() {
|
||||
console.log(vdata.selectedRowKeys.userInfo, 'vdata.selectedRowKeys.userInfo')
|
||||
// [用户号， 应用， 门店]
|
||||
emit('selectFinishFunc',
|
||||
[
|
||||
vdata.selectedRowKeys.mch.length > 0 ? vdata.selectedRowKeys.mch[0] : null,
|
||||
vdata.selectedRowKeys.app.length > 0 ? vdata.selectedRowKeys.app[0] : null,
|
||||
vdata.selectedRowKeys.store.length > 0 ? vdata.selectedRowKeys.store[0] : null,
|
||||
vdata.selectedRowKeys.userInfo.length > 0 ? vdata.selectedRowKeys.userInfo[0] : null,
|
||||
vdata.selectedRowKeys.mchApplyId.length > 0 ? vdata.selectedRowKeys.mchApplyId[0] : null
|
||||
])
|
||||
|
||||
}
|
||||
|
||||
function close() {
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
|
||||
// 显示
|
||||
function show(initMchSearchData) {
|
||||
|
||||
vdata.selectedRowKeys = { mch: [], app: [], store: [] } //清空已选择的数据
|
||||
|
||||
vdata.mchSearchData = initMchSearchData || {}
|
||||
vdata.visible = true
|
||||
|
||||
nextTick(() => {
|
||||
mchTableRef.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose({ show, close })
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.modal-div1 {
|
||||
flex-grow: 1;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.second-div {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.modal-div {
|
||||
flex-direction: column;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.second-div {
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!--
|
||||
封装选择门店的通用弹层
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/04/06 10:14
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
v-model:visible="vdata.visible"
|
||||
width="95%"
|
||||
:title="'请选择门店'"
|
||||
@ok="okFunc"
|
||||
>
|
||||
<div class="modal-div">
|
||||
<!-- 门店列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.mchStoreSearchData.storeId" class="rate-input" placeholder="搜索门店ID" />
|
||||
<a-input v-model:value="vdata.mchStoreSearchData.storeName" class="rate-input" placeholder="搜索门店名称" />
|
||||
<a-button type="primary" @click="searchFunc">
|
||||
<template #icon><search-outlined /></template>查询
|
||||
</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.mchStoreSearchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="mchStoreTableRef"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqMchStoreTableDataFunc"
|
||||
:tableColumns="mchStoreTableColumns"
|
||||
:searchData="vdata.mchStoreSearchData"
|
||||
:rowSelection="{ type: 'radio',selectedRowKeys: vdata.selectedRowKeys.store, onChange: mchStoreTableSelectChangeFunc }"
|
||||
rowKey="storeId"
|
||||
:scrollX="400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_STORE_LIST, req } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, computed } from 'vue'
|
||||
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
storeIdAndName: { type: Boolean, default: false}, // 搜索时同时展示门店ID和门店名称
|
||||
mchNo: { type: String, default: ''}, // 用户号
|
||||
})
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const mchStoreTableColumns = [
|
||||
{ title: '门店ID', dataIndex: 'storeId' },
|
||||
{ title: '门店名称', dataIndex: 'storeName' }
|
||||
]
|
||||
|
||||
// 当前 table 组件
|
||||
const mchStoreTableRef = ref()
|
||||
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
|
||||
visible: false,
|
||||
mchStoreSearchData: {
|
||||
storeId: '',
|
||||
storeName: '',
|
||||
},
|
||||
|
||||
selectedRowKeys: { store: [] } //列表的选择项
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 请求table接口数据 商户门店列表
|
||||
function reqMchStoreTableDataFunc (params){
|
||||
return req.list(API_URL_MCH_STORE_LIST, {mchNo: props.mchNo})
|
||||
}
|
||||
|
||||
// 商户表格搜索事件
|
||||
const searchFunc = () => mchStoreTableRef.value.refTable(true)
|
||||
|
||||
// 商户表格的选择事件
|
||||
function mchStoreTableSelectChangeFunc(selectedRowKeys) {
|
||||
vdata.selectedRowKeys.store = selectedRowKeys
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
|
||||
emit('selectFinishFunc',
|
||||
[
|
||||
vdata.selectedRowKeys.store.length > 0 ? vdata.selectedRowKeys.store[0] : null,
|
||||
])
|
||||
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
|
||||
// 显示
|
||||
function show (initMchSearchData) {
|
||||
|
||||
vdata.selectedRowKeys = {store: []} //清空已选择的数据
|
||||
|
||||
vdata.mchStoreSearchData = initMchSearchData || { }
|
||||
vdata.visible = true
|
||||
|
||||
nextTick(() => {
|
||||
mchStoreTableRef.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.modal-div1 {
|
||||
flex-grow: 1;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.second-div {
|
||||
margin: 0 10px;
|
||||
}
|
||||
@media screen and (max-width:768px){
|
||||
.modal-div {
|
||||
flex-direction: column;
|
||||
.modal-div1 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.second-div {
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="选择门店" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 门店列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.storeId" class="rate-input" placeholder="搜索门店ID" />
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="storeId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'storeId'">
|
||||
{{ record.storeId }}
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'storeName'">
|
||||
{{ record.storeName }}
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.storeId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record.storeId, state)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_STORE_LIST, req } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
// 导入全局函数
|
||||
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const tableColumns = ref([
|
||||
{ key: 'storeId', title: '门店ID'},
|
||||
{ key: 'storeName', title: '门店名称'},
|
||||
{ key: 'bindState', title: '是否绑定'},
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
searchData: {},
|
||||
selectRecordIdList: [],
|
||||
belongInfoId: ''
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
return req.list(API_URL_MCH_STORE_LIST, Object.assign({ mchNo: vdata.belongInfoId }, params))
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格行开关开启、关闭
|
||||
function updateBindState(recordId, bindState) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
if (bindState) {
|
||||
vdata.selectRecordIdList.push(recordId)
|
||||
} else {
|
||||
vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(recordId), 1)
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (bindList, belongInfoId) {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
vdata.belongInfoId = belongInfoId
|
||||
if (bindList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindList))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="选择通道" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 码牌列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.qrcId" class="rate-input" placeholder="搜索码牌ID" />
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="qrcId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.ifCode) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record, state)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
API_URL_MCH_QR_CODE_LIST,
|
||||
req,
|
||||
$qrcShellViewByQrc,
|
||||
API_URL_PRODUCT_LIST,
|
||||
API_URL_PACKAGE_LIST, API_MCH_PAY_DEFINESPAGE
|
||||
} from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
// 导入全局函数
|
||||
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const tableColumns = ref([
|
||||
{ key: 'ifName', title: '通道名称',dataIndex: 'ifName', align: 'ifName' },
|
||||
{ key: 'ifCode', title: '通道参数', dataIndex: 'ifCode', align: 'ifCode'},
|
||||
{ key: 'bindState', dataIndex: 'bindState', title: '是否绑定'},
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
searchData: {},
|
||||
selectRecordIdList: []
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
params.sate=1
|
||||
return req.list(API_MCH_PAY_DEFINESPAGE, params)
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格行开关开启、关闭
|
||||
function updateBindState(recordId, bindState) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
if (bindState) {
|
||||
vdata.selectRecordIdList.push(recordId)
|
||||
} else {
|
||||
vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(recordId), 1)
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
// return reqLoad.updateById(API_URL_STORE_DEVICE, recordId, { state: state }).then(res => {
|
||||
// searchFunc()
|
||||
// resolve()
|
||||
// }).catch(err => reject(err))
|
||||
})
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
console.log(vdata.selectRecordIdList)
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (storeId, bindQrcList) {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
|
||||
// vdata.searchData.qrcBelongType = 2
|
||||
vdata.searchData.getType = 1
|
||||
if (bindQrcList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindQrcList))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 显示二维码图片
|
||||
function showQrImgFunc(recordId){
|
||||
$qrcShellViewByQrc(recordId).then((res) => {
|
||||
$viewerApi({images: [res]})
|
||||
})
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="选择产品" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 码牌列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.productName" class="rate-input" placeholder="搜索产品名称" />
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="productId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'productState'">
|
||||
<a-badge v-if="record.productState == 1" status="success" text="启用" />
|
||||
<a-badge v-if="record.productState == 0" status="error" text="禁用" />
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'charge'">
|
||||
<a-badge v-if="record.charge == 1" status="success" text="是" />
|
||||
<a-badge v-if="record.charge == 0" status="error" text="否" />
|
||||
</template>
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.productId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record, state)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {API_URL_MCH_QR_CODE_LIST, req, $qrcShellViewByQrc, API_URL_PRODUCT_LIST} from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
// 导入全局函数
|
||||
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
const props = defineProps({
|
||||
configMode: { type: String, default: '' }, // 模式
|
||||
})
|
||||
|
||||
const tableColumns = ref([
|
||||
{ key: 'productName', title: '产品名称', fixed: 'left', dataIndex: 'productName' },
|
||||
{ key: 'typeName', title: '产品分类', dataIndex: 'typeName' },
|
||||
{ key: 'productState', title: '状态', dataIndex: 'productState' },
|
||||
// { key: 'productDesc', title: '描述', dataIndex: 'productDesc',width:500 },
|
||||
// { key: 'charge', title: '是否收费', dataIndex: 'price' },
|
||||
// { key: 'applyForCount', title: '申请数量', dataIndex: 'applyForCount' },
|
||||
// { key: 'orderCount', title: '订购数量', dataIndex: 'orderCount' },
|
||||
// { key: 'productSort', title: '排序', dataIndex: 'productSort' },
|
||||
{ key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
|
||||
{ key: 'bindState', dataIndex: 'bindState', title: '是否绑定'},
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
searchData: {},
|
||||
selectRecordIdList: []
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
params.productState=1
|
||||
return req.list(API_URL_PRODUCT_LIST, params)
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格行开关开启、关闭
|
||||
function updateBindState(recordId, bindState) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
if (bindState) {
|
||||
vdata.selectRecordIdList.push(recordId)
|
||||
} else {
|
||||
vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(recordId), 1)
|
||||
}
|
||||
console.log(vdata.selectRecordIdList,'vdata.selectRecordIdList')
|
||||
resolve()
|
||||
})
|
||||
// return reqLoad.updateById(API_URL_STORE_DEVICE, recordId, { state: state }).then(res => {
|
||||
// searchFunc()
|
||||
// resolve()
|
||||
// }).catch(err => reject(err))
|
||||
})
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
console.log(vdata.selectRecordIdList)
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (storeId, bindQrcList) {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
|
||||
// vdata.searchData.qrcBelongType = 2
|
||||
vdata.searchData.getType = 1
|
||||
if (bindQrcList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindQrcList))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 显示二维码图片
|
||||
function showQrImgFunc(recordId){
|
||||
$qrcShellViewByQrc(recordId).then((res) => {
|
||||
$viewerApi({images: [res]})
|
||||
})
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="绑定方案" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 码牌列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.name" class="rate-input" placeholder="搜索方案名称" />
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="packageId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.packageId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record, state)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
API_URL_MCH_QR_CODE_LIST,
|
||||
req,
|
||||
$qrcShellViewByQrc,
|
||||
API_URL_PRODUCT_LIST,
|
||||
API_URL_PACKAGE_LIST
|
||||
} from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
// 导入全局函数
|
||||
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const props = defineProps({
|
||||
configMode: { type: String, default: '' }, // 模式
|
||||
})
|
||||
|
||||
const tableColumns = ref([
|
||||
{ key: 'name', title: '方案名称',dataIndex: 'name', align: 'center' },
|
||||
{ key: 'packageType', title: '方案分类',dataIndex: 'packageType', align: 'packageType' },
|
||||
// { key: 'desc', title: '描述', dataIndex: 'desc', align: 'center'},
|
||||
{ key: 'packageState', title: '状态', dataIndex: 'packageState' },
|
||||
{ key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
|
||||
{ key: 'bindState', dataIndex: 'bindState', title: '是否绑定'},
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
searchData: {},
|
||||
selectRecordIdList: []
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
params.packageState=1
|
||||
return req.list(API_URL_PACKAGE_LIST, params)
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格行开关开启、关闭
|
||||
function updateBindState(record, bindState) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
if (bindState) {
|
||||
vdata.selectRecordIdList.push(record)
|
||||
} else {
|
||||
vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(record), 1)
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
// return reqLoad.updateById(API_URL_STORE_DEVICE, recordId, { state: state }).then(res => {
|
||||
// searchFunc()
|
||||
// resolve()
|
||||
// }).catch(err => reject(err))
|
||||
})
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
console.log(vdata.selectRecordIdList)
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (storeId, bindQrcList) {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
|
||||
// vdata.searchData.qrcBelongType = 2
|
||||
vdata.searchData.getType = 1
|
||||
if (bindQrcList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindQrcList))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 显示二维码图片
|
||||
function showQrImgFunc(recordId){
|
||||
$qrcShellViewByQrc(recordId).then((res) => {
|
||||
$viewerApi({images: [res]})
|
||||
})
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="选择码牌" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 码牌列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.qrcId" class="rate-input" placeholder="搜索码牌ID" />
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="qrcId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'qrcType'">
|
||||
<a-tag v-if="record.qrcType == 0" color="blue">电子码牌</a-tag>
|
||||
<a-tag v-if="record.qrcType == 1" color="orange">实体码牌</a-tag>
|
||||
<a-tag v-if="record.qrcType == 2" color="green">实体立牌</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'qrcId'">
|
||||
{{ record.qrcId }}
|
||||
<QrcodeOutlined style="font-size: 16px" @click="showQrImgFunc(record.qrcId)" />
|
||||
</template>
|
||||
<template v-if="column.key === 'storeId'">
|
||||
<a-tooltip class="my-tooltip">
|
||||
<template #title>
|
||||
门店编号：{{record.storeId}}
|
||||
</template>
|
||||
{{record.storeName}}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.qrcId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record.qrcId, state)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_QR_CODE_LIST, req, $qrcShellViewByQrc } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
// 导入全局函数
|
||||
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const tableColumns = ref([
|
||||
{ key: 'qrcType', title: '码牌类型', },
|
||||
{ key: 'entryPage', title: '页面类型', customRender: ({ record }) => {return record.entryPage == 'default' ? '默认' : record.entryPage == 'h5' ? 'H5' : '小程序'} ,},
|
||||
{ key: 'qrcId', title: '二维码编号'},
|
||||
{ key: 'qrcAlias', dataIndex: 'qrcAlias', title: '二维码名称'},
|
||||
{ key: 'storeId', title: '门店名称', dataIndex: 'storeId', },
|
||||
{ key: 'bindState', dataIndex: 'bindState', title: '是否绑定'},
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
searchData: {},
|
||||
selectRecordIdList: []
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
return req.list(API_URL_MCH_QR_CODE_LIST, params)
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格行开关开启、关闭
|
||||
function updateBindState(recordId, bindState) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
if (bindState) {
|
||||
vdata.selectRecordIdList.push(recordId)
|
||||
} else {
|
||||
vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(recordId), 1)
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
// return reqLoad.updateById(API_URL_STORE_DEVICE, recordId, { state: state }).then(res => {
|
||||
// searchFunc()
|
||||
// resolve()
|
||||
// }).catch(err => reject(err))
|
||||
})
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (storeId, bindQrcList) {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
|
||||
vdata.searchData.qrcBelongType = 2
|
||||
|
||||
if (storeId) {
|
||||
vdata.searchData.storeId = storeId
|
||||
}
|
||||
|
||||
if (bindQrcList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindQrcList))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 显示二维码图片
|
||||
function showQrImgFunc(recordId){
|
||||
$qrcShellViewByQrc(recordId).then((res) => {
|
||||
$viewerApi({images: [res]})
|
||||
})
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" title="选择商户" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 商户列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.mchNo" class="rate-input" placeholder="搜索商户ID" />
|
||||
<a-input v-model:value="vdata.searchData.mchName" class="rate-input" placeholder="搜索商户名称" />
|
||||
<a-input v-model:value="vdata.searchData.agentNo" class="rate-input" placeholder="搜索代理商ID" />
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="mchNo"
|
||||
:rowSelection="{ type: 'checkbox', selectedRowKeys: vdata.selectRecordIdList, onChange: infoTableSelectChangeFunc }"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'mchNo'">
|
||||
{{ record.mchNo }}
|
||||
</template>
|
||||
<template v-if="column.key === 'mchName'">
|
||||
{{ record.mchName }}
|
||||
</template>
|
||||
<template v-if="column.key === 'agentNo'">
|
||||
{{ record.agentNo }}
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_LIST, req } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const tableColumns = ref([
|
||||
{ key: 'mchNo', title: '用户号'},
|
||||
{ key: 'mchName', title: '用户名称'},
|
||||
{ key: 'agentNo', title: '服务商号'},
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
searchData: {},
|
||||
selectRecordIdList: []
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
function reqTableDataFunc (params){
|
||||
return req.list(API_URL_MCH_LIST, params)
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格多选
|
||||
function infoTableSelectChangeFunc(selectedRowKeys, selectedRows) {
|
||||
vdata.selectRecordIdList = selectedRowKeys
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (bindList, searchData) {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
if (searchData) {
|
||||
vdata.searchData = searchData
|
||||
}
|
||||
|
||||
if (bindList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindList))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model:visible="vdata.visible" width="80%" :class="vdata.storeType!=0?'storeType1':'storeType0'" title="选择门店" @ok="okFunc">
|
||||
<div class="modal-div">
|
||||
<!-- 门店列表 -->
|
||||
<div class="modal-div1">
|
||||
<div class="search">
|
||||
<a-input v-model:value="vdata.searchData.mchApplyName" class="rate-input" placeholder="商户名称/商户号" />
|
||||
<a-input v-model:value="vdata.searchData.storeId" class="rate-input" placeholder="门店名称/门店编号" />
|
||||
<a-input v-model:value="vdata.searchData.ifName" class="rate-input" placeholder="支付通道" />
|
||||
<a-input v-model:value="vdata.searchData.isvNo" class="rate-input" placeholder="渠道名称/渠道号" />
|
||||
<a-input v-model:value="vdata.searchData.bindAppIdName" class="rate-input" placeholder="应用名称/应用ID" />
|
||||
<a-select class="rate-input" v-model:value="vdata.searchData.settlementType" placeholder="结算类型" >
|
||||
<a-select-option value="T1">T1</a-select-option>
|
||||
<a-select-option value="D1">D1</a-select-option>
|
||||
<a-select-option value="D0">D0</a-select-option>
|
||||
<a-select-option value="定时结算">定时结算</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="list-table" v-if="vdata.storeType == 0">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="storeId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template v-if="column.key === 'storeId'">
|
||||
{{ record.storeId }}
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="column.key === 'bindAppIdName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>应用名称：{{record.bindAppIdName}}</span><br>
|
||||
<span>应用ID：{{record.bindAppId}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="column.key === 'isvNo'">
|
||||
<a-tooltip overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>渠道名称：{{record.isvName}}</span><br>
|
||||
<span>渠道号：{{record.isvNo}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box"> {{record.isvName}}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'mchShortName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>商户名称：{{record.mchApplyName}}</span><br>
|
||||
<span>商户号：{{record.mchApplyId}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box">
|
||||
{{record.mchApplyName}}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'storeName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>门店名称：{{record.storeName}}</span><br>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box">
|
||||
<a ><b>{{ record.storeName }}</b></a ></div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key == 'isBind'">
|
||||
<a-badge v-if="record.isBind == 0" status="warning" text="未绑定"></a-badge>
|
||||
<a-badge v-if="record.isBind == 1" status="success" text="已绑定"></a-badge>
|
||||
</template>
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.storeId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record, state,index)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
<div class="list-table" v-if="vdata.storeType == 1">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns2"
|
||||
:searchData="vdata.searchData"
|
||||
rowKey="storeId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template v-if="column.key === 'storeId'">
|
||||
{{ record.storeId }}
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="column.key === 'bindAppIdName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>应用名称：{{record.bindAppIdName}}</span><br>
|
||||
<span>应用ID：{{record.bindAppId}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="column.key === 'isvNo'">
|
||||
<a-tooltip overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>渠道名称：{{record.isvName}}</span><br>
|
||||
<span>渠道号：{{record.isvNo}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box"> {{record.isvName}}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'mchShortName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>商户名称：{{record.mchApplyName}}</span><br>
|
||||
<span>商户号：{{record.mchApplyId}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box">
|
||||
{{record.mchApplyName}}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'storeName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>门店名称：{{record.storeName}}</span><br>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box">
|
||||
<a ><b>{{ record.storeName }}</b></a ></div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key == 'isBind'">
|
||||
<a-badge v-if="record.isBind == 0" status="warning" text="未绑定"></a-badge>
|
||||
<a-badge v-if="record.isBind == 1" status="success" text="已绑定"></a-badge>
|
||||
</template>
|
||||
<template v-if="column.key === 'bindState'">
|
||||
<JeepayTableColState :state="vdata.selectRecordIdList.includes(record.storeId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record, state,index)}" />
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="list-table" v-if="vdata.storeType == 2">
|
||||
<JeepayTable
|
||||
ref="infoTable"
|
||||
:initData="false"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
:tableColumns="tableColumns3"
|
||||
:searchData="vdata.searchData"
|
||||
:rowSelection="{ type: 'radio',selectedRowKeys: vdata.selectedRowKeys, onChange: mchAppTableSelectChangeFunc }"
|
||||
rowKey="storeId"
|
||||
scrollX="100%"
|
||||
>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template v-if="column.key === 'storeId'">
|
||||
{{ record.storeId }}
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="column.key === 'bindAppIdName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>应用名称：{{record.bindAppIdName}}</span><br>
|
||||
<span>应用ID：{{record.bindAppId}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="column.key === 'isvNo'">
|
||||
<a-tooltip overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>渠道名称：{{record.isvName}}</span><br>
|
||||
<span>渠道号：{{record.isvNo}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box"> {{record.isvName}}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'mchShortName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>商户名称：{{record.mchApplyName}}</span><br>
|
||||
<span>商户号：{{record.mchApplyId}}</span>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box">
|
||||
{{record.mchApplyName}}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'storeName'">
|
||||
<a-tooltip class="my-tooltip" overlayClassName="tooltip-box-name">
|
||||
<template #title>
|
||||
<span>门店名称：{{record.storeName}}</span><br>
|
||||
</template>
|
||||
<div class="my-tooltip-title-box">
|
||||
<a ><b>{{ record.storeName }}</b></a ></div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key == 'isBind'">
|
||||
<a-badge v-if="record.isBind == 0" status="warning" text="未绑定"></a-badge>
|
||||
<a-badge v-if="record.isBind == 1" status="success" text="已绑定"></a-badge>
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_STORE_LIST, req } from '@/api/manage'
|
||||
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
|
||||
import {message} from "ant-design-vue";
|
||||
|
||||
// 导入全局函数
|
||||
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['selectFinishFunc'])
|
||||
|
||||
const tableColumns = ref([
|
||||
{ title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
|
||||
{ title: "门店名称",fixed: "left", key: "storeName", dataIndex: "storeName"},
|
||||
{ title: "门店编号", dataIndex: "storeId"},
|
||||
{ key: "ifName", title: "支付通道", dataIndex: "ifName" },
|
||||
{ key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
|
||||
{ key: "settleType", title: "结算方式", dataIndex: "settleType" },
|
||||
{ key: "isBind", title: "绑定状态", dataIndex: "isBind" },
|
||||
// { title: "是否默认", key: "defaultFlag", align: "center" },
|
||||
{ title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
|
||||
{ key: 'bindState', fixed:'right',title: '是否绑定'},
|
||||
])
|
||||
const tableColumns2 = ref([
|
||||
{ title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
|
||||
{ title: "门店名称", fixed: "left", key: "storeName", dataIndex: "storeName"},
|
||||
{ title: "门店编号", dataIndex: "storeId"},
|
||||
{ key: "ifName", title: "支付通道", dataIndex: "ifName" },
|
||||
{ key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
|
||||
{ key: "settleType", title: "结算方式", dataIndex: "settleType" },
|
||||
{ title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
|
||||
{ key: 'bindState', fixed:'right',title: '是否绑定'},
|
||||
])
|
||||
const tableColumns3 = ref([
|
||||
{ title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
|
||||
{ title: "门店名称", fixed: "left", key: "storeName", dataIndex: "storeName"},
|
||||
{ title: "门店编号", dataIndex: "storeId"},
|
||||
{ key: "ifName", title: "支付通道", dataIndex: "ifName" },
|
||||
{ key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
|
||||
{ key: "settleType", title: "结算方式", dataIndex: "settleType" },
|
||||
{ title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
|
||||
])
|
||||
|
||||
// 当前 table 组件
|
||||
const infoTable = ref()
|
||||
|
||||
// 响应式数据
|
||||
const vdata :any = reactive ({
|
||||
visible: false,
|
||||
storeType:0,
|
||||
searchData: {},
|
||||
selectRecordIdList: [],
|
||||
selectedRowKeys:'',
|
||||
belongInfoId: '',
|
||||
storeList:[] as any
|
||||
})
|
||||
|
||||
// 请求table接口数据
|
||||
async function reqTableDataFunc (params){
|
||||
var res = await req.list(API_URL_MCH_STORE_LIST, Object.assign({ mchNo: vdata.belongInfoId }, params))
|
||||
vdata.storeList = []
|
||||
vdata.storeList = res.records
|
||||
return res
|
||||
}
|
||||
|
||||
// 表格搜索
|
||||
function searchFunc () {
|
||||
nextTick(() => {
|
||||
infoTable.value.refTable(true)
|
||||
})
|
||||
}
|
||||
// 商户表格的选择事件
|
||||
function mchAppTableSelectChangeFunc(selectedRowKeys) {
|
||||
vdata.selectRecordIdList = [] as any
|
||||
vdata.storeList.forEach((item,index) => {
|
||||
if(item.storeId == selectedRowKeys){
|
||||
vdata.selectRecordIdList = [item]
|
||||
}
|
||||
})
|
||||
vdata.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
|
||||
// 表格行开关开启、关闭
|
||||
function updateBindState(record, bindState,index) {
|
||||
|
||||
if(record.isBind == 1 && vdata.storeType == 0){
|
||||
message.warn('当前门店已绑定路由策略，请在支付理由管理内解绑后添加')
|
||||
return false;
|
||||
}
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
if (bindState) {
|
||||
vdata.selectRecordIdList.push(record)
|
||||
} else {
|
||||
vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(record), 1)
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 选择完毕
|
||||
function okFunc(){
|
||||
|
||||
emit('selectFinishFunc', vdata.selectRecordIdList)
|
||||
}
|
||||
|
||||
// 显示
|
||||
function show (bindList, type =0) {
|
||||
vdata.selectRecordIdList = [] // 清空已选择的数据
|
||||
|
||||
vdata.storeType = type
|
||||
if (bindList) {
|
||||
vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindList))
|
||||
if(vdata.storeType == 2){
|
||||
vdata.selectedRowKeys = vdata.selectRecordIdList[0]
|
||||
console.log(vdata.selectedRowKeys,'selectedRowKeysselectedRowKeys')
|
||||
}
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
searchFunc()
|
||||
})
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
|
||||
function close(){
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
|
||||
// 定义对外输出函数
|
||||
defineExpose( { show, close } )
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
|
||||
.modal-div1 {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.list-table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
.rate-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
.storeType1{
|
||||
margin-top: -70px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!--
|
||||
封装选择门店的通用组件
|
||||
支持上移效果 和 普通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="() => jeepayModelMchStoreInfoListRef.show({storeId: 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="() => jeepayModelMchStoreInfoListRef.show({storeId: props.value}) ">
|
||||
<search-outlined />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
|
||||
<JeepayModelMchStoreInfoList
|
||||
ref="jeepayModelMchStoreInfoListRef"
|
||||
:storeIdAndName="storeIdAndName"
|
||||
:mchNo="mchNo"
|
||||
@selectFinishFunc="searchMchFinishFunc"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, defineProps, defineEmits} from 'vue'
|
||||
|
||||
const jeepayModelMchStoreInfoListRef = ref()
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: [String, Number], default: null },
|
||||
placeholder: {type: String, default: ''},
|
||||
disabled: { type: Boolean, default: false },
|
||||
textUpStyle: { type: Boolean, default: false }, // 是否文字上移的效果
|
||||
storeIdAndName: { type: Boolean, default: false}, // 搜索时展示门店ID和门店名称
|
||||
mchNo: { type: String, default: ''}, // 商戶号
|
||||
})
|
||||
|
||||
// 定义向父组件 通讯 func
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value)
|
||||
}
|
||||
|
||||
|
||||
// 选择商户 / 应用 完成后的操作
|
||||
function searchMchFinishFunc(selectVal){
|
||||
changeFunc(selectVal[0])
|
||||
jeepayModelMchStoreInfoListRef.value.close()
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="allList" placeholder="选择行业编码" @change="changeFunc" />
|
||||
<span style="color: red;">{{ vdata.msg }}</span>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed, reactive } from 'vue'
|
||||
import allList from './mccAli.json'
|
||||
|
||||
const vdata = reactive({
|
||||
msg: ''
|
||||
})
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value){
|
||||
// 传递格式：【一级分类_二级分类】
|
||||
if (props.value.indexOf('_') > 0) {
|
||||
return props.value.split('_')
|
||||
}else {
|
||||
// 只有二级分类value，先查找一级分类
|
||||
return Array.of(findByChildrenValue(props.value), props.value)
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('update:value', value[0] + '_' + value[1])
|
||||
vdata.msg = selectedOptions[1].msg?selectedOptions[1].msg:''
|
||||
}
|
||||
|
||||
// 只有二级分类value，先查找一级分类
|
||||
function findByChildrenValue(childrenValue) {
|
||||
let result = allList.filter(i => {
|
||||
if (i.children) {
|
||||
return i.children.some(children => {
|
||||
return children.value == childrenValue
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return result.length > 0 ? result[0].value : null
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="allList" placeholder="选择商户类别" @change="changeFunc" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
import allList from './mccDgUnionMerType.json'
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value){
|
||||
return [queryOne(props.value), props.value]
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value[1])
|
||||
}
|
||||
|
||||
// 查找一级分类
|
||||
function queryOne(val){
|
||||
let result = allList.filter( (v) => {
|
||||
if(v.children){
|
||||
return v.children.filter( (v2) => v2.value == val).length > 0
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
return result.length > 0 ? result[0].value : null
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="allList" placeholder="选择商户经营类型" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed, reactive } from 'vue'
|
||||
import allList from './mccEasypay.json'
|
||||
|
||||
const vdata = reactive({
|
||||
msg: ''
|
||||
})
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value){
|
||||
return props.value.split('_')
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
console.log(value)
|
||||
emit('update:value', value[0] + '_' + value[1])
|
||||
vdata.msg = selectedOptions[1].msg?selectedOptions[1].msg:''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<a-cascader
|
||||
:value="selectValue"
|
||||
:options="wxMccList"
|
||||
placeholder="选择微信经营类目"
|
||||
@change="changeFunc"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
import mccJSON from './mccHmpayWx.json'
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' },
|
||||
merchantType: { type: Number, default: 0 }
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 微信渠道经营类目列表
|
||||
let wxMccList = computed(() => {
|
||||
if (props.merchantType == 1) {
|
||||
// 个人小微
|
||||
return mccJSON.smallBusinessesList
|
||||
} else if (props.merchantType == 2) {
|
||||
// 个体工商户
|
||||
return mccJSON.individualList
|
||||
} else if (props.merchantType == 3) {
|
||||
// 企业
|
||||
return mccJSON.enterpriseList
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
// console.log(props.value)
|
||||
if (props.value) {
|
||||
return props.value.split('_')
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value) {
|
||||
emit('update:value', value[0] + '_' + value[1])
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="mccList" placeholder="选择行业编码" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
import mccJSON from './mccFuiou.json'
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' },
|
||||
merchantType: { type: Number, default: 1 },
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 行业列表
|
||||
let mccList = computed(() => {
|
||||
if (props.merchantType == 3){
|
||||
return mccJSON.corporationList
|
||||
}else {
|
||||
return mccJSON.personalList
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value){
|
||||
return [queryOne(props.value), props.value]
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value[1])
|
||||
}
|
||||
|
||||
// 查找一级分类
|
||||
function queryOne(val){
|
||||
let result = mccList.value.filter( (v) => {
|
||||
if(v.children){
|
||||
return v.children.filter( (v2) => v2.value == val).length > 0
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
return result.length > 0 ? result[0].value : null
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="allList" placeholder="选择行业编码" @change="changeFunc" />
|
||||
<span style="color: red;">{{ vdata.msg }}</span>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed, reactive } from 'vue'
|
||||
import allList from './mccHkpay.json'
|
||||
|
||||
const vdata = reactive({
|
||||
msg: ''
|
||||
})
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value){
|
||||
return props.value.split('_')
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value[0] + '_' + value[1])
|
||||
vdata.msg = selectedOptions[1].msg?selectedOptions[1].msg:''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="allList" placeholder="选择经营类目编码" @change="changeFunc" />
|
||||
<!-- <span style="color: red;">{{ vdata.msg }}</span> -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed, reactive } from 'vue'
|
||||
import allList from './mccHmpay.json'
|
||||
|
||||
const vdata = reactive({
|
||||
msg: ''
|
||||
})
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value){
|
||||
return props.value.split('_')
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions){
|
||||
console.log(value)
|
||||
emit('update:value', value[0] + '_' + value[1])
|
||||
vdata.msg = selectedOptions[1].msg?selectedOptions[1].msg:''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="allList" placeholder="选择MCC经营类目编码" @change="changeFunc" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed, reactive } from 'vue'
|
||||
import allList from './mccHmpayMch.json'
|
||||
|
||||
const vdata = reactive({
|
||||
})
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value){
|
||||
return props.value.split('_')
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value){
|
||||
emit('update:value', value[0] + '_' + value[1])
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-cascader
|
||||
:value="selectValue"
|
||||
:options="wxMccList"
|
||||
placeholder="选择微信经营类目"
|
||||
@change="changeFunc"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
import mccJSON from './mccHmpayWx.json'
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' },
|
||||
hmMerchantType: { type: String, default: '' },
|
||||
enterpriseNature: { type: String, default: '' },
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 微信渠道经营类目列表
|
||||
let wxMccList = computed(() => {
|
||||
|
||||
if(!props.hmMerchantType){
|
||||
return
|
||||
}
|
||||
|
||||
if (props.hmMerchantType == 'PERSONAL_MERCHANT') {
|
||||
// 个人小微
|
||||
return mccJSON.smallBusinessesList
|
||||
} else {
|
||||
if (!props.enterpriseNature) {
|
||||
return
|
||||
}
|
||||
// 股份和有限公司
|
||||
if (props.enterpriseNature == 'STOCK_COMPANY' || props.enterpriseNature == 'LIMITED_COMPANY') {
|
||||
return mccJSON.enterpriseList
|
||||
// 个体工商户
|
||||
} else if (props.enterpriseNature == 'INDIVIDUAL_BUSINESS') {
|
||||
return mccJSON.individualList
|
||||
// 事业单位
|
||||
} else if (props.enterpriseNature == 'GOVERNMENT_INSTITUTION') {
|
||||
return mccJSON.governmentList
|
||||
// 其他组织
|
||||
} else {
|
||||
return mccJSON.otherBusinessList
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
// console.log(props.value)
|
||||
if (props.value) {
|
||||
return props.value.split('_')
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value) {
|
||||
emit('update:value', value[0] + '_' + value[1])
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="selectedOptions" placeholder="选择行业编码" @change="changeFunc" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {defineProps, defineEmits, computed, watch} from 'vue'
|
||||
|
||||
import mccCompany from './mccKqCompany.json'
|
||||
import mccIndividual from './mccKqIndividual.json'
|
||||
import mccMirco from './mccKqMicro.json'
|
||||
|
||||
// 定义组件的传入参数
|
||||
const props = defineProps({
|
||||
value: {type: String, default: ''},
|
||||
merchantType: {type: Number, default: 3},
|
||||
})
|
||||
|
||||
// 根据不同的 merchantType 选择对应的 options
|
||||
const selectedOptions = computed(() => {
|
||||
switch (props.merchantType) {
|
||||
case 1:
|
||||
return mccMirco
|
||||
case 2:
|
||||
return mccIndividual
|
||||
case 3:
|
||||
default:
|
||||
return mccCompany
|
||||
}
|
||||
})
|
||||
|
||||
// emit： 向父组件进行通讯。
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value) {
|
||||
return [queryOne(props.value), props.value]
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value) {
|
||||
emit('update:value', value[1])
|
||||
}
|
||||
|
||||
// 查找一级分类
|
||||
function queryOne(val) {
|
||||
// debugger;
|
||||
let allList
|
||||
console.log(props.merchantType,'')
|
||||
switch (props.merchantType) {
|
||||
case 1:
|
||||
allList = mccMirco
|
||||
break;
|
||||
case 2:
|
||||
allList = mccIndividual
|
||||
break;
|
||||
case 3:
|
||||
allList = mccCompany
|
||||
break;
|
||||
}
|
||||
|
||||
let result = allList.filter((v) => {
|
||||
// debugger;
|
||||
if (v.children) {
|
||||
return v.children.filter((v2) => v2.value == val).length > 0
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
return result.length > 0 ? result[0].value : null
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<!--
|
||||
省市县三级联动选择 （国标）
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/01/17 19:34
|
||||
-->
|
||||
|
||||
<template>
|
||||
<a-cascader :value="selectValue" :options="allList" placeholder="请选择mcc" @change="changeFunc" />
|
||||
<span style="color: red;">{{ vdata.msg }}</span>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, computed, defineEmits, reactive } from 'vue'
|
||||
import allList from './leshuaMcc.json'
|
||||
|
||||
const vdata = reactive({
|
||||
msg: ''
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
// 计算属性
|
||||
const selectValue = computed(() => {
|
||||
if (props.value && (typeof props.value == 'string')){
|
||||
return props.value.split('_')
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。
|
||||
function changeFunc(value, selectedOptions) {
|
||||
emit('change', selectedOptions)
|
||||
emit('update:value', value[0] + '_' + value[1] + '_' + value[2])
|
||||
vdata.msg = selectedOptions[1].msg?selectedOptions[1].msg:''
|
||||
}
|
||||
|
||||
|
||||
// 递归遍历树状结构数据
|
||||
function recursionTreeData(treeData, func, pid) {
|
||||
for (let i = 0; i < treeData.length; i++) {
|
||||
const item = treeData[i]
|
||||
if (func(item)) {
|
||||
return [item, pid]
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
let res = recursionTreeData(item.children, func, item.value)
|
||||
if (res) {
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user