peko-admin-web/src/views/room/GameAdmin.vue

<template>
  <div class="box">
    <!-- 查询 -->
    <div class="inquire" style="display: inline-block; margin-right: 20px">
      <span class="demonstration">地区:</span>
      <el-select v-model="inquire.partitionFlag" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.partitionFlag"
          :label="item.label"
          :value="item.partitionFlag"
        >
        </el-option>
      </el-select>
    </div>

    <!-- 查询按钮 -->
    <el-button class="primary" type="primary" @click="getData()"
      >查询</el-button
    >

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="mgId" align="center" label="游戏ID" />

      <el-table-column prop="name" align="center" label="游戏名称" />

      <el-table-column prop="partitionFlag" align="center" label="所属地区">
        <template v-slot="scope">{{
          scope.row.partitionFlag == 1
            ? "英语区"
            : scope.row.partitionFlag == 2
            ? "阿拉伯语区"
            : scope.row.partitionFlag == 4
            ? "华语区"
            : "全部"
        }}</template>
      </el-table-column>

      <el-table-column prop="isShow" align="center" label="是否展示">
        <template v-slot="scope">{{
          scope.row.isShow == 0 ? "否" : scope.row.isShow == 1 ? "是" : "/"
        }}</template>
      </el-table-column>

      <!-- <el-table-column prop="roomFlag" align="center" label="展示房间类型">
        <template v-slot="scope">{{
          (scope.row.roomFlag & 1) != 0
            ? "游戏房"
            : (scope.row.roomFlag & 2) != 0
            ? "牌照房"
            : (scope.row.roomFlag & 4) != 0
            ? "普通房"
            : "/"
        }}</template>
      </el-table-column> -->

      <el-table-column prop="isAuthority" align="center" label="是否限制">
        <template v-slot="scope">{{
          scope.row.isAuthority == 0
            ? "否"
            : scope.row.isAuthority == 1
            ? "是"
            : "/"
        }}</template>
      </el-table-column>

      <el-table-column prop="roleFlag" align="center" label="可开启角色">
        <template v-slot="scope">{{
          (scope.row.roleFlag & 1) != 0
            ? "房主"
            : (scope.row.roleFlag & 2) != 0
            ? "管理员"
            : "/"
        }}</template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template v-slot="scope">
          <el-button
            @click="ediClick(scope)"
            class="primary"
            type="primary"
            size="default"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialog" title="编辑" width="28%" center>
      <!-- 游戏ID -->
      <div style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >游戏ID</span
        >
        <el-input
          v-model="ediObj.gameId"
          style="width: 75%"
          class="input"
          disabled
        ></el-input>
      </div>
      <!-- 游戏昵称 -->
      <div style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >游戏昵称(中文)</span
        >
        <el-input
          v-model="ediObj.gameNick"
          style="width: 75%"
          class="input"
          disabled
        ></el-input>
      </div>
      <!-- 所属地区 -->
      <div style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >所属地区</span
        >
        <el-checkbox-group v-model="ediObj.checkList">
          <el-checkbox label="华语区"></el-checkbox>
          <el-checkbox label="英语区"></el-checkbox>
          <el-checkbox label="阿拉伯语区"></el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 是否展示 -->
      <div style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >是否展示</span
        >
        <el-select v-model="ediObj.value1" placeholder="请选择">
          <el-option
            v-for="item in ediObj.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 是否限制 -->
      <div v-show="ediObj.value1" style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >是否限制</span
        >
        <el-select v-model="ediObj.value2" placeholder="请选择">
          <el-option
            v-for="item in ediObj.options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 可开启角色 -->
      <div v-show="ediObj.value1" style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; margin-right: 20px"
          class="col-sm-2 control-label"
          >可开启角色</span
        >
        <el-checkbox-group v-model="ediObj.checkList2">
          <el-checkbox label="房主"></el-checkbox>
          <el-checkbox label="管理员"></el-checkbox>
        </el-checkbox-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button type="primary" @click="editDialogClick()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 10px; display: none"
      class="paginationClass"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { mgList, save } from "@/api/gameAdmin/gameAdmin";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
  name: "GameAdmin",
  data() {
    return {
      loading: false,
      //查询所需条件对象
      inquire: {
        partitionFlag: "",
        time: "",
      },
      //   选择器
      options: [
        {
          partitionFlag: 1,
          label: "英语区",
        },
        {
          partitionFlag: 2,
          label: "阿拉伯语区",
        },
        {
          partitionFlag: 4,
          label: "华语区",
        },
        {
          partitionFlag: "",
          label: "全部",
        },
      ],
      // 表格
      tableData: [],
      //   控制编辑弹窗
      editDialog: false,
      editDiaData: {},
      ediObj: {
        gameId: "",
        gameNick: "",
        checkList: [],
        value1: 0,
        options: [
          {
            value: 1,
            label: "是",
          },
          {
            value: 0,
            label: "否",
          },
        ],
        value2: 0,
        options2: [
          {
            value: 1,
            label: "是",
          },
          {
            value: 0,
            label: "否",
          },
        ],
        checkList2: [],
      },
      // 分页
      total: 10, //总页数
      currentPage: 1, //页码
      pageSize: 10, //条数
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 查询接口
    getData() {
      this.loading = true;
      let time = this.inquire.time;
      let startTime = "";
      let endTime = "";
      if (time && time.length > 0) {
        startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      console.log(this.inquire);
      mgList({ partitionFlag: this.inquire.partitionFlag }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          ElMessage({
            showClose: true,
            message: res.message,
            type: "success",
          });
          this.loading = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
          this.loading = false;
        }
      });
    },
    // 编辑按钮
    ediClick(scope) {
      this.editDialog = true;
      this.editDiaData = scope.row;
      var obj = this.editDiaData;
      this.ediObj.gameId = obj.mgIdStr;
      this.ediObj.gameNick = JSON.parse(obj.name).zh;
      this.ediObj.checkList =
        obj.partitionFlag == 0 || obj.partitionFlag == ""
          ? ["华语区", "英语区", "阿拉伯语区"]
          : obj.partitionFlag == 1
          ? ["英语区"]
          : obj.partitionFlag == 2
          ? ["阿拉伯区"]
          : ["华语区"];
      this.ediObj.value1 = obj.isShow == false ? 0 : 1;
      this.ediObj.value2 = obj.isAuthority;
      this.ediObj.checkList2 =
        (obj.roleFlag & 1) != 0
          ? ["房主"]
          : (obj.roleFlag & 2) != 0
          ? ["管理员"]
          : [];
    },
    // 确认编辑按钮
    editDialogClick() {
      var obj = {
        mgIdStr: this.ediObj.gameId,
        name: this.ediObj.gameNick,
        partitionFlag: this.districtFun(1),
        isShow: this.ediObj.value1,
        isAuthority: this.ediObj.value2,
        roleFlag: this.districtFun(2),
      };
      console.log(obj);
      save(obj).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "success",
          });
          this.editDialog = false;
          this.getData();
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 计算数值
    districtFun(type) {
      var num = 0;
      var district;
      if (type == 1) {
        district = {
          华语区: 4,
          英语区: 1,
          阿拉伯语区: 2,
        };
        this.ediObj.checkList.forEach((res, i) => {
          num += district[res];
        });
      } else {
        district = {
          房主: 1,
          管理员: 2,
        };
        this.ediObj.checkList2.forEach((res, i) => {
          num += district[res];
        });
      }
      return num;
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  .inquire {
    display: inline-block;
    margin-right: 20px;
    span {
      margin-right: 10px;
    }
    .input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }
  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
</style>