模版增加 搜索关键字

模版增加 搜索项折叠

Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/index.vue.vm

@@ -19,25 +19,30 @@
 }
 <template>
     <div class="@(@Model.LowerClassName)-container" v-loading="options.loading">
-        <el-card shadow="hover" :body-style="{ padding: '20px 20px 16px 0px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
+        <el-card shadow="hover" :body-style="{ padding: '20px 20px 16px 10px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
 			<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
 				<el-row :gutter="10">
 				@if(Model.QueryWhetherList.Count > 0){
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+						<el-form-item label="关键字" prop="searchKey">
+							<el-input v-model="state.queryParams.searchKey" placeholder="请输入模糊查询关键字" clearable @keyup.enter.native="handleQuery(true)" />
+						</el-form-item>
+					</el-col>
 					foreach (var column in Model.QueryWhetherList) {
 						if(@column.EffectType == "Input" || @column.EffectType == "InputTextArea") {
-					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
 						<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
 							<el-input v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="@column.ColumnComment" clearable @@keyup.enter.native="handleQuery(true)" />
 						</el-form-item>
 					</el-col>
 						} else if(@column.EffectType == "InputNumber") {
-					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
 						<el-form-item label="@column.ColumnComment">
               				<el-input-number v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="请输入@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery(true)" />
             			</el-form-item>
 					</el-col>
 						} else if(@column.EffectType == "fk") {
-					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
 						<el-form-item label="@column.ColumnComment">
 							<el-select filterable="" v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="请选择@(@column.ColumnComment)" clearable>
 								<el-option v-for="(item,index) in @LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList" :key="index" :value="item.value" :label="item.label" />
@@ -45,7 +50,7 @@
 						</el-form-item>
 					</el-col>
 						} else if(@column.EffectType == "Select") {
-					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
 						<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
 							<el-select v-model="state.queryParams.@(@column.LowerPropertyName)" filterable placeholder="请选择@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery(true)" >
 								<el-option v-for="(item,index) in dl('@(@column.DictTypeCode)')" :key="index" :value="item.code" :label="`${item.name} [${item.code}] ${item.value}`" />
@@ -53,7 +58,7 @@
 						</el-form-item>
 					</el-col>
 						} else if(@column.EffectType == "EnumSelector") {
-					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
 						<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
 							<el-select v-model="state.queryParams.@(@column.LowerPropertyName)" filterable placeholder="请选择@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery(true)" >
 								<el-option v-for="(item,index) in dl('@(@column.DictTypeCode)')" :key="index" :value="item.value" :label="`${item.name} [${item.code}] ${item.value}`" />
@@ -61,7 +66,7 @@
 						</el-form-item>
 					</el-col>
 						} else if(@column.EffectType == "DatePicker") {
-					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
 						<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
 							@if(@column.QueryType == "~"){
 							@:<el-date-picker type="daterange" v-model="state.queryParams.@(@column.LowerPropertyName)Range"  value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
@@ -83,6 +88,8 @@
 					<el-button-group>
 						<el-button type="primary" icon="ele-Search" @@click="handleQuery(true)" v-auth="'@(@Model.LowerClassName):page'" :loading="options.loading"> 查询 </el-button>
 						<el-button icon="ele-Refresh" @@click="resetQuery" :loading="options.loading"> 重置 </el-button>
+						<el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!state.showAdvanceQueryUI" style="margin-left: 5px"> 高级查询 </el-button>
+						<el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="state.showAdvanceQueryUI" style="margin-left: 5px"> 隐藏 </el-button>
 					</el-button-group>
 				</el-col>
 			</el-row>
@@ -234,7 +241,9 @@ const editDialogRef = ref<InstanceType<typeof EditDialog>>();
 
 // 变量
 const state = reactive({
+	showAdvanceQueryUI: false,
 	queryParams: {
+		searchKey: undefined,
 		@if(Model.QueryWhetherList.Count > 0) {
 			@foreach (var column in Model.QueryWhetherList) {
 		@:@(@column.LowerPropertyName): undefined,
@@ -253,6 +262,11 @@ const state = reactive({
 	title: '',
 });
 
+// 改变高级查询的控件显示状态
+const changeAdvanceQueryUI = () => {
+	state.showAdvanceQueryUI = !state.showAdvanceQueryUI;
+};
+
 // 表格参数配置
 const options = useVxeTable<@(@Model.ClassName)>({
 	id: '@(@Model.ClassName)',
@@ -316,6 +330,7 @@ const fetchData = async (tableParams: any) => {
 
 // 重置操作
 const resetQuery = () => {
+	state.queryParams.searchKey = undefined,
 	@if(Model.QueryWhetherList.Count > 0) {
 		@foreach (var column in Model.QueryWhetherList) {
 	@:state.queryParams.@(@column.LowerPropertyName) = undefined,