orgManager/src/views/operations/gameManage/configuration/index.vue

<template>
   <table-search-card :model="queryParams" @getList="getList" @handleQuery="handleQuery" @resetQuery="resetQuery">
      <template #left>
         <el-form-item prop="platformShowCode">
            <el-input v-model="queryParams.platformShowCode" :placeholder="t('请输入平台展示代码')" />
         </el-form-item>
      </template>
      <template #right>
         <el-button type="primary"  @click="superApiConfiguration" >{{ t('超管Api配置') }}</el-button>
         <el-button type="primary" plain icon="Plus"  @click="handleAdd" >{{ t('新增配置') }}</el-button>
      </template>
   </table-search-card>

   <el-table v-loading="loading" :data="gameList" class="c-table-main" stripe
      ref="dragTable" row-key="id" border>
      <el-table-column :label="t('平台展示代码')" align="center" min-width="120px" prop="platformShowCode" />
      <el-table-column :label="t('平台名称')" align="center" min-width="120px" prop="platformCode" />
      <el-table-column :label="t('api平台代码')" align="center" min-width="120px" prop="apiPlatformCode" />
      
      <el-table-column :label="t('货币信息')" align="center" min-width="260px" prop="currencyInfo" >
         <template #default="{row}">
            <el-popover :width="260" trigger="hover">
               {{ row.currencyInfo }}
               <template #reference>
                  <div class="two-line-clamp">{{ row.currencyInfo }}</div>
               </template>
            </el-popover>
         </template>
      </el-table-column>
      <el-table-column :label="t('语言信息')" align="center" min-width="260px" prop="langInfo" >
         <template #default="{row}"> 
            <el-popover :width="260" trigger="hover">
               {{ row.langInfo }}
               <template #reference>
                  <div class="two-line-clamp">{{ row.langInfo }}</div>
               </template>
            </el-popover>
         </template>
      </el-table-column>
      <table-operation></table-operation>
      <el-table-column :label="t('操作')" align="center" min-width="120px" class-name="small-padding fixed-width">
         <template #default="scope">
            <el-button link type="primary" @click="handleUpdate(scope.row)"
               v-hasPermi="['game:game:edit']">{{ t('修改') }}</el-button>
            <el-button link type="primary" @click="handleSynchronous(scope.row)"
               v-hasPermi="['game:game:sync']">{{ t('删除') }}</el-button>
         </template>
      </el-table-column>
   </el-table>

   <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
      <add-dialog v-if="isShowDialog"
      :addEditStatus="addEditStatus" :modifyDate="modifyDate" @submit="getList"
      v-model:show="isShowDialog"></add-dialog>
      <SuperApiConfigurationdialog v-if="isShowApiConfiguration"
      :addEditStatus="addEditStatus" :modifyDate="modifyDate" @submit="getList"
      v-model:show="isShowApiConfiguration"></SuperApiConfigurationdialog>
</template>

<script setup name="Game">
import AddDialog from "./AddDialog"//新增/修改弹窗
import SuperApiConfigurationdialog from "./SuperApiConfigurationdialog"
import * as game from "@/api/game/game";
import { platformSelect,getGamePlatformApiSync,getGamePlatformTenantSync } from "@/api/game/platform";
import {getGameSecretList,getGameSecretInfo,deleteGameSecret} from "@/api/game/configuration";
import useInitDataStore from "@/store/modules/initData";
import { ref } from "vue";

const emits = defineEmits(["reset"])

const useInitData = useInitDataStore();
const { proxy } = getCurrentInstance();

const gameList = ref([]);
const open = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const gameTypeOptions = ref([
   { label: '电子', value: '1' },
   { label: '棋牌', value: '2' },
   { label: '真人', value: '3' },
   { label: '捕鱼', value: '4' },
   { label: '体育', value: '6' },
   { label: '斗鸡', value: '7' },
   { label: '电竞', value: '8' },
   { label: '彩票', value: '9' },
   { label: '区块链', value: '10' },
]);
const data = reactive({
   form: {},
   queryParams: {
      pageNum: 1,
      pageSize: 20,
   },
   rules: {

   }
});

const { queryParams, form, rules } = toRefs(data);
/** 查询平台管理列表 */
function getList() {
   loading.value = true;
   getGameSecretList(queryParams.value).then(response => {
      gameList.value = response.rows;
      total.value = response.total;
      loading.value = false;
   });
}

// 表单重置
function reset() {
   form.value = {
      id: null
   };
   proxy.resetForm("gameRef");
}

/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
   useInitData.setStateData('currencyCode', String(queryParams.value.currencyCode));
   
}

/** 重置按钮操作 */
function resetQuery() {
   queryParams.value.gameType = useInitData.dictInitData.platformType
   queryParams.value.platformId = useInitData.dictInitData.platformId
   queryParams.value.pageNum = 1;
   platformListInit(true)
}

const addEditStatus = ref('add'), isShowDialog = ref(false), editDataId = ref(''),modifyDate = ref({});
/** 修改按钮操作 */
function handleUpdate(row) {
   reset();
   const _id = row.id || ids.value
   getGameSecretInfo(_id).then(response => {
      modifyDate.value = response.data;
      isShowDialog.value = true;
      addEditStatus.value = 'edit'
      title.value = proxy.t('修改配置');
   });
   // proxy.$modal.msgError("该功能暂未开发")
}

const handleAdd = () => { 
   isShowDialog.value = true;
   addEditStatus.value = 'add'
   title.value = proxy.t('新增配置');
}
const isShowApiConfiguration =ref(false)
const superApiConfiguration = () =>{
   isShowApiConfiguration.value = true
}
const handleSynchronous = (row) => {
   proxy.$modal.confirm(proxy.t('确认是否删除？')).then(() => {
      deleteGameSecret(row.id).then(() => {
         proxy.$modal.msgSuccess(proxy.t('删除成功'));
         getList();
      })
   }).catch(() => {})
}
// 游戏api同步
const handleApiGame = () => { 
   proxy.$modal.confirm(proxy.t('是否确认同步？')).then(() => {
      getGamePlatformApiSync({}).then(() => {
         proxy.$modal.msgSuccess(proxy.t('同步成功'));
         getList();
      })
   }).catch(() => {})
}

// 获取游戏平台下拉
const platformList = ref([])
const platformListInit = async (isFirst = false) => {
   let { platformId, gameType } = queryParams.value
   await platformSelect({ platformType: gameType,currencyCode:queryParams.value.currencyCode }).then(res => {
      platformList.value = res.data
      queryParams.value.platformId = isFirst && platformId ? platformId : res?.data?.length ? res.data[0].id : null
      getList();
   })
}
//初始化
onMounted(() => {
   getList();
})
</script>

<style scoped lang="scss">
.two-line-clamp {
   width: 100%;
   height: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-wrap: nowrap;
   line-height: 23px;

}

</style>