<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="游戏名称" prop="gameId">
<el-input
v-model="queryParams.gameName"
placeholder="请输入游戏名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="add"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="update"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="postList"
@selection-change="getgamelist"
>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="游戏编号" align="center" prop="gameId" /> -->
<el-table-column label="游戏名称" align="center" prop="gameName" />
<el-table-column label="游戏图片" prop="gameUrl" align="center">
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="baseUrl + scope.row.gameUrl"
fit="cover"
>
</el-image>
</template>
</el-table-column>
<el-table-column label="游戏推荐" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isRecommend"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
active-text="推荐"
inactive-text="不推荐"
@change="test(scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="游戏价格" align="center" prop="gamePrice" />
<el-table-column
:show-overflow-tooltip="true"
label="游戏介绍"
align="center"
prop="gameIntroduce"
/>
<el-table-column label="上架时间" align="center" prop="gameGrounding" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="update(scope.row)"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改对话框 -->
<el-dialog :title="title" :visible="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="游戏名称" prop="gameName">
<el-input v-model="form.gameName" placeholder="请输入游戏名称" />
</el-form-item>
<div class="input">
游戏介绍
<el-input
type="textarea"
:rows="2"
placeholder="请输入游戏介绍"
v-model="form.gameIntroduce"
>
<!-- v-model双向绑定，把写进去的东西传到库里 -->
</el-input>
</div>
<div class="prise">
<el-form-item label="游戏价格" prop="gamePrice" style="margin: auto">
<el-input v-model="form.gamePrice" placeholder="请输入游戏价格" />
</el-form-item>
</div>
<div class="tui">
<el-form-item label="是否推荐" prop="isRecommend">
<el-switch
v-model="form.isRecommend"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</el-form-item>
</div>
<el-form-item label="上架时间" prop="gameGrounding">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="form.gameGrounding"
type="date"
placeholder="选择日期"
>
</el-date-picker>
<!-- 选择日期yyyy-mm-dd为时间格式 -->
</el-form-item>
<el-upload
class="avatar-uploader"
:action="baseUrl + '/common/upload'"
:show-file-list="false"
:headers="headers"
:on-success="xwjdsb"
>
<!-- show-file-list是否显示已上传文件列表,dialogImageUrl为自己上传的图片 -->
<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div style="font-weight: bolder" class="type">
请选择游戏分类
<el-select
v-model="form.value1"
multiple
placeholder="请选择"
@change="slectchange"
>
<el-option
v-for="item in options"
:key="item.categoryId"
:label="item.categoryName"
:value="item.categoryId"
>
</el-option>
</el-select>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
gameList,
add,
del,
update,
gettypelist,
getinfo,
} from "../../api/game/gamelist.js";
import { getToken } from "@/utils/auth";
export default {
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
dialogImageUrl: "",
headers: {
Authorization: "Bearer " + getToken(),
},
dialogVisible: false,
// imageUrl: "",
value: 2,
options: [],
// gjdsb: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 岗位表格数据
postList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
gamename: undefined,
},
// 表单参数
form: {
value1: [],
},
// 表单校验
rules: {
isRecommend: [{ required: true, message: "是否推荐", trigger: "blur" }],
gameIntroduce: [
{ required: true, message: "游戏介绍不能为空", trigger: "blur" },
],
gameGrounding: [
{ required: true, message: "请输入上架时间", trigger: "blur" },
],
gamePrice: [
{ required: true, message: "请输入游戏价格", trigger: "blur" },
],
gameName: [
{ required: true, message: "游戏名称不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getList();
this.typelist();
},
methods: {
test(row) {
let query = {
gameId: row.gameId,
isRecommend: !row.isRecommend ? 0 : 1,
};
update(query).then((res) => {
this.getList();
});
},
slectchange() {
this.$forceUpdate();
},
xwjdsb(file) {
console.log(file);
this.form.upload = file.fileName;
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl);
},
typelist() {
gettypelist().then((res) => {
this.options = res.data;
});
},
/** 查询列表 */
getList() {
this.loading = true;
gameList(this.queryParams).then((response) => {
console.log(response.rows);
this.postList = response.rows;
// console.log(this.postList);
this.total = response.total;
this.loading = false;
this.$forceUpdate();
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.dialogImageUrl = "";
},
// 表单重置
reset() {
this.form = {
value1: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
getgamelist(selection) {
this.ids = selection.map((item) => item.gameId);
// console.log(selection);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
add() {
this.reset();
this.open = true;
this.title = "添加游戏";
},
/** 修改按钮操作 */
update(row) {
this.reset();
let gameId = row.gameId || this.ids[0];
getinfo(gameId).then((response) => {
console.log(response);
this.form = response.data;
this.form.value1 = [];
response.data.gameCategoryList.forEach((element) => {
this.form.value1.push(element.categoryId);
});
console.log(this.form.value1);
this.dialogImageUrl = response.data.gameUrl
? `http://192.168.50.87:8888` + response.data.gameUrl
: "";
this.dialogVisible = true;
this.open = true;
this.title = "修改游戏";
});
},
/** 提交按钮 */
submitForm: function () {
if (this.form.gameId) {
}
console.log(this.form.value1);
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.gameId != undefined) {
//修改数据结构
let gameInfo = {
gameId: this.form.gameId + "",
gamePrice: +this.form.gamePrice,
gameName: this.form.gameName,
isRecommend: this.form.isRecommend + "",
gameIntroduce: this.form.gameIntroduce,
gameGrounding: this.form.gameGrounding,
categoryId: this.form.value1,
gameUrl: this.form.upload,
};
console.log(gameInfo);
update(gameInfo).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.reset();
this.dialogVisible = false;
this.dialogImageUrl = "";
this.getList();
});
} else {
//新增数据结构
let query = {
gameInfo: {
gamePrice: +this.form.gamePrice,
gameName: this.form.gameName,
isRecommend: this.form.isRecommend,
gameIntroduce: this.form.gameIntroduce,
gameGrounding: this.form.gameGrounding,
gameUrl: this.form.upload,
},
categoryId: this.form.value1,
};
add(query).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.reset();
this.dialogVisible = false;
this.dialogImageUrl = "";
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const gameIds = row.gameId || this.ids;
this.$modal
.confirm('是否确认删除游戏编号为"' + gameIds + '"的数据项？')
.then(function () {
return del(gameIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/post/export",
{
...this.queryParams,
},
`post_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
<style>
.tuijian {
color: green;
}
.butuijian {
color: red;
}
.input {
display: flex;
font-weight: bolder;
margin-left: 15px;
}
.prise {
margin-top: 15px;
}
.tui {
margin-top: 10px;
}
.type {
margin-top: 20px;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
扫一扫
1146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
