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