CloudGamingAdmin/admin-client/src/views/Apps/Ext/T_App_Configs/Index.vue
2024-12-04 14:22:48 +08:00

386 lines
9.2 KiB
Vue

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { FormInstance } from "ant-design-vue";
import { useAuthority } from "@/utils/Authority";
import AppIcon from "@/core/components/AppIcon.vue";
import Info from "./Info.vue";
import Tools from "@/core/utils/Tools";
import PageContainerGame from "@/core/components/PageContainerGame.vue";
import TableCurdV1 from "@/core/components/curd/TableCurdV1.vue";
import T_App_ConfigService from "@/services/apps/Ext/T_App_ConfigService";
defineOptions({ name: "t_App_ConfigIndex" });
var columns = [
{
dataIndex: "name",
title: "配置名称",
show: true,
width: 80,
sorter: true,
},
{
dataIndex: "configType",
title: "配置类型",
show: true,
width: 80,
sorter: true,
},
{
dataIndex: "actionId",
title: "配置值类型",
show: false,
width: 120,
sorter: true,
},
{
dataIndex: "configValue",
title: "配置值",
show: true,
width: 500,
sorter: true,
},
{
dataIndex: "isEnabled",
title: "是否启用",
show: true,
width: 80,
sorter: true,
},
{
dataIndex: "desc",
title: "备注",
show: true,
width: 40,
sorter: true,
},
{
dataIndex: "channelId",
title: "渠道号",
show: true,
width: 60,
sorter: true,
},
{
dataIndex: "plat",
title: "平台类型",
show: true,
width: 80,
sorter: true,
},
{
dataIndex: "appVersion",
title: "app版本号",
show: true,
width: 120,
sorter: true,
},
{
dataIndex: "continent",
title: "州",
show: false,
width: 20,
sorter: true,
},
{
dataIndex: "countryName",
title: "国家",
show: false,
width: 40,
sorter: true,
},
{
dataIndex: "creatTime",
title: "创建时间",
show: true,
width: 80,
sorter: true,
},
{
dataIndex: "updateTime",
title: "修改时间",
show: true,
width: 80,
sorter: true,
},
];
const state = reactive({
search: {
state: true,
vm: {
configtype: undefined,
name: undefined,
},
sort: [] as any[],
},
loading: false,
page: 1,
size: 50,
total: 100,
columns: [] as any,
data: [] as any,
});
//权限
const power = useAuthority();
//表格
const refTableCurd = ref<InstanceType<typeof TableCurdV1>>();
//表单操作对象
const refInfo = ref<InstanceType<typeof Info>>();
//检索表单
const refSearchForm = ref<FormInstance>();
/**
* 初始化
*/
onMounted(() => {
findList();
});
/**
*获取数据
*/
async function findList() {
try {
state.loading = true;
const result = await T_App_ConfigService.findList(
state.page,
state.size,
state.search.vm,
state.search.sort
);
state.loading = false;
if (result.code != 200) return;
state.page = result.data.page;
state.size = result.data.size;
state.total = result.data.total;
state.columns = columns; // result.data.columns;
state.data = result.data.dataSource;
// state.visible = false;
} catch (error) {
state.loading = false;
}
}
/**
* 删除数据
* @param id
*/
async function deleteList(id?: string) {
let ids: string[] = [];
if (id) {
ids.push(id);
} else {
ids = refTableCurd.value?.getSelectedRowKeys() ?? [];
}
if (ids.length == 0) return Tools.message.error("请选择要删除的行!");
try {
state.loading = true;
const result = await T_App_ConfigService.deleteList(ids);
state.loading = false;
if (result.code != 200) return;
Tools.message.success("删除成功!");
findList();
} catch (error) {
state.loading = false;
}
}
/**
* 导出excel
*/
function exportExcel() {
T_App_ConfigService.exportExcel(state.search.vm, state.search.sort);
}
</script>
<template>
<PageContainerGame>
<TableCurdV1
ref="refTableCurd"
:config="state"
@change="
(changeTable) => {
state.page = changeTable.pagination.current ?? 1;
state.size = changeTable.pagination.pageSize ?? state.size;
state.search.sort =
changeTable.sorter instanceof Array
? [...changeTable.sorter]
: [changeTable.sorter];
findList();
}
"
@show-size-change="
({ current, size }) => {
state.page = current == 0 ? 1 : current;
state.size = size;
findList();
}
"
>
<!-- search -->
<template #search>
<a-form
ref="refSearchForm"
:model="state.search.vm"
v-if="power.search"
>
<a-row :gutter="[16, 0]">
<a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
<a-form-item class="mb-0" name="name" label="配置类型">
<h-common-select
code="appconfigManage_type"
v-model="state.search.vm.configtype"
:ShowAll="true"
:defaultValue="0"
/>
</a-form-item>
</a-col>
<a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
<a-form-item class="mb-0" name="name" label="配置名称">
<a-input
v-model:value="state.search.vm.name"
placeholder="配置名称"
/>
</a-form-item>
</a-col>
<!--button-->
<a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="text-right">
<a-space :size="8">
<a-button
@click="
state.page = 1;
refSearchForm?.resetFields();
findList();
"
>
重置
</a-button>
<a-button
type="primary"
@click="
state.page = 1;
findList();
"
>
查询
</a-button>
</a-space>
</a-col>
</a-row>
</a-form>
</template>
<!-- toolbar-left -->
<template #toolbar-left>
<!-- <a-button @click="state.search.state = !state.search.state" v-if="power.search">
<div v-if="state.search.state"><AppIcon name="UpOutlined" />&nbsp;&nbsp;收起</div>
<div v-else><AppIcon name="DownOutlined" />&nbsp;&nbsp;展开</div>
</a-button> -->
<a-button
type="primary"
@click="() => refInfo?.open()"
v-if="power.insert"
>
<template #icon>
<AppIcon name="PlusOutlined" />
</template>
新建
</a-button>
<a-popconfirm
title="您确定要删除?"
@confirm="deleteList()"
okText="确定"
cancelText="取消"
v-if="power.delete"
>
<a-button type="primary" danger>
<template #icon>
<AppIcon name="DeleteOutlined" />
</template>
批量删除
</a-button>
</a-popconfirm>
</template>
<!-- toolbar-right -->
<template #toolbar-right>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="exportExcel()"
>导出 Excel</a-menu-item
>
</a-menu>
</template>
<a-button> 更多 <AppIcon name="ellipsis-outlined" /> </a-button>
</a-dropdown>
</template>
<!-- table-col -->
<template #table-col>
<template
v-for="item,index in state.columns.filter((w:any) => w.dataIndex !== 'id' && w.show)"
:key="item.dataIndex"
>
<a-table-column
:title="item.title"
:width="item.width"
:data-index="item.dataIndex"
:sorter="item.sort ? { multiple: index + 1 } : false"
>
<template
#default="{ record }"
v-if="item.dataIndex === 'configValue'"
>
<div
v-html="record.configValue"
style="max-height: 200px; overflow: auto"
></div>
</template>
</a-table-column>
</template>
<!-- 操作 -->
<a-table-column
title="操作"
data-index="id"
:width="200"
fixed="right"
v-if="power.update || power.delete"
>
<template #default="{ record }">
<a-button
type="link"
@click="() => refInfo?.open(record.id)"
v-if="power.update"
>编辑</a-button
>
<a-divider type="vertical" />
<a-popconfirm
title="您确定要删除?"
@confirm="deleteList(record.id)"
okText="确定"
cancelText="取消"
v-if="power.delete"
>
<a-button type="link" danger>删除</a-button>
</a-popconfirm>
</template>
</a-table-column>
</template>
</TableCurdV1>
<!-- Info -->
<Info ref="refInfo" :onSuccess="() => findList()" />
</PageContainerGame>
</template>