源文件

jeepay-ui-manager/src/components/JeepayUIComponents/JeepayInfoModal/JeepayModelPayInterfaceList.vue

@@ -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>