From 45f38162092ff3bbe511a836544cfdfd907c8bad Mon Sep 17 00:00:00 2001
From: Realabiha <48506355+Realabiha@users.noreply.github.com>
Date: Tue, 23 Jan 2024 21:49:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=97=AE=E5=8D=B7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD=20(#54)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/management/api/survey.js              |  3 +-
 .../pages/list/components/baseList.vue        | 41 +++++++++++++++++-
 .../pages/list/components/textButton.vue      | 43 +++++++++++--------
 web/src/management/pages/list/config/index.js | 40 +++++++++++++++++
 4 files changed, 105 insertions(+), 22 deletions(-)

diff --git a/web/src/management/api/survey.js b/web/src/management/api/survey.js
index 24781e57..e92ec532 100644
--- a/web/src/management/api/survey.js
+++ b/web/src/management/api/survey.js
@@ -1,11 +1,12 @@
 import axios from './base';
 
-export const getSurveyList = (curPage, filter) => {
+export const getSurveyList = (curPage, filter, order) => {
   return axios.get('/surveyManage/list', {
     params: {
       pageSize: 10,
       curPage,
       filter,
+      order
     },
   });
 };
diff --git a/web/src/management/pages/list/components/baseList.vue b/web/src/management/pages/list/components/baseList.vue
index 0786a2cf..b47378bd 100644
--- a/web/src/management/pages/list/components/baseList.vue
+++ b/web/src/management/pages/list/components/baseList.vue
@@ -4,12 +4,23 @@
       <div class="select">
         <text-select
            v-for="item in Object.keys(selectOptionsDict)"
+           :key="item"
            :effect-fun="onSelectChange"
            :effect-key="item"
            :options="selectOptionsDict[item]"
         />
       </div>
       <div class="search">
+        <text-button
+          v-for="item in Object.keys(buttonOptionsDict)"
+          :key="item"
+          :effect-fun="onButtonChange"
+          :effect-key="item"
+          :option="buttonOptionsDict[item]"
+          :icon="buttonOptionsDict[item].icons.find(iconItem => iconItem.effectValue === buttonValueMap[item]).name"
+          size="mini"
+          type="text"
+        ></text-button>
         <text-search 
           placeholder="请输入问卷标题"
           :value="searchVal" 
@@ -102,7 +113,8 @@ import State from './state';
 import ToolBar from './toolBar';
 import TextSearch from './textSearch'
 import TextSelect from './textSelect'
-import { fieldConfig, thead, noListDataConfig, noSearchDataConfig, selectOptionsDict } from '../config';
+import TextButton from './textButton'
+import { fieldConfig, thead, noListDataConfig, noSearchDataConfig, selectOptionsDict, buttonOptionsDict } from '../config';
 import { CODE_MAP } from '@/management/api/base';
 import { QOP_MAP } from '@/management/utils/constant';
 import { getSurveyList, deleteSurvey } from '@/management/api/survey';
@@ -127,6 +139,11 @@ export default {
       selectValueMap: {
         questionType: '',
         'curStatus.status': ''
+      },
+      buttonOptionsDict,
+      buttonValueMap: {
+        'curStatus.date': '',
+        createDate: -1
       }
     };
   },
@@ -168,6 +185,16 @@ export default {
           ]
         }
       ]
