213 lines
6.9 KiB
Vue
213 lines
6.9 KiB
Vue
|
<template>
|
|||
|
|
<table-search-card :model="queryParams" @getList="getList" @handleQuery="handleQuery" @resetQuery="resetQuery">
|
|||
|
|
<template #left>
|
|||
|
|
<el-form-item prop="currencyCode">
|
|||
|
|
<currency-select v-model="queryParams.currencyCode" @change="handleQuery"></currency-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item prop="platformType">
|
|||
|
|
<dict-select v-model="queryParams.platformType" dictKey="ff_game_type" :empty-values="[null, undefined]"
|
|||
|
|
:clearable="false" :addOptions="{ label: t('全部类型'), value: '' }"></dict-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item prop="popularCategory">
|
|||
|
|
<el-select v-model="queryParams.popularCategory" :empty-values="[null, undefined]">
|
|||
|
|
<el-option v-for="item in popularCategoryList" :key="item.value" :label="item.label"
|
|||
|
|
:value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item prop="name">
|
|||
|
|
<el-input v-model="queryParams.name" :placeholder="t('请输入平台/子游戏名称')" @keyup.enter="handleQuery" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</template>
|
|||
|
|
<template #right>
|
|||
|
|
{{ t('是否启用') }}
|
|||
|
|
<el-switch
|
|||
|
|
v-model="IsEnabledOne"
|
|||
|
|
v-if="popularType == 1"
|
|||
|
|
active-value="2" inactive-value="1"
|
|||
|
|
class="ml-2"
|
|||
|
|
@click="handleUp(1)"
|
|||
|
|
style="--el-switch-on-color: #13ce66; margin-left: 4px;"
|
|||
|
|
/>
|
|||
|
|
<el-switch
|
|||
|
|
v-model="IsEnabledTow"
|
|||
|
|
v-if="popularType == 2"
|
|||
|
|
active-value="2" inactive-value="1"
|
|||
|
|
class="ml-2"
|
|||
|
|
@click="handleUp(2)"
|
|||
|
|
style="--el-switch-on-color: #13ce66; margin-left: 4px;"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</table-search-card>
|
|||
|
|
|
|||
|
|
<el-table v-loading="loading" :data="gameList" @selection-change="handleSelectionChange" class="c-table-main" stripe
|
|||
|
|
ref="dragTable" row-key="id" border>
|
|||
|
|
<el-table-column type="selection" width="55" align="center" />
|
|||
|
|
<table-drag-sort v-model:tableList="gameList" @dragEnd="dragEnd"></table-drag-sort>
|
|||
|
|
<el-table-column :label="t('游戏类型')" align="center" prop="platformType">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<dict-tag :options="ff_game_type" :value="row.platformType" />
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column :label="t('热门类别')" align="center" prop="popularCategory">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
{{ row.popularCategory === 1 ? t('平台') : t('子游戏') }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column :label="t('平台名称')" align="center" prop="platformName" />
|
|||
|
|
<el-table-column :label="t('热门名称')" align="center" prop="gameName" />
|
|||
|
|
<el-table-column :label="t('币种')" align="center" prop="currencyDisplay" />
|
|||
|
|
<el-table-column :label="t('操作')" align="center" class-name="small-padding fixed-width">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-button link type="primary" @click="handleDelete(scope.row)"
|
|||
|
|
v-hasPermi="['game:game:edit']">{{ t('移除') }}</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<table-operation></table-operation>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
|||
|
|
@pagination="getList" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup name="Popular">
|
|||
|
|
import * as game from "@/api/game/game";
|
|||
|
|
import useInitDataStore from "@/store/modules/initData";
|
|||
|
|
import TableDragSort from '@/components/TableDragSort';
|
|||
|
|
|
|||
|
|
const useInitData = useInitDataStore();
|
|||
|
|
const { proxy } = getCurrentInstance();
|
|||
|
|
const { ff_game_type } = proxy.useDict('ff_game_type')
|
|||
|
|
const emits = defineEmits(['updateGames']); // 定义自定义事件
|
|||
|
|
const props = defineProps({
|
|||
|
|
// 热门类型
|
|||
|
|
// 1:热门管理1 2:热门管理2
|
|||
|
|
popularType: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
hotOne: {
|
|||
|
|
type: String,
|
|||
|
|
default: '1',
|
|||
|
|
},
|
|||
|
|
hotTwo: {
|
|||
|
|
type: String,
|
|||
|
|
default: '1',
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const gameList = ref([]); //表格数据
|
|||
|
|
const loading = ref(true);//加载中
|
|||
|
|
const ids = ref([]);//多选框选中数据
|
|||
|
|
const single = ref(true);//是否单选
|
|||
|
|
const IsEnabledOne = ref('1');//是否启用
|
|||
|
|
const IsEnabledTow = ref('1');//是否启用
|
|||
|
|
const multiple = ref(true); //是否多选
|
|||
|
|
const total = ref(0); //总数
|
|||
|
|
|
|||
|
|
const data = reactive({
|
|||
|
|
form: {},
|
|||
|
|
queryParams: { // 查询参数
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 20,
|
|||
|
|
orderByColumn: 'sort_no',
|
|||
|
|
isAsc: 'asc',
|
|||
|
|
currencyCode: useInitData.dictInitData.currencyCode||useInitData.currencyCode,
|
|||
|
|
platformType: '',
|
|||
|
|
popularCategory: '',
|
|||
|
|
name: null,
|
|||
|
|
popularType: null
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
popularCategoryList: [
|
|||
|
|
{
|
|||
|
|
label: proxy.t('热门类别'),
|
|||
|
|
value: ''
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: proxy.t('平台'),
|
|||
|
|
value: '1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: proxy.t('子游戏'),
|
|||
|
|
value: '2'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { queryParams, form, rules, popularCategoryList } = toRefs(data);
|
|||
|
|
/** 查询热门管理列表 */
|
|||
|
|
function getList() {
|
|||
|
|
loading.value = true;
|
|||
|
|
queryParams.value.popularType = props.popularType
|
|||
|
|
game.listPopular(queryParams.value).then(response => {
|
|||
|
|
gameList.value = response.rows;
|
|||
|
|
total.value = response.total;
|
|||
|
|
loading.value = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 搜索按钮操作 */
|
|||
|
|
function handleQuery() {
|
|||
|
|
queryParams.value.pageNum = 1;
|
|||
|
|
getList();
|
|||
|
|
useInitData.setStateData('currencyCode', String(queryParams.value.currencyCode));
|
|||
|
|
}
|
|||
|
|
const handleUp = (type)=>{
|
|||
|
|
emits('updateGames', type);
|
|||
|
|
}
|
|||
|
|
// 同时监听两个值props.hotOne,props.hotTwo的变化来确定是true 还是false,1就是false 2就是true
|
|||
|
|
watch(() => [props.hotOne, props.hotTwo], ([hotOne, hotTwo]) => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
IsEnabledOne.value = hotOne;
|
|||
|
|
IsEnabledTow.value = hotTwo;
|
|||
|
|
});
|
|||
|
|
},{ immediate: true })
|
|||
|
|
/** 重置按钮操作 */
|
|||
|
|
function resetQuery() {
|
|||
|
|
queryParams.value.pageNum = 1;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 多选框选中数据
|
|||
|
|
function handleSelectionChange(selection) {
|
|||
|
|
ids.value = selection.map(item => item.id);
|
|||
|
|
single.value = selection.length != 1;
|
|||
|
|
multiple.value = !selection.length;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 移除按钮操作 */
|
|||
|
|
function handleDelete(row) {
|
|||
|
|
const _ids = row.id || ids.value;
|
|||
|
|
proxy.$modal.confirm(proxy.t('是否确认移除"') + row.gameName + '"？').then(function () {
|
|||
|
|
return game.delPopular(_ids);
|
|||
|
|
}).then(() => {
|
|||
|
|
getList();
|
|||
|
|
proxy.$modal.msgSuccess(proxy.t('移除成功'));
|
|||
|
|
}).catch(() => { });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拖拽结束事件
|
|||
|
|
const dragEnd = (row) => {
|
|||
|
|
game.popularSort(row).then(() => {
|
|||
|
|
if (row.isTop) {
|
|||
|
|
proxy.$modal.msgSuccess(proxy.t('置顶成功'));
|
|||
|
|
}
|
|||
|
|
getList();
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听 popularType 的变化
|
|||
|
|
watch(() => props.popularType, (newVal, oldVal) => {
|
|||
|
|
// 你可以在这里添加更多的逻辑
|
|||
|
|
resetQuery();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
getList();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss"></style>
|