feat: 问卷列表新增排序功能 (#54)
This commit is contained in:
Realabiha
GitHub
parent
4031266ce8
commit
45f3816209
@ -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
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
@ -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
|
||||
},
|
||||
watch: {
|
||||
currentOption(newOption){
|
||||
typeof this.effectFun === 'function' && this.effectFun(newOption, this.effectKey)
|
||||
currentIconItem(){
|
||||
let finalIconIndex = this.iconIndex % this.iconsLength
|
||||
return this.toggleOptionIcons[finalIconIndex]
|
||||
}
|
||||
},
|
||||
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>
|
||||
@ -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
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user