166 lines
4.1 KiB
Vue
166 lines
4.1 KiB
Vue
<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>
|