log-server-web/src/view/gameTarget/txTarget.vue

<template>
    <div>
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="任务Id">
            <el-input v-model="searchInfo.task_id" placeholder="任务ID" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="searchInfo.user" placeholder="负责人" />
          </el-form-item>
          <el-form-item label="日期" prop="create_date">
          <el-date-picker
            v-model="searchInfo.create_date"
            popper-class="picker-popovers"
            class="timefilter"
            type="datetime"
            placeholder="选择日期时间"
            value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
            <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="gva-table-box">
        <el-table :data="tableData" border @sort-change="sortChange" @selection-change="handleSelectionChange">
          <el-table-column label="任务日期" min-width="70" prop="create_date" />
          <el-table-column label="任务名称" min-width="80" prop="task_name" sortable="custom" />
          <el-table-column label="负责人" min-width="60" prop="user" sortable="custom" />
          <el-table-column label="新增目标" min-width="45" prop="new_target" />
          <el-table-column  label="新增完成" min-width="45" prop="new_complete" />
          <el-table-column  label="留存目标" min-width="45" prop="retained_target" />
          <el-table-column label="留存完成" min-width="45" prop="retained_complete" />
          <el-table-column  label="付费目标" min-width="45" prop="pay_target" />
          <el-table-column  label="付费完成" min-width="45" prop="pay_complete" />
          <el-table-column  label="付费流水" min-width="45" prop="amount"/>
          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button
                icon="edit"
                size="small"
                type="primary"
                link
                @click="editCardFunc(scope.row)"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
  
      </div>
  
      <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
        <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px" :inline="true">

          <el-form-item label="任务名称" prop="task_name">
            <el-input v-model="form.task_name" autocomplete="off" :disabled="true"/>
          </el-form-item>
          <el-form-item label="负责人" prop="user" >
            <el-input v-model="form.user" autocomplete="off" :disabled="true"/>
          </el-form-item>
          <el-form-item label="任务日期" prop="create_date" >
            <el-input v-model="form.create_date" autocomplete="off" :disabled="true"/>
          </el-form-item>
        </el-form>
        <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px" :inline="true">
                <el-form-item  label="新增目标" prop="new_target">
                <el-input v-model="form.new_target" autocomplete="off" />
              </el-form-item>
              <el-form-item label="付费目标" prop="pay_target">
                <el-input v-model="form.pay_target" autocomplete="off"/>
              </el-form-item>
            </el-form>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="closeDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TxTargetTask',
  }
  </script>
  
  <script setup>
  import {
    getGameTaskTargetById,
    updateGameTaskTarget,
    getGameTxTaskList,
  } from '@/api/task'
  import { toSQLLine } from '@/utils/stringFun'
  import warningBar from '@/components/warningBar/warningBar.vue'
  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'



  
  const apis = ref([])
  const rules = ref({
    task_id: [{ required: true, message: '输入任务ID', trigger: 'blur' }],
    task_name: [
      { required: true, message: '请输入任务名称', trigger: 'blur' }
    ],
    user: [
      { required: true, message: '请输入使用者', trigger: 'blur' }
    ],
    new_retained: [
      { required: true, message: '请选择重要参数', trigger: 'blur' }
    ],
    game_name: [
      { required: true, message: '请选择游戏', trigger: 'blur' }
    ],
    date: [
      { required: true, message: '请选择开始时间', trigger: 'blur' }
    ],
    game_port_id: [
      { required: true, message: '请选择游戏端口', trigger: 'blur' }
    ],
    account_type: [
      { required: true, message: '请选择账号类型', trigger: 'blur' }
    ],
    login_method: [
      { required: true, message: '请选择登录方式', trigger: 'blur' }
    ],
    tx_channel: [
      { required: true, message: '请输入腾讯渠道号', trigger: 'blur' }
    ],
    mz_channel: [
      { required: true, message: '请输入魅族渠道号', trigger: 'blur' }
    ],
    new_target: [
      { required: true, message: '请输入新增目标', trigger: 'blur' }
    ],
    pay_target: [
      { required: true, message: '请输入付费目标', trigger: 'blur' }
    ],
    retained_target: [
      { required: true, message: '请输入留存目标', trigger: 'blur' }
    ],
    retained_target: [
      { required: true, message: '请输入付费单价', trigger: 'blur' }
    ]
  })
  const form = ref({
    task_id: '',
    task_name: '',
    user: '',
    new_retained: '1',
    game_name:'',
    date:'',
    game_port_id:'',
    account_type:'',
    login_method:'',
    tx_channel:'',
    tx_game_id:'',
    mz_channel:'',
    mz_game_id:'',
    game_id_xmy:'',
    new_target:'',
    pay_target:'',
    retained_target:'',
    pay_price:'',
    free:-1
  })
  const GamePortOptions = ref([
    {
      id: 1,
      name: '腾讯游戏',
    },
    {
      id: 2,
      name: '360游戏',
    },
    {
      id: 3,
      name: '网易游戏',
    },
    {
      id: 4,
      name: '酷派游戏',
    },
    {
      id: 5,
      name: '魅族游戏',
    },
  ])

  const accountTypeOptions = ref([
    {
      id: 1,
      name: '小绵羊账号',
    },
    {
      id: 2,
      name: 'QQ账号',
    },
    {
      id: 3,
      name: '魅族账号',
    },
    {
      id: 4,
      name: '华为账号',
    },
    {
      id: 5,
      name: '测试类型',
    },
    {
      id: 6,
      name: '微信',
    },
    {
      id: 7,
      name: '微信+QQ',
    },
  ])

  const loginMethodOptions = ref([
    {
      id: 1,
      name: '小绵羊登录',
    },
    {
      id: 2,
      name: '魅族账号登录',
    },
    {
      id: 3,
      name: 'QQ账号登录',
    },
    {
      id: 4,
      name: '网易账号登录',
    },
    {
      id: 5,
      name: '微信授权登录',
    },
    {
      id: 6,
      name: '微信+QQ授权登录',
    },
  ])

  const FreeMethodOptions = ref([
    {
      id: 1,
      name: 'QQ卡',
    },
    {
      id: 2,
      name: '微信',
    },
    {
      id: 3,
      name: '支付宝',
    },
    {
      id: 4,
      name: '银行卡',
    },
  ])
  // 新增可控按钮
const addBtn = (form) => {
  if (!form.card_list) {
    form.card_list = []
  }
  form.card_list.push({
    card: '',
    amount: 0
  })
}
// 删除可控按钮
const deleteBtn = async(btns, index) => {
  const btn = btns[index]
  if (btn.ID === 0) {
    btns.splice(index, 1)
    return
  }
  btns.splice(index, 1)

}
  
  const type = ref('')
  
  
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({})
  
  const onReset = () => {
    searchInfo.value = {}
  }
  // 搜索
  
  const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    searchInfo.value.task_id = Number(searchInfo.value.task_id)
    getTableData()
  }
  
  // 分页
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }
  
  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }
  
  // 排序
  const sortChange = ({ prop, order }) => {
    if (prop) {
      if (prop === 'id') {
        prop = 'id'
      }
      searchInfo.value.orderKey = toSQLLine(prop)
      searchInfo.value.desc = order === 'descending'
    }
    getTableData()
  }
  
  // 查询
  const getTableData = async() => {
    const table = await getGameTxTaskList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
      tableData.value = table.data.list
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }
  
  getTableData()
  
  // 批量操作
  const handleSelectionChange = (val) => {
    apis.value = val
  }
  
  const deleteVisible = ref(false)
  
  const onClose = async() => {
    const ids = apis.value.map(item => item.id)
    console.log(ids)
    const status = -1
    const res = await colsePc({ ids,status })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: res.msg
      })
      if (tableData.value.length === ids.length && page.value > 1) {
        page.value--
      }
      deleteVisible.value = false
      getTableData()
    }
  }
  
  const onOpen = async() => {
    const ids = apis.value.map(item => item.id)
    console.log(ids)
    const status = 1
    const res = await colsePc({ ids,status })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: res.msg
      })
      if (tableData.value.length === ids.length && page.value > 1) {
        page.value--
      }
      deleteVisible.value = false
      getTableData()
    }
  }
  
  // 弹窗相关
  const apiForm = ref(null)
  const initForm = () => {
    apiForm.value.resetFields()
    form.value = {
      task_id: '',
      task_name: '',
      user: '',
      new_retained: '1',
      game_name:'',
      date:'',
      game_port_id:'',
      account_type:'',
      login_method:'',
      tx_channel:'',
      tx_game_id:'',
      mz_channel:'',
      mz_game_id:'',
      game_id_xmy:'',
      new_target:'',
      pay_target:'',
      retained_target:'',
      pay_price:'',
    }
  }
  
  const dialogTitle = ref('新增')
  const dialogFormVisible = ref(false)
  const openDialog = (key) => {
    switch (key) {
      case 'addCard':
        dialogTitle.value = '新增'
        form.value.is_add = 1
        break
      case 'edit':
        dialogTitle.value = '编辑'
        form.value.is_add = 0
        break
      default:
        break
    }
    type.value = key
    dialogFormVisible.value = true
  }
  const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
  }
  
  const editCardFunc = async(row) => {
    const res = await getGameTaskTargetById({ id: row.task_id, create_date:row.create_date })
    if (res.code === 0) {
      form.value = res.data
      openDialog('edit')
    }
    
  }
  
  const enterDialog = async() => {
    apiForm.value.validate(async valid => {
      form.value.task_id = Number(form.value.task_id)
      form.value.new_target = Number(form.value.new_target)
      form.value.pay_price = Number(form.value.pay_price)
      form.value.pay_target = Number(form.value.pay_target)
      form.value.retained_target = Number(form.value.retained_target)
      form.value.hand_new_complete = Number(form.value.hand_new_complete)
      form.value.hand_retained_complete = Number(form.value.hand_retained_complete)
      form.value.hand_pay_complete = Number(form.value.hand_pay_complete)
      form.value.hand_amount_total = Number(form.value.hand_amount_total)
      form.value.is_free = Number(form.value.is_free)
      form.value.free_method = Number(form.value.free_method)
      form.value.is_upload_xjf = Number(form.value.is_upload_xjf)
      form.value.is_upload_wt = Number(form.value.is_upload_wt)
      if (valid) {
        switch (type.value) {
          case 'edit':
            {
              const res = await updateGameTaskTarget(form.value)
              if (res.code === 0) {
                ElMessage({
                  type: 'success',
                  message: '编辑成功',
                  showClose: true
                })
              }
              getTableData()
              closeDialog()
            }
            break
          default:
            // eslint-disable-next-line no-lone-blocks
            {
              ElMessage({
                type: 'error',
                message: '未知操作',
                showClose: true
              })
            }
            break
        }
      }
    })
  }
  
  const deleteApiFunc = async(row) => {
    ElMessageBox.confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async() => {
        const res = await deleteGameTask(row)
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功!'
          })
          if (tableData.value.length === 1 && page.value > 1) {
            page.value--
          }
          getTableData()
        }
      })
  }

  const switchEnable = async(row) => {
    const res = await statusOperation({task_id:row.task_id, status:row.status})
    if (res.code === 0) {
      ElMessage({ type: 'success', message: `${row.status === -1 ? '停止' : '开启'}成功` })
    }
}

const links = ref([])

const querySearch = (queryString, cb) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value
  // call callback function to return suggestion objects
  cb(results)
}
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { game_id: 1, game_name: '龙腾传世' },
    { game_id: 2, game_name: '龙皇传说' },
    { game_id: 3, game_name: '龙之国物语' },
    { game_id: 4, game_name: '黑月' },
    { game_id: 5, game_name: '麻将来了' },
    { game_id: 6, game_name: '鸿途归来' },
    { game_id: 7, game_name: '魔力宝贝归来' },
  ]
}
const handleSelect = (item) => {
  form.value.game_id = item.game_id
  console.log(item)
}

const handleIconClick = (ev) => {
  console.log(ev)
}

links.value = loadAll()
  
  </script>
  
  <style scoped lang="scss">
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  :deep(.el-tabs__nav-scroll){
	width:35%;
	margin:0 auto
}
:deep(.el-tabs__nav-scroll)
  .warning {
    color: #dc143c;
  }
  </style>