advises-admin/src/views/main/formworkErection/channelAdmin.vue

<template>
  <div class="layout-container">
    <!-- 菜单栏 -->
    <From :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset"
      is_add_button="新增" @addForm="edit" />

    <!-- 表格 -->
    <div class="layout-container">
      <Table @getTableData="changeTableData" v-model:page="page" ref="table" :data="tableData"
        @selection-change="handleSelectionChange">
        <el-table-column prop="channelId" label="渠道ID" />
        <el-table-column prop="channelName" label="渠道名称" />
        <el-table-column prop="loginType" label="登录类型"  >
          <template #default="scope">
            {{getDictionaryName("login_type",scope.row.loginType)}}
          </template>
        </el-table-column>
        <el-table-column prop="channelAccount" label="渠道账号"  />
        <el-table-column prop="channelPwd" label="渠道密码" />
        <el-table-column prop="channelStatus" label="渠道状态" >
          <template #default="scope">
            {{getDictionaryName("channel_status", scope.row.channelStatus)}}
          </template>
        </el-table-column>
        <el-table-column prop="apiKey" label="API秘钥"  />
        <el-table-column prop="apiSecret" label="API密令" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <div class="button">
              <el-button class="button-item" type="primary" style="margin-bottom: 5px;" @click="edit(scope.row)">
                编辑
              </el-button>
              <el-button class="button-item" type="success" style="margin-bottom: 5px;" @click="lookDetails(scope.row)">
                查看详情
              </el-button>
              <el-popconfirm placement="left" title="确认删除该用户?" @confirm="removeItem(scope.row)">
                <template #reference>
                  <el-button class="button-item" style="margin-bottom: 5px;" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </Table>
    </div>

    <!-- 操作弹窗 -->
    <el-dialog v-model="layer.show" :title="layer.title" fullscreen :before-close="close">
      <el-form :model="formEdit" :rules="rules" ref="ruleForm" label-width="240px" style="margin-right:30px;">
        <div style="display: flex;width: 100%;">
          <div style="flex: 1;">
            <el-form-item label="渠道ID：" required prop="formEditbannedLimit">
              <el-input v-model="formEdit.formEditbannedLimit" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="渠道名称：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="渠道类型：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="所属代理：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="游戏名字：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="APP应用：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="游戏分类：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="最低版本：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="打包版本：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="打包code：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="更新方式：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="取回原数据：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="分成：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="显示提示语：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
          </div>
          <div style="flex: 1;">
            <el-form-item label="日志级别：" required prop="bannedReason">
              <el-select v-model="value" :disabled="layer.enabled" placeholder="请输入" style="width: 240px">
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="实名：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="登录：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="异常玩家登录：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="使用巨量SDK：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="使用快手SDK：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="一级风控：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="允许手机号登录：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="微信登录：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="游客登录：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="限IMEI登录：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="全服任务开关：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="提现加Q群：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="提现校验：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>

          </div>
          <div style="flex: 1;">
            <el-form-item label="展示底部导航：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="显示提现入口：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="显示QQ群：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="显示邀新：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="邀请方式：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="邀请绑定方式：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="显示积分：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="启动模式：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="是否跳过权限获取：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="权限没有完全授予时允许登陆：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="看广告：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="异常玩家是否允许看广告：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="获取定位：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="读取应用列表：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
          </div>

          <div style="flex: 1;">
            <el-form-item label="读取sim卡状态：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="读取定位信息：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="读取storage信息：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="读取host：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="读取DNS：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="读取无障碍服务：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="读取VPN状态：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="后台切前台是否检查：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="是否开启短视频：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="兑换：" required prop="bannedReason">
              <el-switch v-model="formEdit.bannedReason" :disabled="layer.enabled" active-text="开启"
                inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="充值：" required prop="bannedReason">
              <el-select v-model="value" :disabled="layer.enabled" placeholder="请输入" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="无操作X秒弹插屏：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="每日最大广告数：" required prop="bannedReason">
              <el-input v-model="formEdit.bannedReason" :disabled="layer.enabled" placeholder="请输入" clearable />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="layer.show = false">取消</el-button>
          <el-button v-if="!layer.enabled" type="primary" @click="submit(ruleForm)">
            确定
          </el-button>
          <el-button v-else type="primary" @click="edit(detailData)">
            切换到编辑
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { onBeforeMount, ref, reactive } from "vue";
  import From from "@/components/from/index.vue";
  import Table from "@/components/table/index.vue";
  import { useGetDictList } from '@/hooks/useGetDictList.js'
  import { useStore } from 'vuex'
  import {channelList} from "@/api/formworkErection";

  const store = useStore()
  const { dictData, loadDictData, getOptions, getDictionaryName } = useGetDictList();
  const form = ref(null);
  const tableData = ref([]);

  // 分页参数, 供table使用
  const page = reactive({
    pageNum: 1,
    pageSize: 20,
    limit: 20,
    total: 0,
  });

  const formSearch = ref({
    channelOrigin: null,// 渠道来源
    channelType: null,// 渠道类型
    lastLoginTime: '',// 最新登录时间
    limit: 20,// 当前页数量(查询量)
    nickName: null,// 用户昵称
    page: 1,// 当前页码
    pageSizes: 20,// 总页数
    registryTime: null,// 注册时间
    total: null,// 总条数
    userType: null,// 用户类型
  });

  const dynamicFormItems = ref([])

  onBeforeMount(() => {
    settingData()
    getList();
  });

  // 获取缓存数据设置筛选数据
  const settingData = () => {
    loadDictData().then(() => {
      dynamicFormItems.value = [
        {
          label: '渠道ID',
          prop: 'nickName',
          type: 'input',
        },
        {
          label: '渠道名称',
          prop: 'nickName',
          type: 'input',
        },
        {
          label: '游戏名字',
          prop: 'nickName',
          type: 'input',
        },
        {
          label: '渠道类型',
          prop: 'channelType',
          type: 'select',
          options: [
            {
              label: "全部",
              value: null,
            },
            {
              label: "是",
              value: 0,
            },
            {
              label: "否",
              value: 1,
            }
          ]
        },
        {
          label: '所属代理',
          prop: 'channelType',
          type: 'select',
          options: [
            {
              label: "全部",
              value: null,
            },
            {
              label: "是",
              value: 0,
            },
            {
              label: "否",
              value: 1,
            }
          ]
        },
        {
          label: 'APP应用',
          prop: 'channelType',
          type: 'select',
          options: [
            {
              label: "全部",
              value: null,
            },
            {
              label: "是",
              value: 0,
            },
            {
              label: "否",
              value: 1,
            }
          ]
        },
        {
          label: '游戏分类',
          prop: 'channelType',
          type: 'select',
          options: [
            {
              label: "全部",
              value: null,
            },
            {
              label: "是",
              value: 0,
            },
            {
              label: "否",
              value: 1,
            }
          ]
        },
        {
          label: '邀请方式',
          prop: 'channelType',
          type: 'select',
          options: [
            {
              label: "全部",
              value: null,
            },
            {
              label: "是",
              value: 0,
            },
            {
              label: "否",
              value: 1,
            }
          ]
        },
        {
          label: '邀请绑定方式',
          prop: 'channelType',
          type: 'select',
          options: [
            {
              label: "全部",
              value: null,
            },
            {
              label: "是",
              value: 0,
            },
            {
              label: "否",
              value: 1,
            }
          ]
        },
        {
          label: '更换包名目标渠道',
          prop: 'channelType',
          type: 'select',
          options: [
            {
              label: "全部",
              value: null,
            },
            {
              label: "是",
              value: 0,
            },
            {
              label: "否",
              value: 1,
            }
          ]
        },
        // { label: '登录日期', prop: 'loginTime', type: 'daterange' },
      ]
    })
  }

  // 分页数据
  const getList = async () => {
    let res = await channelList({ ...formSearch.value });
    tableData.value = res.data;
    page.total = res.pageMeta.total;
  };

  const changeTableData = () => {
    formSearch.value.pageNum = page.pageNum;
    formSearch.value.pageSize = page.pageSize;
    formSearch.value.limit = page.limit;
    // 分页切换
    getList();
  };

  // 搜索
  const handleFormSubmitted = (formData) => {
    // console.log("接收到子组件传递的数据", formData);
    formSearch.value.page = 1;
    formSearch.value.pageSizes = 20;
    formSearch.value.total = page.total;
    formSearch.value.limit = 20;
    formSearch.value.nickName = formData.nickName;
    formSearch.value.channelOrigin = formData.channelOrigin;
    formSearch.value.channelType = formData.channelType;
    formSearch.value.userType = formData.userType;
    formSearch.value.lastLoginTime = formData.lastLoginTime || null
    formSearch.value.registryTime = formData.registryTime || null

    getList();
  };

  // 表单重置
  const handleFormReset = () => {
    formSearch.value = {
      channelOrigin: null,// 渠道来源
      channelType: null,// 渠道类型
      lastLoginTime: null,// 最新登录时间
      limit: 20,// 当前页数量(查询量)
      nickName: null,// 用户昵称
      page: 1,// 当前页码
      pageSizes: 20,// 总页数
      registryTime: null,// 注册时间
      total: null,// 总条数
      userType: null,// 用户类型
    };
    getList();
  };

  // 选择监听器
  const handleSelectionChange = (val) => {
    context.emit("selection-change", val)
  }

  // 弹窗
  const layer = ref({
    show: false,
    title: "新增渠道类型",
    showButton: true,
    width: '90vw',
    enabled: false, //查看详情时关闭其他
  });

  const formEdit = ref({
    bannedLimit: null, //封禁期限
    bannedReason: '',//封禁原因
    bannedTargetId: '',//封禁目标ID
    bannedType: '',//封禁类型 1-渠道 2-平台
    operator: '',//操作人
    operatorName: '',//操作人名称
    userId: '', //用户ID
  })

  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ]

  const edit = (row) => {
    ruleForm.value?.resetFields()
    if (row) {
      layer.value.title = '编辑渠道类型'
    } else {
      layer.value.title = '新增渠道类型'
    }
    layer.value.show = true
    layer.value.enabled = false

  }

  const ruleForm = ref(null);

  const rules = reactive({
    formEditbannedLimit: [
      { required: true, message: "请输入封禁期限", trigger: "blur" },
    ],
    bannedReason: [
      {
        required: true,
        message: "请输入封禁原因",
        trigger: "blur",
      },
    ],
  });

  const submit = async (formEl) => {
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        // 提交内容

        layer.value.show = false
      } else {
        console.log("error submit!", fields);
      }
    })
  }

  const detailData = ref({})

  const lookDetails = (row) => {
    detailData.value = row
    layer.value.show = true
    layer.value.enabled = true
    layer.value.title = `查看${row.appName}渠道详情`
  }

  const close = () => {
    layer.value.show = false
  }

  // 删除
  const removeItem = async (row) => {
    console.log('删除', row)
  }

</script>

<style scoped lang="scss">
  .layout-container {

    .card {
      .title {
        margin-bottom: 10px;
        font-weight: 600;
      }

      display: flex;
      flex-direction: column;
      align-items: start;
      width: calc(100% - 60px);
      margin: 30px 30px 0;
    }

    .button {
      display: flex;
      flex-direction: column;

      .button-item {
        margin: 4px;
      }
    }
  }
</style>