+    },
+    order(){
+      const formatOrder = Object.entries(this.buttonValueMap)
+      .filter(([, effectValue]) => effectValue)
+      .reduce((prev, item) => {
+          const [effectKey, effectValue] = item
+          prev.push({field: effectKey, value: effectValue})
+          return prev
+        }, [])
+      return JSON.stringify(formatOrder)
     }
   },
   created() {
@@ -180,7 +207,8 @@ export default {
         const filter = JSON.stringify(this.filter.filter(item => {
           return item.condition[0].field === 'title' || item.condition[0].value
         }))
-        const res = await getSurveyList(this.currentPage, filter);
+        
+        const res = await getSurveyList(this.currentPage, filter, this.order);
         this.loading = false;
         if (res.code === CODE_MAP.SUCCESS) {
           this.total = res.data.count;
@@ -289,6 +317,14 @@ export default {
       this.selectValueMap[selectKey] = selectValue
       this.currentPage = 1
       this.init()
+    },
+    onButtonChange(effectValue, effectKey){
+      this.buttonValueMap = {
+        'curStatus.date': '',
+        createDate: ''
+      }
+      this.buttonValueMap[effectKey] = effectValue
+      this.init()
     }
   },
   components: {
@@ -298,6 +334,7 @@ export default {
     ToolBar,
     TextSearch,
     TextSelect,
+    TextButton,
     State,
   },
 };
diff --git a/web/src/management/pages/list/components/textButton.vue b/web/src/management/pages/list/components/textButton.vue
index f5123dc0..e793b432 100644
--- a/web/src/management/pages/list/components/textButton.vue
+++ b/web/src/management/pages/list/components/textButton.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="text-button-root" @click="onClick">
-        <el-button type="text" :icon="currentOption.icon" size="mini">
-            <slot>{{ currentOption.label }}</slot>
+        <el-button 
+            v-bind="{...$attrs}"
+        >
+            <slot>{{ option.label }}</slot>
         </el-button>
     </div>
 </template>
@@ -10,13 +12,12 @@ export default{
     name: 'TextButton',
     data(){
         return {
-            optionIndex: 0,
-            optionValue: ''
+            iconIndex: 0
         }
     },
     props: {
-        options: {
-            type: Array,
+        option: {
+            type: Object,
             required: true
         },
         effectFun: {
@@ -27,31 +28,35 @@ export default{
         }
     },
     computed: {
-        optionsLength(){
-            return this.options.length
+        toggleOptionIcons(){
+            return this.option.icons.slice(1)
         },
-        currentOption(){
-            return this.options[this.optionIndex % this.optionsLength]
+        iconsLength(){
+            return this.toggleOptionIcons.length
+        },
+        currentIconItem(){
+            let finalIconIndex = this.iconIndex % this.iconsLength
+            return this.toggleOptionIcons[finalIconIndex]
         }
     },
-    watch: {
-      currentOption(newOption){
-        typeof this.effectFun === 'function' && this.effectFun(newOption, this.effectKey)
-      }  
-    },
     methods: {
         onClick(){
-            if(this.optionIndex > this.optionsLength){
-                this.optionIndex = 0
-                return
+            this.iconIndex++
+            if(this.iconIndex >= this.iconsLength){
+                this.iconIndex = 0
             }
-            this.optionIndex++
+            typeof this.effectFun === 'function' && this.effectFun(this.currentIconItem.effectValue, this.effectKey)
         }
     },
+    created(){
+        this.iconIndex = this.toggleOptionIcons.findIndex(iconItem => iconItem.isDefaultValue)
+    }
 }
 </script>
 <style lang="scss" scoped>
     .el-button{
         margin-right: 20px;
+        font-size: 14px;
+        color: #4a4c5b;
     }
 </style>
\ No newline at end of file
diff --git a/web/src/management/pages/list/config/index.js b/web/src/management/pages/list/config/index.js
index 24811b9b..29a7b728 100644
--- a/web/src/management/pages/list/config/index.js
+++ b/web/src/management/pages/list/config/index.js
@@ -134,4 +134,44 @@ export const selectOptionsDict = Object.freeze({
   'curStatus.status': curStatusSelect
 })
 
+export const buttonOptionsDict = Object.freeze({
+  'curStatus.date': {
+    label: '更新时间',
+    icons: [
+      {
+        name: 'el-icon-sort',
+        effectValue: '',
+        isDefaultValue: true
+      },
+      {
+        name: 'el-icon-sort-up',
+        effectValue: 1
+      },
+      {
+        name: 'el-icon-sort-down',
+        effectValue: -1,
+      },
+    ]
+  },
+  createDate: {
+    label: '创建时间',
+    icons: [
+      {
+        name: 'el-icon-sort',
+        effectValue: '',
+       
+      },
+      {
+        name: 'el-icon-sort-up',
+        effectValue: 1
+      },
+      {
+        name: 'el-icon-sort-down',
+        effectValue: -1,
+        isDefaultValue: true
+      },
+    ]
+  }
+})
+