new-cashier/jeepay-ui-manager/src/components/JeepayUIComponents/JeepayInfoModal/JeepayModelAccountsQrcList.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 === '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>