linquan
1 month ago
11 changed files with 434 additions and 31 deletions
@ -0,0 +1,92 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-dialog :title="isNew?'新增渠道':'修改渠道信息'" v-model="isShowDialog" width="769px"> |
||||||
|
<el-form label-width="90px" label-position="right"> |
||||||
|
<el-form-item label="名称" prop="label"> |
||||||
|
<el-input v-model="queryParams.label" placeholder="请输入名称" size="large" style="width: 220px"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="渠道编号" prop="value"> |
||||||
|
<el-input v-model="queryParams.value" placeholder="请输入渠道编号" size="large" style="width: 220px"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="排序" prop="sort"> |
||||||
|
<el-input v-model="queryParams.sort" placeholder="请输入排序" size="large" style="width: 220px"/> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<span class="dialog-footer"> |
||||||
|
<el-button @click="onCancel" size="default">取 消</el-button> |
||||||
|
<el-button size="default" type="primary" class="ml10" @click="addItem"> |
||||||
|
<el-icon> |
||||||
|
<ele-EditPen/> |
||||||
|
</el-icon> |
||||||
|
<div v-if="isNew">新增</div> |
||||||
|
<div v-else>修改</div> |
||||||
|
</el-button> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import {reactive, toRefs, defineComponent} from 'vue'; |
||||||
|
import {ElLoading} from "element-plus"; |
||||||
|
import {gameAddChannel} from "/@/api/game"; |
||||||
|
|
||||||
|
interface TableDataState { |
||||||
|
isShowDialog: boolean, |
||||||
|
isNew: boolean, |
||||||
|
queryParams: object; |
||||||
|
channels: object[]; |
||||||
|
} |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'gameServerConfigEdit', |
||||||
|
setup(prop, {emit}) { |
||||||
|
const state = reactive<TableDataState>({ |
||||||
|
isShowDialog: false, |
||||||
|
isNew: false, |
||||||
|
queryParams: {}, |
||||||
|
channels: [], |
||||||
|
}); |
||||||
|
// 打开弹窗 |
||||||
|
const openDialog = (row: any | null) => { |
||||||
|
state.isShowDialog = true; |
||||||
|
state.isNew = !row; |
||||||
|
state.queryParams = row || {}; |
||||||
|
}; |
||||||
|
// 关闭弹窗 |
||||||
|
const closeDialog = () => { |
||||||
|
state.isShowDialog = false; |
||||||
|
}; |
||||||
|
// 取消 |
||||||
|
const onCancel = () => { |
||||||
|
closeDialog(); |
||||||
|
}; |
||||||
|
// 新增 |
||||||
|
const addItem = () => { |
||||||
|
const loading = ElLoading.service({ |
||||||
|
lock: true, |
||||||
|
text: 'Loading', |
||||||
|
background: 'rgba(0, 0, 0, 0.7)', |
||||||
|
}); |
||||||
|
|
||||||
|
gameAddChannel(state.queryParams).then((res) => { |
||||||
|
console.log(res); |
||||||
|
}).finally(function () { |
||||||
|
loading.close(); |
||||||
|
emit('countList') |
||||||
|
closeDialog(); |
||||||
|
}); |
||||||
|
|
||||||
|
}; |
||||||
|
return { |
||||||
|
openDialog, |
||||||
|
closeDialog, |
||||||
|
onCancel, |
||||||
|
addItem, |
||||||
|
...toRefs(state), |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<!-- <el-card shadow="hover" header="">--> |
||||||
|
<!-- <div class="mb15">--> |
||||||
|
<el-form class="flex-warp" label-position="right"> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="success" class="ml10" @click="reloadServer"> |
||||||
|
<el-icon> |
||||||
|
<ele-FolderAdd /> |
||||||
|
</el-icon> |
||||||
|
重载配置 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="success" class="ml10" @click="countList"> 刷新列表</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="success" class="ml10" @click="onOpenAddDic"> 添加</el-button> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-table :data="tableData.data" style="width: 100%" stripe border> |
||||||
|
<el-table-column type="index" label="序号" width="60" /> |
||||||
|
<el-table-column prop="label" label="名称" width="180" /> |
||||||
|
<el-table-column prop="value" label="渠道编号" width="260" /> |
||||||
|
<el-table-column prop="sort" label="排序" width="180" /> |
||||||
|
<el-table-column> |
||||||
|
<template #default="scope"> |
||||||
|
<el-button size="small" type="success" @click="onOpenEditDic(scope.row)">修改</el-button> |
||||||
|
<el-button size="small" type="danger" @click="delLoginUrl(scope.row.id)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<el-row justify="space-evenly"> |
||||||
|
<el-pagination |
||||||
|
:hide-on-single-page="true" |
||||||
|
v-model:page-size="tableData.params.pageSize" |
||||||
|
:pager-count="5" |
||||||
|
v-model:current-page="tableData.params.pageNum" |
||||||
|
layout="total, prev, pager, next" |
||||||
|
:total="tableData.total" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
/> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<EditConfig ref="editDicRef" @countList="countList" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { toRefs, reactive, onMounted, defineComponent, ref } from 'vue'; |
||||||
|
import EditConfig from '/@/views/gameLoginUrl/channelList/component/editConfig.vue'; |
||||||
|
import { gameReloadServer, gameGetChannel, gameDelChannel } from '/@/api/game'; |
||||||
|
import { PLATFORM } from '/@/api/common/consts'; |
||||||
|
|
||||||
|
// 定义接口来定义对象的类型 |
||||||
|
interface TableData { |
||||||
|
id: number; |
||||||
|
ip: string; |
||||||
|
} |
||||||
|
|
||||||
|
interface TableDataState { |
||||||
|
tableData: { |
||||||
|
data: Array<TableData>; |
||||||
|
total: number; |
||||||
|
params: { |
||||||
|
pageNum: number; |
||||||
|
pageSize: number; |
||||||
|
}; |
||||||
|
}; |
||||||
|
platform: Array<{ label: string; value: string }>; |
||||||
|
} |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'apiV1ServerConfig', |
||||||
|
components: { EditConfig }, |
||||||
|
setup() { |
||||||
|
const editDicRef = ref(); |
||||||
|
const state = reactive<TableDataState>({ |
||||||
|
platform: PLATFORM, |
||||||
|
tableData: { |
||||||
|
data: [], |
||||||
|
total: 0, |
||||||
|
params: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
// 打开新增字典弹窗 |
||||||
|
const onOpenAddDic = () => { |
||||||
|
editDicRef.value.openDialog(); |
||||||
|
}; |
||||||
|
// 打开修改字典弹窗 |
||||||
|
const onOpenEditDic = (row: TableData) => { |
||||||
|
editDicRef.value.openDialog(row); |
||||||
|
}; |
||||||
|
const countList = () => { |
||||||
|
gameGetChannel(state.tableData.params).then((res) => { |
||||||
|
console.log('countList:', res); |
||||||
|
state.tableData.total = res.data.total || 1; |
||||||
|
state.tableData.data = res.data.list ?? []; |
||||||
|
console.log('countList:', state.tableData); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const delLoginUrl = (id: number) => { |
||||||
|
gameDelChannel({ id: id }).then((res) => { |
||||||
|
countList(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const reloadServer = () => { |
||||||
|
gameReloadServer({ sType: 2 }).then((res) => { |
||||||
|
console.log(res); |
||||||
|
}); |
||||||
|
}; |
||||||
|
const handleCurrentChange = (val: number) => { |
||||||
|
state.tableData.params.pageNum = val; |
||||||
|
countList(); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
countList(); |
||||||
|
}); |
||||||
|
return { |
||||||
|
editDicRef, |
||||||
|
handleCurrentChange, |
||||||
|
countList, |
||||||
|
onOpenAddDic, |
||||||
|
onOpenEditDic, |
||||||
|
delLoginUrl, |
||||||
|
reloadServer, |
||||||
|
...toRefs(state), |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.el-form-item { |
||||||
|
display: -moz-flex; |
||||||
|
vertical-align: middle; |
||||||
|
margin-right: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { |
||||||
|
background: #ffffd5; |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep .el-table .el-table--enable-row-hover .el-table__body tr:hover > td { |
||||||
|
background: inherit; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue