Game-Backstage-Management-System/src/views/AppManage/EventMangeTable.vue

<script setup lang="ts">
import Table from '@/components/Table.vue'
import Dialog from '@/components/common/Dialog.vue'
import { useRequest } from '@/hooks/useRequest'
import { useCommonStore } from '@/stores/useCommon'

import type { TablePaginationSetting, TableFieldInfo, QueryInfo, SelectInfo } from '@/types/table'
import { FieldSpecialEffectType, FilterType } from '@/types/table'
import type { ReqConfig } from '@/types/dataAnalysis'
import type { FormRules } from 'element-plus'
import { type DialogConfig } from '@/types/dialog'
import { FormFieldType } from '@/types/form'
import type { FormField } from '@/types/form'

import { reactive, ref, watch } from 'vue'

import router from '@/router'

const { selectInfo } = useCommonStore()

const { AllApi } = useRequest()

const eventDialog = ref()

const eventTable = ref<InstanceType<typeof Table> | null>(null)

// 主要为了给面包屑导航提供信息
const emits = defineEmits(['enterDetail', 'upload'])

// 表格分页设置
const pagingConfig = reactive<TablePaginationSetting>({
  limit: 20,
  currentPage: 1,
  total: 0,
  pagesizeList: [20, 30]
})

// 表格字段信息
const tableFieldsInfo = reactive<Array<TableFieldInfo>>([
  {
    name: 'id',
    cnName: 'ID',
    isShow: true,
    needSort: true
  },
  {
    name: 'gid',
    cnName: '游戏ID',
    isShow: true,
    needSort: false
  },
  {
    name: 'actionId',
    cnName: '事件ID',
    isShow: true,
    needSort: false
  },
  {
    name: 'actionName',
    cnName: '事件名称',
    isShow: true,
    needSort: false
  },
  {
    name: 'status',
    cnName: '事件状态',
    isShow: true,
    needSort: false,
    specialEffect: {
      type: FieldSpecialEffectType.STATE,
      othnerInfo: {
        text: ['已使用', '已停用']
      }
    }
  },
  {
    name: 'remark',
    cnName: '备注',
    isShow: true,
    needSort: false
  },
  {
    name: 'createdAt',
    cnName: '创建时间',
    isShow: true,
    needSort: false
  },
  {
    name: 'updatedAt',
    cnName: '更新时间',
    isShow: true,
    needSort: false
  }
])

// 表格请求配置
const requestConfig = reactive<ReqConfig>({
  url: AllApi.gameActionList,
  otherOptions: {
    gid: selectInfo.gid
  }
})

// 事件类型查询信息
const eventStatus: Array<SelectInfo> = [
  {
    name: 'all',
    cnName: '全部',
    value: ''
  },
  {
    name: 'use',
    cnName: '启用',
    value: '1'
  },
  {
    name: 'nouse',
    cnName: '禁用',
    value: '0'
  }
]

// 查询字段设置
const queryInfo: Array<QueryInfo> = [
  {
    name: 'search',
    label: '',
    type: FilterType.INPUT,
    placeholder: '请输入事件名搜索',
    default: ''
  },
  {
    name: 'status',
    label: '事件状态',
    type: FilterType.SELECT,
    placeholder: '请选择事件类型',
    otherOption: eventStatus,
    default: ''
  }
]

// 对话框表单规则字段
const dilogRuleForm = reactive({
  actionId: '',
  actionName: '',
  remark: '',
  status: ''
})

// 对话表单规则
const dialogRules = reactive<FormRules<typeof dilogRuleForm>>({
  actionId: [
    { required: true, message: '事件ID是必填项', trigger: 'blur' },
    { min: 1, max: 10, message: '事件ID长度必须在1到10之间', trigger: 'blur' }
  ],
  actionName: [
    { required: true, message: '事件名称是必填项', trigger: 'blur' },
    { min: 5, max: 20, message: '事件名称长度必须在5到20之间', trigger: 'blur' }
  ],
  remark: [
    { required: false, message: '备注是可选项', trigger: 'blur' },
    { max: 100, message: '备注长度不能超过100个字符', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '是否启用是必选项', trigger: 'change' },
    { type: 'number', message: '启用状态必须是数字', trigger: 'change' }
  ]
})

// 对话框请求参数
const dialogReq = reactive<ReqConfig>({
  url: AllApi.setGameAction,
  otherOptions: {
    formData: {
      gid: selectInfo.gid
    }
  }
})

// 对话框表单字段信息
const FormFields: Array<FormField> = [
  {
    name: 'actionId',
    cnName: '事件ID',
    type: FormFieldType.INPUT
  },
  {
    name: 'actionName',
    cnName: '事件名称',
    type: FormFieldType.INPUT
  },
  {
    name: 'remark',
    cnName: '备注',
    type: FormFieldType.RICHTEXT
  },
  {
    name: 'status',
    cnName: '是否启用',
    type: FormFieldType.SELECT,
    otherOptions: {
      placeholder: '请选择启用状态',
      options: [
        {
          name: 'use',
          label: '启用',
          value: 1
        },
        {
          name: 'nouse',
          label: '禁用',
          value: 0
        }
      ]
    }
  }
]

// 对话框需要的props
const dialogInfo = reactive<DialogConfig>({
  title: '新增事件',
  rules: dialogRules,
  reqConfig: dialogReq,
  fieldsInfo: FormFields
})

/**
 * @description: 查看详情，同时触发事件给面包屑导航
 * @param {*} row 行信息
 * @return {*}
 */
const viewDetails = (row: any) => {
  if (row.id) {
    emits('enterDetail', {
      name: row.actionName,
      pathName: 'EventDetail'
    })

    router.push({
      name: 'EventDetail',
      query: { id: row.id }
    })
  } else {
    throw new Error('no id')
  }
}

/**
 * @description: 触发新增
 * @return {*}
 */
const addNewEvent = () => {
  eventDialog.value.addForm()
}

/**
 * @description: 表单提交
 * @return {*}
 */
const subForm = () => {
  if (eventTable.value) {
    eventTable.value.getData()
  }
}

/**
 * @description: 更新表格数据
 * @return {*}
 */
const updateData = () => {
  eventTable.value?.getData()
}

watch(
  () => selectInfo.gid,
  (val: string) => {
    requestConfig.otherOptions.gid = val
    dialogReq.otherOptions.formData.gid = val // 把对话框的form表单的gid也改了
    // requestConfig.otherOptions.formData.gid = val
  }
)

defineExpose({
  updateData
})
</script>

<template>
  <div>
    <Table
      ref="eventTable"
      :need-rowindex="false"
      :request-config="requestConfig"
      :open-page-query="true"
      :pagination-config="pagingConfig"
      :table-fields-info="tableFieldsInfo"
      :query-info="queryInfo"
      :need-left-tools="true"
      :open-filter-query="true"
      :need-right-tools="true"
      @add-new-item="addNewEvent"
    >
      <template #tableOperation>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-text class="operationBtn" type="primary" @click="viewDetails(scope.row)"
              >详情</el-text
            >
          </template>
        </el-table-column>
      </template>
    </Table>
    <div class="eventDialog">
      <Dialog ref="eventDialog" @form-submit="subForm" :config="dialogInfo"></Dialog>
    </div>
  </div>
</template>

<style scoped>
.operationBtn {
  cursor: pointer;
}
</style>