refactor(TableColumn组件): 拆分表格字段展示部分代码，形成TableColumn组件

components.d.ts

@@ -46,10 +46,10 @@ declare module 'vue' {
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./src/components/form/FileUpload.vue')['default']
-    FilterInput: typeof import('./src/components/form/TableFilterForm/FilterInput.vue')['default']
+    FilterInput: typeof import('./src/components/table/TableFilterForm/FilterInput.vue')['default']
     FilterPopover: typeof import('./src/components/toolsBtn/FilterPopover.vue')['default']
-    FilterSelect: typeof import('./src/components/form/TableFilterForm/FilterSelect.vue')['default']
-    FilterSelectLabel: typeof import('./src/components/form/TableFilterForm/FilterSelectLabel.vue')['default']
+    FilterSelect: typeof import('./src/components/table/TableFilterForm/FilterSelect.vue')['default']
+    FilterSelectLabel: typeof import('./src/components/table/TableFilterForm/FilterSelectLabel.vue')['default']
     HeaderCard: typeof import('./src/components/dataAnalysis/HeaderCard.vue')['default']
     IconIcBaselineVisibility: typeof import('~icons/ic/baseline-visibility')['default']
     IconIcBaselineVisibilityOff: typeof import('~icons/ic/baseline-visibility-off')['default']
@@ -63,8 +63,9 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StatisticText: typeof import('./src/components/dataAnalysis/StatisticText.vue')['default']
+    TableColumn: typeof import('./src/components/table/TableColumn/TableColumn.vue')['default']
     TableFieldText: typeof import('./src/components/table/TableFieldText.vue')['default']
-    TableFilterForm: typeof import('./src/components/form/TableFilterForm/TableFilterForm.vue')['default']
+    TableFilterForm: typeof import('./src/components/table/TableFilterForm/TableFilterForm.vue')['default']
     TableTools: typeof import('./src/components/table/TableTools.vue')['default']
     TemporalTrend: typeof import('./src/components/dataAnalysis/TemporalTrend.vue')['default']
     TimeLineChart: typeof import('./src/components/echarts/TimeLineChart.vue')['default']

src/components/common/CustomDialog.vue

@@ -1,5 +1,13 @@
 <!--
  * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-09-18
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-12-03
+ * @Description: 
+ * 
+-->
+<!--
+ * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-09-04 11:21:05
  * @LastEditors: fxs bjnsfxs@163.com
  * @LastEditTime: 2024-10-14 16:57:09
@@ -56,7 +64,6 @@ const submitGameChange = () => {
   dialogFormRef.value
     ?.submitFormData()
     .then(() => {
-      // console.log(dialogConfigInfo.reqConfig.otherOptions.formData.gid )
       dialogConfig.dialogVisible = false
     })
     .catch(() => {})

src/components/dataAnalysis/TemporalTrend.vue

@@ -111,7 +111,7 @@ const createTableField = () => {
   //  生成表格的字段信息
 
   tableFieldsInfo.splice(0, tableFieldsInfo.length)
-  console.log(props.tableFieldsInfo, activeTab.value)
+
   for (const [key, value] of Object.entries(props.tableFieldsInfo[activeTab.value])) {
     // 根据传入的信息，生成table需要的字段信息
     tableFieldsInfo.push({
@@ -121,7 +121,6 @@ const createTableField = () => {
       needSort: false
     })
   }
-  console.log(tableFieldsInfo)
 }
 
 /**
@@ -156,7 +155,7 @@ const createTableData = (data: any) => {
   }
 
   tableDataList.splice(0, tableDataList.length, ...newList)
-  console.log(JSON.parse(JSON.stringify(tableDataList)))
+
   paginationConfig.total = xInfo.length
 }
 
@@ -328,8 +327,6 @@ watch(
 )
 
 onMounted(() => {
-  // getData(1)
-  console.log(props.tabInfo)
   if (props.tabInfo) activeTab.value = props.tabInfo[0].name
 })
 </script>

src/components/form/CustomFilter.vue

@@ -49,7 +49,6 @@ const filterList = reactive<
  * 初始化过滤条件的列表
  */
 const initFilterList = () => {
-  console.log(props.customFilterList)
   filterList.splice(0, filterList.length, ...JSON.parse(JSON.stringify(props.customFilterList)))
 }
 

src/components/table/CustomTable.vue

@@ -18,10 +18,10 @@ import { useTable } from '@/hooks/useTable.ts'
 import { useRequest } from '@/hooks/useRequest.ts'
 import { computed, onMounted, reactive, ref, toRaw, watch } from 'vue'
 
-import TableFilterForm from '../form/TableFilterForm/TableFilterForm.vue'
-import TableFieldText from './TableFieldText.vue'
+import TableFilterForm from '@/components/table/TableFilterForm/TableFilterForm.vue'
 import axiosInstance from '@/utils/axios/axiosInstance.ts'
 import TableTools from './TableTools.vue'
+import TableColumn from './TableColumn/TableColumn.vue'
 
 type TableFilterFormRef = InstanceType<typeof TableFilterForm>
 
@@ -518,61 +518,11 @@ onMounted(() => {
             :sortable="item.needSort ? 'custom' : false"
           >
             <template v-slot="scope">
-              <!-- 头像类 -->
-              <el-image
-                v-if="item.specialEffect?.type === FieldSpecialEffectType.IMG"
-                :preview-teleported="true"
-                :src="scope.row[item.name]"
-                :preview-src-list="[scope.row[item.name]]"
-                style="width: 35px; height: 35px"
-                :fit="'fill'"
-                :hide-on-click-modal="true"
-              >
-                <template #error>
-                  <!--  -->
-                  <img
-                    alt="头像"
-                    style="width: 35px; height: 35px"
-                    :src="blobUrlInfo.defaultHead"
-                  />
-                </template>
-              </el-image>
-
-              <!-- 文字类 -->
-              <!-- :value="tableTextFieldVal(item, scope)" -->
-              <span v-else-if="item.specialEffect?.type === FieldSpecialEffectType.TEXT">
-                <TableFieldText :special-effect="item.specialEffect" :value="scope.row[item.name]">
-                </TableFieldText>
-              </span>
-
-              <!-- 开关类 -->
-
-              <el-switch
-                :active-value="1"
-                :inactive-value="0"
-                v-else-if="item.specialEffect?.type === FieldSpecialEffectType.SWITCH"
-                v-model="scope.row[item.name]"
-                :data="scope.row[item.name]"
-                size="default"
-              >
-              </el-switch>
-
-              <span v-else-if="item.specialEffect?.type === FieldSpecialEffectType.CUSTOM">
-                {{ item.specialEffect.otherInfo.render(scope.row[item.name]) }}
-              </span>
-
-              <el-text v-else>
-                <!-- 其他列按默认方式显示 -->
-
-                {{
-                  props.needAverage &&
-                  scope.row[item.name] !== undefined &&
-                  item.name !== 'count' &&
-                  item.name !== 'date'
-                    ? scope.row[item.name] + '%'
-                    : scope.row[item.name]
-                }}
-              </el-text>
+              <TableColumn
+                :column-config="item"
+                :row="scope.row"
+                :need-average="props.needAverage"
+              ></TableColumn>
             </template>
           </el-table-column>
         </template>

src/components/table/TableColumn/TableColumn.vue

@@ -0,0 +1,97 @@
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-12-03
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-12-03
+ * @Description: 
+ * 
+-->
+<script setup lang="ts">
+import type { TableFieldInfo } from '@/types/table'
+import { FieldSpecialEffectType } from '@/types/tableText'
+import { initLoadResource } from '@/utils/resource'
+
+import { onMounted, reactive, toRefs } from 'vue'
+
+interface TableColumnProps {
+  columnConfig: TableFieldInfo
+  row: any
+  needAverage?: boolean
+}
+
+const props = withDefaults(defineProps<TableColumnProps>(), {
+  needAverage: false
+})
+
+const { columnConfig, row } = toRefs(props)
+
+// 使用blob的资源路径信息
+const blobUrlInfo = reactive<Record<string, string>>({})
+
+// 资源的加载路径
+const resourceInfo: Record<string, string> = {
+  defaultHead: `/img/default/defaultHead.png`
+}
+
+onMounted(() => {
+  initLoadResource(resourceInfo).then((data) => {
+    Object.assign(blobUrlInfo, data)
+  })
+})
+</script>
+
+<template>
+  <div>
+    <el-image
+      v-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.IMG"
+      :preview-teleported="true"
+      :src="row[columnConfig.name]"
+      :preview-src-list="[row[columnConfig.name]]"
+      style="width: 35px; height: 35px"
+      :fit="'fill'"
+      :hide-on-click-modal="true"
+    >
+      <template #error>
+        <!--  -->
+        <img alt="头像" style="width: 35px; height: 35px" :src="blobUrlInfo.defaultHead" />
+      </template>
+    </el-image>
+
+    <!-- 文字类 -->
+    <span v-else-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.TEXT">
+      <TableFieldText :special-effect="columnConfig.specialEffect" :value="row[columnConfig.name]">
+      </TableFieldText>
+    </span>
+
+    <!-- 开关类 -->
+
+    <el-switch
+      :active-value="1"
+      :inactive-value="0"
+      v-else-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.SWITCH"
+      v-model="row[columnConfig.name]"
+      :data="row[columnConfig.name]"
+      size="default"
+    >
+    </el-switch>
+
+    <span v-else-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.CUSTOM">
+      {{ columnConfig.specialEffect.otherInfo.render(row[columnConfig.name]) }}
+    </span>
+
+    <el-text v-else>
+      <!-- 其他列按默认方式显示 -->
+
+      {{
+        props.needAverage &&
+        row[columnConfig.name] !== undefined &&
+        columnConfig.name !== 'count' &&
+        columnConfig.name !== 'date'
+          ? row[columnConfig.name] + '%'
+          : row[columnConfig.name]
+      }}
+    </el-text>
+  </div>
+</template>
+
+<style scoped></style>

src/components/form/TableFilterForm/FilterInput.vue → src/components/table/TableFilterForm/FilterInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { QueryInfo } from '@/types/table'
+import type { QueryInfo } from '@/types/table.ts'
 
 interface FilterInput {
   itemInfo: QueryInfo

src/components/form/TableFilterForm/FilterSelect.vue → src/components/table/TableFilterForm/FilterSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { QueryInfo, SelectInfo } from '@/types/table'
-import { FilterType } from '@/types/table'
+import type { QueryInfo, SelectInfo } from '@/types/table.ts'
+import { FilterType } from '@/types/table.ts'
 import { ref } from 'vue'
 
 interface FilterSelectProps {

src/components/form/TableFilterForm/TableFilterForm.vue → src/components/table/TableFilterForm/TableFilterForm.vue

@@ -3,10 +3,10 @@ import { onMounted, ref } from 'vue'
 import FilterInput from './FilterInput.vue'
 import FilterSelectLabel from './FilterSelectLabel.vue'
 import FilterSelect from './FilterSelect.vue'
-import { FilterType, type QueryInfo } from '@/types/table'
+import { FilterType, type QueryInfo } from '@/types/table.ts'
 import { Filter } from '@element-plus/icons-vue'
-import { useCustomFilter } from '@/hooks/useCustomFilter'
-import CustomFilter from '../CustomFilter.vue'
+import { useCustomFilter } from '@/hooks/useCustomFilter.ts'
+import CustomFilter from '../../form/CustomFilter.vue'
 import { throttleFunc } from '@/utils/common'
 type CustomFilterRef = InstanceType<typeof CustomFilter>
 

src/hooks/useDialog.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-21 17:23:32
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-10-14 17:00:57
+ * @LastEditTime: 2024-12-03
  * @FilePath: \Game-Backstage-Management-System\src\hooks\useDialog.ts
  * @Description:
  *
@@ -49,7 +49,7 @@ export function useDialog() {
         if (key in formData) {
           formData[key] = row[key]
         } else {
-          console.log(key)
+          console.error(`key:${key} is not founded`)
         }
       }
     })

src/hooks/useForm.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-09-04 15:07:56
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-10-14 16:50:35
+ * @LastEditTime: 2024-12-03
  * @FilePath: \Game-Backstage-Management-System\src\hooks\useForm.ts
  * @Description:
  *
@@ -58,7 +58,6 @@ export function useForm() {
           }
         })
         .catch(() => {
-          console.log('取消选择')
           reject(false)
         })
     })
@@ -73,7 +72,7 @@ export function useForm() {
         if (key in formData) {
           formData[key] = row[key]
         } else {
-          console.log(key)
+          console.error(`key:${key} is not founded`)
         }
       }
     })

