<template>
<div class="related-events">
<el-dialog
title="选择关联赛事"
lock-scroll="true"
v-model="dialogVisible"
width="1000px"
custom-class="related-events-dialog"
>
<el-input
v-model="param.keys"
class="w-50 m-2"
placeholder="活动ID、活动名称"
style="width: 350px"
:suffix-icon="Search"
@input="onSearch"
/>
<div class="table-cont dialog-table-scroll">
<el-table
ref="multipleTable"
:data="state.matchList"
tooltip-effect="dark"
style="width: 100%"
:row-key="rowKey"
@row-click="rowClick"
@selection-change="handleSelectionChange"
highlight-current-row
>
<el-table-column type="selection" width="60" align="center">
</el-table-column>
<el-table-column prop="id" label="活动ID" width="80">
</el-table-column>
<el-table-column
prop="name"
min-label="活动名称"
width="140"
show-overflow-tooltip
>
</el-table-column>
<el-table-column prop="type" label="活动类型" width="80">
</el-table-column>
<el-table-column
prop="describe"
min-label="活动描述"
width="140"
show-overflow-tooltip
>
<template v-slot="scope">{{ scope.row.describe || "-" }}</template>
</el-table-column>
<el-table-column prop="start_time" label="开始时间" width="160">
<template v-slot="scope">{{
scope.row.start_time || "-"
}}</template>
</el-table-column>
<el-table-column prop="end_time" label="结束时间" width="160">
<template v-slot="scope">{{ scope.row.end_time || "-" }}</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" width="160">
</el-table-column>
<el-table-column label="banner图" width="100">
<template v-slot="scope">
<template v-if="scope.row.img_url">
<el-image
class="small-picture-size36"
:src="scope.row.img_url"
fit="scale-down"
:preview-src-list="[scope.row.img_url]"
:preview-teleported="true"
></el-image>
</template>
<span v-else>-</span></template
>
</el-table-column>
</el-table>
</div>
<div class="pagination-box">
<gf-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:pageIndex="param.page"
:pageSize="param.size"
:total="state.total"
>
</gf-pagination>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="onSave"> 保存 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { query_related_events_list } from "/@/api/officeWebsite";
import { HttpResponse } from "/@/api/httpResponse";
import GfPagination from "/@/components/gf-table/gf-pagination.vue";
import { Search } from "@element-plus/icons";
import { debounce } from "/@/utils/debounce";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false);
const multipleTable = ref();
const state = reactive({
loading: false,
total: 0,
/** 关联赛事列表 */
matchList: [] as any,
multipleSelection: [] as any
});
/**
* 参数
* @param keys {string} 搜索框 (活动ID,活动名称)
* @param page {integer} 页码
* @param size {integer} 页数
*/
const param = ref({
keys: "",
page: 1,
size: 10
});
const getCurentParam = () => {
return {
keys: param.value.keys || "",
page: param.value.page,
size: param.value.size
};
};
const openRelate = () => {
dialogVisible.value = true;
};
defineExpose({
openRelate
});
// 赛事列表查询
const queryList = async (): Promise<any> => {
state.loading = true;
const { code, data, total } = (await query_related_events_list({
...getCurentParam()
})) as HttpResponse;
if (code == 200 && data) {
let result = data || [];
state.matchList = result;
state.total = total;
}
state.loading = false;
};
/** 搜索 */
const onSearch = async () => {
param.value.page = 1;
debounce(await queryList(), 50);
};
// 分页相关
const handleSizeChange = (val: any) => {
param.value.page = 1;
param.value.size = val;
queryList();
};
const handleCurrentChange = (val: any) => {
param.value.page = val;
queryList();
};
// 只选中一条数据
const handleSelectionChange = (list: any) => {
state.multipleSelection = [];
if (list.length > 1) {
multipleTable.value.clearSelection();
multipleTable.value.toggleRowSelection(list[list.length - 1]);
}
state.multipleSelection = [list[list.length - 1]];
};
// 点击整行选中数据
const rowKey = row => {
return row.id;
};
const rowClick = row => {
multipleTable.value.toggleRowSelection(row);
};
const emit = defineEmits(["childEvent"]);
const onSave = () => {
if (state.multipleSelection.length > 0) {
emit("childEvent", state.multipleSelection[0]);
dialogVisible.value = false;
} else {
ElMessage({
type: "warning",
message: "请选择要关联的赛事"
});
return;
}
};
queryList();
</script>
<style lang="scss">
// 可以写在公共样式里
.related-events {
/**找到表头那一行,然后把里面的复选框隐藏掉**/
.el-table__header-wrapper .el-checkbox {
display: none;
}
/**
*** 因为我们的需求是去掉复选框顶部的全选按钮后,需要填充别的文字,
*** 所以才添加了下面的这个样式, 这个样式按需添加
**/
.el-table__header-wrapper
.el-table-column--selection.el-table__cell
.cell:before {
content: "选择";
}
// 复选框变单选框
.el-checkbox .el-checkbox__inner {
border-radius: 50%;
}
}
</style>
<style lang="scss" scoped>
.related-events {
.table-cont {
max-height: 400px;
overflow-y: auto;
}
.gf-gagination {
margin: 25px 0 0 0 !important;
}
.small-picture-size36 {
width: 36px;
height: 36px;
}
.small-picture-size36:not(:last-child) {
margin-right: 8px;
}
.pagination-box {
.gf-gagination {
justify-content: center;
}
}
}
</style>
el-table点击选中整行,限制一次只能选择一条
最新推荐文章于 2024-08-29 11:48:39 发布