feat: 问卷列表新增排序功能 (#54)

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
     },
   });
 };

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,
   },
 };

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">
+        <el-button 
-            <slot>{{ currentOption.label }}</slot>
+            v-bind="{...$attrs}"
+        >
+            <slot>{{ option.label }}</slot>
         </el-button>
     </div>
 </template>
@@ -10,13 +12,12 @@ export default{
     name: 'TextButton',
     data(){
         return {
-            optionIndex: 0,
+            iconIndex: 0
-            optionValue: ''
         }
     },
     props: {
-        options: {
+        option: {
-            type: Array,
+            type: Object,
             required: true
         },
         effectFun: {
@@ -27,31 +28,35 @@ export default{
         }
     },
     computed: {
-        optionsLength(){
+        toggleOptionIcons(){
-            return this.options.length
+            return this.option.icons.slice(1)
         },
-        currentOption(){
+        iconsLength(){
-            return this.options[this.optionIndex % this.optionsLength]
+            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.iconIndex++
-                this.optionIndex = 0
+            if(this.iconIndex >= this.iconsLength){
-                return
+                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>

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
+      },
+    ]
+  }
+})
+