feat(user): 优化用户列表展示和搜索功能

- 修改用户列表的表格配置，增加头像和更新时间列
- 实现用户状态切换功能
- 优化搜索表单样式
- 调整内容区域样式
- 修复日期选择器禁用问题

src/api/user/index.js

@@ -7,8 +7,17 @@ import service from '@/utils/request'
 // @router get /user/list
 export const list = (params) => {
   return service({
-    url: '/user/list',
+    url: '/app_user/list',
     method: 'get',
     params
   })
 }
+
+// /app_user/status/:id
+export const status = (data) => {
+  return service({
+    url: '/app_user/status/'+ data.ID,
+    method: 'put',
+    data
+  })
+}

src/components/content/index.vue

@@ -8,7 +8,7 @@
       v-bind="computedStyle"
       :show-overflow-tooltip="config.tooltip"
       :header-row-style="headerRowStyle"
-      :highlight-current-row="!!config.radio ? true : false"
+      :highlight-current-row="!!config.radio"
       :span-method="config?.spanMethod"
       :tooltip-options="config?.tooltipOptions"
       @current-change="handleTableCurrentChange"
@@ -18,7 +18,7 @@
         <!-- <template #default="{ row, column }"> -->
         <!-- <span v-show="false">{{ row[column.property] }}</span> -->
         <div class="move" style="width: 100%; height: 100%">
-          <svg-icon style="cursor: move" icon-class="move" />
+          <svg-icon style="cursor: move" icon-class="move"  name=""/>
         </div>
         <!-- </template> -->
       </el-table-column>
@@ -65,8 +65,9 @@
 </template>
 
 <script setup>
-  import { computed, onBeforeMount, onMounted, watch, ref } from 'vue'
+  import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
   import Sortable from 'sortablejs'
