Преглед изворни кода

优化输入框表单回车搜索、用户列表用户贡献数据展示

wangzhiqiang пре 4 месеци
родитељ
комит
5d99bf487e

+ 6 - 34
src/components/from/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form label-position="right" :class="['container', theme]" label-width="auto" class="layout-container-form"
+  <el-form label-position="right" label-width="auto" class="layout-container-form"
     :model="form" @submit.prevent>
     <el-row :gutter="24">
       <el-col v-for="item in formItems" :key="item.prop" :span="item.colSpan || 8" :xs="24" :sm="12" :md="12" :lg="8"
@@ -54,8 +54,7 @@
 </template>
 
 <script>
-import { reactive, defineProps, computed, ref } from "vue";
-import { useStore } from 'vuex'
+import { reactive } from "vue";
 
 export default {
   props: {
@@ -63,28 +62,27 @@ export default {
       type: Array,
       required: true,
     },
+    // 是否显示按钮
     is_button: {
       type: Boolean,
       default: true,
     },
+    // 重置按钮
     is_reset: {
       type: Boolean,
       default: true,
     },
+    // 自定义按钮
     is_add_button: {
       type: String,
       default: '',
     }
   },
   setup(props, { emit }) {
-    const store = useStore()
     const form = reactive({
       // 表单项的初始值
     });
-    const roleId = computed(() => store.state.user.info.roleId);
-    const isTeam = ref(roleId.value == '1869679339119857665')  // 判断是否是团长
-    const theme = computed(() => isTeam.value ? 'team' : 'default');
-    const minWidth = computed(() => isTeam.value ? 6 : 8);
+    
     props.formItems.forEach(item => {
       console.log('item', item)
       if (item.defaultVal) {
@@ -126,8 +124,6 @@ export default {
       resetForm,
       handleEnter,
       addForm,
-      theme,
-      minWidth,
     };
   },
 };
@@ -154,28 +150,4 @@ export default {
   /* 你想要设置的宽度 */
   border-bottom-color: red !important;
 }
-
-.container.team {
-  --system-text-color: #FFA74F;
-  --el-color-primary: #FFA74F;
-
-  ::v-deep(.el-form-item__label) {
-    font-weight: bold !important;
-    font-size: 16px;
-  }
-
-  ::v-deep(.el-date-editor .el-input__icon) {
-    font-size: 18px !important;
-  }
-
-  .el-button {
-    padding: 0px 20px;
-    font-size: 16px;
-  }
-
-  .default-but {
-    border: 1px solid var(--system-text-color);
-    color: var(--system-text-color);
-  }
-}
 </style>

+ 104 - 0
src/components/from/useForm.md

@@ -0,0 +1,104 @@
+# SearchForm 组件使用说明文档(Vue 3 + Element Plus)
+这是一个基于 Element Plus 的可配置化搜索表单组件,支持常见的表单输入类型,便于快速构建后台筛选表单。
+
+## 组件功能
+支持多种表单项类型:input, append, select, selectGroup, date, daterange, text, table
+
+响应式布局(支持响应式栅格)
+
+搜索按钮(submitForm)
+
+可选的重置按钮、新增按钮
+
+支持表单项默认值、动态表单项宽度控制
+
+## Props 参数说明
+| Prop 名称         | 类型      | 说明              | 默认值    |
+| --------------- | ------- | --------------- | ------ |
+| `formItems`     | Array   | 表单项配置数组         | -      |
+| `is_button`     | Boolean | 是否显示操作按钮        | `true` |
+| `is_reset`      | Boolean | 是否显示重置按钮        | `true` |
+| `is_add_button` | String  | 新增按钮文案,传空字符串不显示 | `''`   |
+
+
+## formItems 配置项说明
+| 字段名              | 说明                           | 类型      | 是否必传 | 示例值                                      |
+| ---------------- | ---------------------------- | ------- | ---- | ---------------------------------------- |
+| `type`           | 表单项类型                        | string  | 是    | `input`, `append`, `select`, `selectGroup`, `date`, `daterange`, `text`, `table`, `daterange`  |
+| `label`          | 表单项的标题                       | string  | 是    | `"姓名"`                                   |
+| `prop`           | 表单数据字段名(key)                 | string  | 是    | `"name"`                                 |
+| `placeholder`    | 占位符文本                        | string  | 否    | `"请输入姓名"`                                |
+| `defaultVal`     | 表单项初始值                       | any     | 否    | `"张三"` 或 `''`                            |
+| `options`        | 下拉/分组选择项配置(select类)          | array   | 否    | `[ { label, value } ]`                   |
+| `colSpan`        | 表单项所占列数(响应式支持)               | number  | 否    | `6`, `8`, `12`(默认8)                      |
+| `dateType`       | 日期选择器类型(如`date`, `datetime`) | string  | 否    | `date`, `datetime`                       |
+| `needEnterEvent` | 是否支持 `Enter` 触发搜索            | boolean | 否    | `true`                                   |
+| `clearable`      | 是否支持清空                       | boolean | 否    | `true`, `false`                          |
+
+
+## Emits 事件
+| 事件名             | 参数       | 说明         |
+| --------------- | -------- | ---------- |
+| `formSubmitted` | `form`对象 | 表单点击“搜索”提交 |
+| `formReset`     | 无        | 表单点击“重置”   |
+| `addForm`       | 无        | 表单点击“新增”   |
+
+
+## 使用示例
+```vue
+<template>
+  <SearchForm
+    :formItems="formItems"
+    :is_button="true"
+    :is_reset="true"
+    is_add_button="新增"
+    @formSubmitted="onSearch"
+    @formReset="onReset"
+    @addForm="onAdd"
+  />
+</template>
+
+<script setup>
+import SearchForm from '@/components/SearchForm.vue'
+
+const formItems = [
+  {
+    type: 'input',
+    label: '姓名',
+    prop: 'name',
+    placeholder: '请输入姓名',
+    defaultVal: '',
+    colSpan: 8,
+    needEnterEvent: true,
+  },
+  {
+    type: 'select',
+    label: '性别',
+    prop: 'gender',
+    placeholder: '请选择性别',
+    options: [
+      { label: '男', value: 'male' },
+      { label: '女', value: 'female' },
+    ],
+  },
+  {
+    type: 'daterange',
+    label: '时间范围',
+    prop: 'timeRange',
+  },
+]
+
+const onSearch = (formData) => {
+  console.log('搜索数据:', formData)
+}
+
+const onReset = () => {
+  console.log('表单重置')
+}
+
+const onAdd = () => {
+  console.log('点击新增')
+}
+</script>
+
+```

+ 1 - 1
src/layout/Header/index.vue

@@ -24,7 +24,7 @@
         <el-dropdown>
           <span class="el-dropdown-link" style="display: flex;align-items: center; min-width: 90px;justify-content: space-between;">
             <el-avatar :size="40" :src="userInfo.headImage" />
-            <div>
+            <div style="margin: 0 5px;">
               {{userInfo.loginName}}
               <i class="sfont system-xiala"></i>
             </div>

+ 2 - 0
src/views/main/formworkErection/adPlatformAdmin.vue

@@ -163,11 +163,13 @@
           label: '平台ID',
           prop: 'channelId',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '平台名称',
           prop: 'channelName',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '平台状态',

+ 1 - 0
src/views/main/formworkErection/adSourceAdmin.vue

@@ -140,6 +140,7 @@ const settingData = () => {
                 label: '广告源ID',
                 prop: 'nickName',
                 type: 'input',
+                needEnterEvent: true
             },
             {
                 label: '广告位名称',

+ 3 - 0
src/views/main/formworkErection/placementAdmin.vue

@@ -174,16 +174,19 @@ const settingData = () => {
         label: '广告位ID',
         prop: 'placementId',
         type: 'input',
+        needEnterEvent: true
       },
       {
         label: '广告位名称',
         prop: 'placementName',
         type: 'input',
+        needEnterEvent: true
       },
       {
         label: '平台应用',
         prop: 'appName',
         type: 'input',
+        needEnterEvent: true
       },
       {
         label: '广告位状态',

+ 1 - 0
src/views/main/outBagModule/appAdmin.vue

@@ -376,6 +376,7 @@ const settingData = () => {
         label: "应用名称",
         prop: "appName",
         type: "input",
+        needEnterEvent: true
       },
       {
         label: "广告平台",

+ 1 - 0
src/views/main/outBagModule/channelTypeAdmin.vue

@@ -88,6 +88,7 @@ const settingData = () => {
         label: '渠道名称',
         prop: 'ditchName',
         type: 'input',
+        needEnterEvent: true
       },
     ]
   })

+ 5 - 0
src/views/main/userModule/relieveLogsList.vue

@@ -125,16 +125,19 @@
           label: '用户ID',
           prop: 'userId',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '应用ID',
           prop: 'appId',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '渠道ID',
           prop: 'channelId',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '渠道类型',
@@ -152,11 +155,13 @@
           label: '解封原因',
           prop: 'deblockingReason',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '操作人',
           prop: 'operator',
           type: 'input',
+          needEnterEvent: true
         },
         { label: '解封时间', prop: 'deblockingTime', type: 'daterange' },
         { label: '登录时间', prop: 'loginTime', type: 'daterange' },

+ 4 - 0
src/views/main/userModule/riskLogsList.vue

@@ -138,21 +138,25 @@
           label: '用户ID',
           prop: 'userId',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '应用ID',
           prop: 'appId',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '封禁原因',
           prop: 'bannedReason',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '渠道商ID',
           prop: 'channelId',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '渠道来源',

+ 9 - 2
src/views/main/userModule/userList.vue

@@ -33,7 +33,13 @@
           </template>
         </el-table-column>
         <el-table-column prop="todayVideo" label="今日视频播放数" width="130" />
-        <el-table-column prop="totalIncome" label="用户贡献" width="130" />
+        <el-table-column prop="totalVideo" label="视频播放总数" width="110" />
+        <el-table-column prop="totalIncome" label="用户贡献(当日/总共)" width="180">
+          <template #default="scope">
+            {{ scope.row.todayIncome === 0 ? '0.00' : scope.row.todayIncome ?? '0.00'}} / 
+            {{ scope.row.totalIncome === 0 ? '0.00' : scope.row.totalIncome ?? '0.00' }}
+          </template>
+        </el-table-column>
         <el-table-column prop="loginDays" label="登录天数" width="90" />
         <el-table-column prop="pointsBalance" label="积分余额" width="90" />
         <el-table-column prop="pointsTotal" label="积分总额" width="90" />
@@ -44,7 +50,6 @@
             {{ convertUTCToBeijing(scope.row.registryTime) }}
           </template>
         </el-table-column>
-        <el-table-column prop="totalVideo" label="视频总播放数" width="110" />
         <el-table-column prop="versionCode" label="版本号" />
         <el-table-column prop="withdrawCount" label="提现笔数" width="90" />
         <el-table-column prop="withdrawTotal" label="提现总额" width="90" />
@@ -173,11 +178,13 @@
           label: '用户昵称',
           prop: 'nickName',
           type: 'input',
+          needEnterEvent: true
         },
         {
           label: '用户ID',
           prop: 'userId',
           type: 'input',
+          needEnterEvent: true
         },
         /* {
           label: '渠道类型',