wangxuefeng/low-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 新增筛选类型

Browse Source
This commit is contained in:
sy2084 2024-10-28 18:20:54 +08:00
parent 519c42ebf7
commit 80198c7755
1 changed files with 71 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/common/y-table.vue
View File

@ -10,15 +10,19 @@
class="filter-item"
>
<span>{{ item.label }}：</span>
<!-- 选择框 -->
<a-select
v-if="item.type === 'select'"
class="input-item"
placeholder="请选择"
:options="item.options"
allow-clear
show-search
:filter-option="filterOption"
v-model:value="filterData[item.name]"
@change="toFilt"
></a-select>
<!-- 输入框 -->
<a-input
v-else-if="item.type === 'text'"
class="input-item"
@ -27,7 +31,16 @@
v-model:value="filterData[item.name]"
@change="toFilt"
/>
<!-- 日期范围 -->
<a-range-picker v-else-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" @change="toFilt" />
<!-- 带时分的日期范围 -->
<a-range-picker v-else-if="item.type === 'date_time'" class="date-time-item" v-model:value="filterData[item.name]" show-time format="YYYY-MM-DD HH:mm" @change="toFilt" />
<!-- 数值区间 -->
<div v-else-if="item.type === 'number_range' && filterData[item.name]" class="number_range_box">
<a-input-number placeholder="最小值" style="width: 140px" v-model:value="filterData[item.name].min" @change="toFilt" />
<span class="divider"> - </span>
<a-input-number placeholder="最大值" style="width: 140px" v-model:value="filterData[item.name].max" @change="toFilt" />
</div>
</div>
<div v-if="isExport" class="filter-item"><a :href="`${YCODE_BASEURL}/api/v1/preview/export?preview_id=${previewId}&filter=${JSON.stringify(getFilter())}`" target="_blank"><a-button type="primary"><CloudDownloadOutlined />导出</a-button></a></div>
</div>
@ -63,7 +76,7 @@
</template>
<script setup>
import { reactive, ref } from "vue";
import { reactive, ref, watch } from "vue";
import { useDebounceFn } from "@vueuse/core";
import _ from "lodash";
import { CloudDownloadOutlined } from "@ant-design/icons-vue";
@ -109,13 +122,21 @@ const pageState = reactive({
perPage: 20,
});
// watch(() => props.previewId, () => {
// props.filterConfig.forEach(item => {
// if (item.type === 'time') {
// filterData.value[item.name] = [dayjs().startOf('month'), dayjs().endOf('month')];
// }
// })
// }, { immediate: true })
watch(() => props.filterConfig, (newVal) => {
newVal.forEach((item) => {
// 给数值区间类型赋初始值，防止报错
if (item.type === 'number_range') {
filterData.value[item.name] = {
min: undefined,
max: undefined,
};
}
});
}, { immediate: true });
const filterOption = (input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const getFilter = () => {
const cloneFilter = _.cloneDeep(props.filterConfig);
@ -124,16 +145,37 @@ const getFilter = () => {
return filterData.value[item.name] !== undefined && filterData.value[item.name] !== null;
})
.map((item) => {
return item.type === 'time' && filterData.value[item.name] ? {
name: item.name,
type: item.type,
start_time: filterData.value[item.name][0].format('YYYY-MM-DD'),
end_time: filterData.value[item.name][1].format('YYYY-MM-DD'),
} : {
name: item.name,
type: item.type,
value: filterData.value[item.name],
};
if (item.type === 'time' && filterData.value[item.name]) {
// 日期类型的参数
return {
name: item.name,
type: item.type,
start_time: filterData.value[item.name][0].format('YYYY-MM-DD'),
end_time: filterData.value[item.name][1].format('YYYY-MM-DD'),
};
} else if (item.type === 'date_time' && filterData.value[item.name]) {
// 带时分的日期类型参数
return {
name: item.name,
type: item.type,
start_time: filterData.value[item.name][0].format('YYYY-MM-DD HH:mm') + ':00',
end_time: filterData.value[item.name][1].format('YYYY-MM-DD HH:mm') + ':59',
};
} else if (item.type === 'number_range') {
// 数值区间
return {
name: item.name,
type: item.type,
min: filterData.value[item.name].min ? String(filterData.value[item.name].min) : '',
max: filterData.value[item.name].max ? String(filterData.value[item.name].max) : '',
};
} else {
return {
name: item.name,
type: item.type,
value: filterData.value[item.name],
};
}
});
return filter
};
@ -181,6 +223,17 @@ const pageChange = () => {
.date-item {
width: 240px;
}
.date-time-item {
width: 300px;
}
.number_range_box {
display: inline-flex;
align-items: center;
.divider {
margin: 0 4px;
}
}
.y-table-content {
margin-top: 10px;
}