+  import SvgIcon from '@/components/svgIcon/svgIcon.vue'
   // import { nanoid } from '@/utils/jsencrypt'
 
   const props = defineProps({
@@ -209,8 +210,7 @@
   }
 
   function indexMethod(index) {
-    const cur = size.value * (current.value - 1) + index + 1
+    return size.value * (current.value - 1) + index + 1
-    return cur
   }
 
   function rowDrag() {
@@ -256,7 +256,7 @@
 
 <style lang="scss" scoped>
   .content {
-    background: #fff;
+    //background: #fff;
     border-radius: 4px;
     //padding: 20px 20px 0 20px;
     box-sizing: border-box;

src/components/searchForm/index.vue

@@ -164,7 +164,7 @@
 
 <style lang="scss" scoped>
   .search-form{
-    background: white;
+    //background: white;
     padding: 1rem;
     //padding-bottom: 0;
     margin-top: 0.5rem;

src/config.js

@@ -135,14 +135,22 @@ export const USER_TABLE_CONFIG = {
     {
       attrs: {
         label: 'ID',
-        prop: 'order_no',
+        prop: 'ID',
         align: 'center'
       }
     },
+    {
+      attrs: {
+        label: '头像',
+        prop: 'avatar',
+        align: 'center'
+      },
+      slot: 'avatar'
+    },
     {
       attrs: {
         label: '名称',
-        prop: 'name',
+        prop: 'nick_name',
         align: 'center'
       }
     },
@@ -159,12 +167,14 @@ export const USER_TABLE_CONFIG = {
         prop: 'CreatedAt',
         align: 'center'
       },
+      slot: 'CreatedAt'
     },{
       attrs: {
         label: '更新时间',
         prop: 'UpdatedAt',
         align: 'center'
       },
+      slot: 'UpdatedAt'
     },
     {
       attrs: {

src/style/main.scss

@@ -34,7 +34,9 @@
 .gva-search-box {
   @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
 }
-
+.search-form{
+  @apply p-4 bg-white dark:text-slate-400 dark:bg-slate-900
+}
 .gva-form-box {
   @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
 }

src/view/bot/bot/bot.vue

@@ -16,7 +16,7 @@
        —
       <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
       </el-form-item>
-      
+
 
         <template v-if="showAllQuery">
           <!-- 将需要控制显示状态的查询条件添加到此范围内 -->
@@ -34,7 +34,7 @@
         <div class="gva-btn-list">
             <el-button  type="primary" icon="plus" @click="openDialog()">新增</el-button>
             <el-button  icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
-            
+
         </div>
         <el-table
         ref="multipleTable"
@@ -45,11 +45,11 @@
         @selection-change="handleSelectionChange"
         >
         <el-table-column type="selection" width="55" />
-        
+
         <el-table-column align="left" label="日期" prop="createdAt"width="180">
             <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
         </el-table-column>
-        
+
           <el-table-column align="left" label="关键词" prop="keyword" width="120" />
                       <el-table-column label="内容" prop="content" width="200">
                          <template #default="scope">

src/view/user/user/index.vue

@@ -18,15 +18,34 @@
         :data="tableData"
         :config="USER_TABLE_CONFIG"
       >
+        <template #avatar="{ row }">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="row.avatar"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :preview-src-list="[row.avatar]"
+            show-progress
+            :initial-index="4"
+            fit="cover"
+          />
+        </template>
         <template #status="{ row }">
-          <!--          <el-tag :type="tag(row.status).extend">{{ tag(row.status).label }}</el-tag>-->
           <el-switch v-model="row.status"
-                     active-value="1"
+                     :active-value="1"
-                     inactive-value="0"
+                     :inactive-value="0"
-                     :loading="statusChangeLoading"
+                     :loading="row.loading"
                      :before-change="() => statusChangeBefore(row)" />
 
         </template>
+        <template #CreatedAt="{ row }">
+          {{ formatDate(row.CreatedAt) }}
+        </template>
+
+        <template #UpdatedAt="{ row }">
+          {{ formatDate(row.UpdatedAt) }}
+        </template>
         <template #operate="{ row }">
           <el-button type="text" @click="handleDetail(row)">详情</el-button>
           <!--          <el-button type="text" @click="handleDelete(row)">删除</el-button>-->
@@ -39,10 +58,11 @@
 <script setup>
   import searchForm from '@/components/searchForm/index.vue'
   import Content from '@/components/content/index.vue'
-  import {list} from '@/api/user/index.js'
+  import {list, status} from '@/api/user/index.js'
   import { ref, onMounted } from 'vue'
+  import {formatDate} from '@/utils/format'
   import { USER_SEARCH_CONFIG, USER_TABLE_CONFIG } from '@/config'
-  const tableLoading = ref(true),  tableData = ref([{status:1}])
+  const tableLoading = ref(true),  tableData = ref([])
   const queryParams = ref({
     page: 1,
     pageSize: 10,
@@ -50,11 +70,7 @@
     startTime: '',
     endTime: ''
   }), total = ref(0)
-  const statusChangeLoading = ref(false)
   // const EMPTY_STR = '- -'
-  // const tag = (status) => {
-  //   return userStatus.find((item) => item.value === status+'') || { type: '', label: EMPTY_STR }
-  // }
   const searchData = (data) => {
     if (data.times) {
       data.startTime = data.times[0]
@@ -79,6 +95,9 @@
     const res = await list(queryParams.value)
     if(res.code === 0) {
       tableData.value = res.data.list
+      for(let item of tableData.value) {
+        item.loading = false
+      }
       total.value = res.data.total
     }
   }
@@ -91,15 +110,15 @@
     queryParams.value.pageNum = data
     getList()
   }
-  function statusChangeBefore(row) {
+  async function statusChangeBefore(row) {
-    console.log(row)
+    row.loading = true
-    statusChangeLoading.value = true
+    let params = JSON.parse(JSON.stringify(row))
-    return new Promise(resolve => {
+    params.status = row.status === 1 ? 0 : 0
-        setTimeout(() => {
+    const res = await status(params)
-          statusChangeLoading.value = false
+    row.loading = false
-          return resolve(true)
+    if(res.code === 0) {
-        },500)
+      row.status = row.status === 1? 0 :1
-    })
+    }
   }
 </script>
 <style lang="scss" scoped>