ruoyi-plus-soybean/docs/template/modules/search.vue.vm

135 lines
4.9 KiB
Plaintext
Raw Normal View History

2024-09-08 21:47:56 +08:00
#set($ModuleName=$moduleName.substring(0, 1).toUpperCase() + $moduleName.substring(1))
<script setup lang="ts">
2025-05-09 23:26:09 +08:00
import { ref } from 'vue';
2024-09-08 21:47:56 +08:00
import { useNaiveForm } from '@/hooks/common/form';
2025-05-09 23:26:09 +08:00
import { $t } from '@/locales';
2024-09-09 15:40:38 +08:00
#if($dictList && $dictList.size() > 0)import { useDict } from '@/hooks/business/dict';#end
2024-09-08 21:47:56 +08:00
defineOptions({
name: '${BusinessName}Search'
});
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
#foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
2025-05-09 23:26:09 +08:00
const dateRange${AttrName} = ref<[string, string] | null>(null);
2024-09-09 11:10:39 +08:00
#end#end
2024-09-08 21:47:56 +08:00
const model = defineModel<Api.$ModuleName.${BusinessName}SearchParams>('model', { required: true });
#if($dictList && $dictList.size() > 0)
#foreach($dict in $dictList)
const { options: ${dict.name}Options } = useDict('${dict.type}'#if($dict.immediate), false#end);
2024-09-08 21:47:56 +08:00
#end#end
2024-09-09 11:10:39 +08:00
2024-09-08 21:47:56 +08:00
async function reset() {
#foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
2025-05-09 23:26:09 +08:00
dateRange${AttrName}.value = null;
2024-09-08 21:47:56 +08:00
#end
#end
2025-05-09 23:26:09 +08:00
Object.assign(model.value.params!, {});
2024-09-08 21:47:56 +08:00
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
#foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
if (dateRange${AttrName}.value?.length) {
model.value.params!.begin${AttrName} = dateRange${AttrName}.value[0];
model.value.params!.end${AttrName} = dateRange${AttrName}.value[1];
2024-09-08 21:47:56 +08:00
}
#end
#end
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
2024-09-09 11:10:39 +08:00
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
2024-09-08 21:47:56 +08:00
<NGrid responsive="screen" item-responsive>
#foreach($column in $columns)
#if($column.query)
#set($dictType=$!StrUtil.toCamelCase($column.dictType))
2024-09-08 21:47:56 +08:00
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
#set($parentheseIndex=$column.columnComment.indexOf(""))
#if($parentheseIndex != -1)
#set($comment=$column.columnComment.substring(0, $parentheseIndex))
#else
#set($comment=$column.columnComment)
#end
<NFormItemGi span="24 s:12 m:6" label="$column.columnComment" path="$column.javaField" class="pr-24px">
#if($!StrUtil.contains("select, radio, checkbox", $column.htmlType) && $dictType && "" != $dictType)
2024-09-08 21:47:56 +08:00
<NSelect
v-model:value="model.$column.javaField"
placeholder="请选择$column.columnComment"
:options="${dictType}Options"
2024-09-08 21:47:56 +08:00
clearable
/>
#elseif($!StrUtil.contains("select, radio, checkbox", $column.htmlType))
2024-09-08 21:47:56 +08:00
<NSelect
v-model:value="model.$column.javaField"
placeholder="请选择$column.columnComment"
:options="[]"
clearable
/>
2025-06-14 13:40:15 +08:00
#elseif($column.htmlType == 'datetime' && $column.queryType != "BETWEEN")
2024-09-08 21:47:56 +08:00
<NDatePicker
v-model:formatted-value="model.$column.javaField"
2025-06-14 13:40:15 +08:00
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
2024-09-08 21:47:56 +08:00
clearable
/>
2025-06-14 13:40:15 +08:00
#elseif($column.htmlType == 'datetime' && $column.queryType == "BETWEEN")
2024-09-08 21:47:56 +08:00
<NDatePicker
v-model:formatted-value="dateRange${AttrName}"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
clearable
/>
#else <NInput v-model:value="model.$column.javaField" placeholder="请输入$column.columnComment" />
#end
</NFormItemGi>
#end
#end
<NFormItemGi span="24" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
2024-09-09 11:10:39 +08:00
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
2024-09-08 21:47:56 +08:00
</NCard>
</template>
<style scoped></style>