源文件
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user