src/utils/axios/axiosInstance.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 17:18:52
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-11-29
+ * @LastEditTime: 2024-12-03
  * @FilePath: \Game-Backstage-Management-System\src\utils\axios\axiosInstance.ts
  * @Description:
  *
@@ -52,10 +52,6 @@ const showUncloggingInfo = (msg: string = '请先登录') => {
   void router.push('/login')
 }
 
-// axiosInstance.interceptors.request.use((info) => {
-//   // console.log(info)
-// })
-
 // 添加响应拦截器
 axiosInstance.interceptors.response.use(
   async function (response) {
@@ -115,10 +111,6 @@ axiosInstance.interceptors.response.use(
         duration: 1500
       })
     }
-
-    // console.log(error)
-    // setLoginState(false)
-    // router.push('/login')
     return Promise.reject(error)
   }
 )

src/views/AppManage/UserConversionDetail.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-11-06
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-12-03
+ * @Description: 
+ * 
+-->
 <script setup lang="ts">
 import { FormFieldType } from '@/types/form'
 import type { FormField, ValueTypes } from '@/types/form'

src/views/Home/Analysis/UserTrendView.vue

@@ -306,7 +306,7 @@ const getDetailData = () => {
             ...nVal
           })
         }
-        console.log(detailDataTableData)
+
         detailDataTableData.splice(0, detailDataTableData.length, ...newList)
         detailDataTableInfo.paginationConfig.total = newList.length
       })

src/views/Home/InfoManage/GameManageView.vue

@@ -306,7 +306,6 @@ const formSub = (formData: any, type: number) => {
   } else {
     let game = allGameInfo.find((item) => item.gid === formData.gid)
     if (game) {
-      console.log(formData.gameName)
       game.gameName = formData.gameName
     }
   }

src/views/Home/InfoManage/PlayerManageView.vue

@@ -242,8 +242,7 @@ const blockedPlayer = (row: any) => {
     .then(() => {
       axiosInstance.post(url, playerInfo).then((data) => {
         analysisResCode(data)
-          .then((info) => {
-            console.log(info)
+          .then(() => {
             playerTableRef.value.getData()
           })
           .catch((err) => {

src/views/Login/LoginView.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-08-20
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-12-03
+ * @Description: 
+ * 
+-->
 <script setup lang="ts">
 import type { RuleInfo } from '@/types/input'