Browse Source

fix(GameMangeView): 修复刷新BUG;新增重复提示功能;

修复了修改和新增后,表格内容不刷新的BUG;

现在在新增时,会检查是否是重复GID和重复游戏名,相同则会给出提示,并禁止提交
fxs 5 months ago
parent
commit
664f6ce2e0
2 changed files with 80 additions and 5 deletions
  1. 1 1
      src/hooks/useTable.ts
  2. 79 4
      src/views/Home/InfoManage/GameManageView.vue

+ 1 - 1
src/hooks/useTable.ts

@@ -77,7 +77,7 @@ export function useTable(
         } else {
           paginationSetting.total = dataList.length
         }
-
+        console.log(paginationSetting.total)
         // 处理有头像的字段
         dataList = setDefaultHead(dataList)
 

+ 79 - 4
src/views/Home/InfoManage/GameManageView.vue

@@ -25,6 +25,17 @@ import Dialog from '@/components/common/CustomDialog.vue'
 import Table from '@/components/table/CustomTable.vue'
 import axiosInstance from '@/utils/axios/axiosInstance.ts'
 
+interface GameInfo {
+  gameName: string
+  gid: string
+  ttAppid: string
+  ttSecret: string
+  wxAppid: string
+  wxSecret: string
+  ttTplId: string
+  wxTplId: string
+}
+
 const { allGameInfo } = useCommonStore()
 const { AllApi } = useRequest()
 
@@ -41,7 +52,7 @@ const requestConfig = reactive({
 })
 
 // 表格数据
-const tableData = reactive<Array<any>>([])
+const tableData = reactive<Array<GameInfo>>([])
 
 // 配置分页数据
 const paginationConfig: TablePaginationSetting = {
@@ -149,6 +160,64 @@ const gameFormRule = reactive({
   wxSecret: ''
 })
 
+// 判断当前是否是新增弹窗
+// 只有新增的时候才需要校验GID和游戏名是否重复
+const isAddDialog = ref(false)
+
+/**
+ * 校验GID有没有重复
+ *
+ * @param _rule 规则,可忽略
+ * @param value 值
+ * @param callback 回调函数
+ */
+const checkGid = (_rule: any, value: any, callback: any) => {
+  if (!value) {
+    return callback(new Error('请输入游戏ID'))
+  }
+  if (!isAddDialog.value) {
+    callback()
+    return
+  }
+  setTimeout(() => {
+    for (let i = 0; i < tableData.length; i++) {
+      if (tableData[i].gid === value) {
+        callback(new Error('游戏ID已存在'))
+        break
+      }
+    }
+    callback()
+  }, 10)
+}
+
+/**
+ * 校验游戏名
+ *
+ * 主要对已经存在的游戏名进行校验
+ *
+ * @param _rule 规则,可忽略
+ * @param value 值
+ * @param callback 回调函数
+ */
+const checkGameName = (_rule: any, value: any, callback: any) => {
+  if (!value) {
+    return callback(new Error('请输入游戏名'))
+  }
+  if (!isAddDialog.value) {
+    callback()
+    return
+  }
+  setTimeout(() => {
+    for (let i = 0; i < tableData.length; i++) {
+      if (tableData[i].gameName === value) {
+        callback(new Error('游戏名已存在'))
+        break
+      }
+    }
+    callback()
+  }, 10)
+}
+
 // 表单规则
 const gameRules = reactive<FormRules<typeof gameFormRule>>({
   gameName: [
@@ -162,6 +231,10 @@ const gameRules = reactive<FormRules<typeof gameFormRule>>({
       max: 64,
       trigger: 'blur',
       message: '最短1位,最长64位'
+    },
+    {
+      validator: checkGameName,
+      trigger: 'blur'
     }
   ],
   gid: [
@@ -175,7 +248,8 @@ const gameRules = reactive<FormRules<typeof gameFormRule>>({
       max: 10,
       trigger: 'blur',
       message: '最短1位,最长10位'
-    }
+    },
+    { validator: checkGid, trigger: 'blur' }
   ],
   ttAppid: [
     {
@@ -295,10 +369,12 @@ const gameDialogConfig = reactive<DialogConfig>({
 })
 
 const addNewItem = () => {
+  isAddDialog.value = true
   gameDialogRef.value.addForm()
 }
 
 const handleEdit = (row: any) => {
+  isAddDialog.value = false
   gameDialogRef.value.editForm(row)
 }
 
@@ -314,8 +390,7 @@ const formSub = (formData: any, type: number) => {
       game.gameName = formData.gameName
     }
   }
-
-  gameTableRef.value?.updateTableData()
+  getTableData()
 }
 
 const getTableData = async () => {