Skip to content

Commit

Permalink
添加通过点击展开/收起控制显示更多的查询条件的功能 (#1771)
Browse files Browse the repository at this point in the history 
* 给table.vue模板添加控制显示/隐藏更多查询条件的语句块和按钮

* sys_auto_code.go: 添加隐藏查询条件控制字段

* table.vue.tpl: 按照FieldSearchHide字段自动将隐藏的查询条件写到对应的代码块里

* fieldDialog.vue: 添加隐藏查询条件的控制开关

* 只有已经选择了查询条件的情况下才能选择
  • Loading branch information
@yuvhsin
yuvhsin authored Jun 12, 2024
1 parent bbf716b commit b336529
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 2 deletions.
1 change: 1 addition & 0 deletions server/model/system/sys_auto_code.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ type Field struct {
Comment string `json:"comment"` // 数据库字段描述
ColumnName string `json:"columnName"` // 数据库字段
FieldSearchType string `json:"fieldSearchType"` // 搜索条件
FieldSearchHide bool `json:"fieldSearchHide"` // 是否隐藏查询条件
DictType string `json:"dictType"` // 字典
Front bool `json:"front"` // 是否前端可见
Require bool `json:"require"` // 是否必填
Expand Down
73 changes: 71 additions & 2 deletions server/resource/autocode_template/web/table.vue.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
</el-form-item>
{{ end -}}
{{- range .Fields}} {{- if .FieldSearchType}} {{- if eq .FieldType "bool" }}
{{- range .Fields}} {{- if .FieldSearchType}} {{- if not .FieldSearchHide }} {{- if eq .FieldType "bool" }}
<el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
<el-select v-model="searchInfo.{{.FieldJson}}" clearable placeholder="请选择">
<el-option
Expand Down Expand Up @@ -74,10 +74,76 @@
<el-input v-model="searchInfo.{{.FieldJson}}" placeholder="搜索条件" />
{{- end}}

</el-form-item>{{ end }}{{ end }}{{ end }}
</el-form-item>{{ end }}{{ end }}{{ end }}{{ end }}

<template v-if="showAllQuery">
<!-- 将需要控制显示状态的查询条件添加到此范围内 -->
{{- range .Fields}} {{- if .FieldSearchType}} {{- if .FieldSearchHide }} {{- if eq .FieldType "bool" }}
<el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
<el-select v-model="searchInfo.{{.FieldJson}}" clearable placeholder="请选择">
<el-option
key="true"
label="是"
value="true">
</el-option>
<el-option
key="false"
label="否"
value="false">
</el-option>
</el-select>
</el-form-item>
{{- else if .DictType}}
<el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
<el-select v-model="searchInfo.{{.FieldJson}}" clearable placeholder="请选择" @clear="()=>{searchInfo.{{.FieldJson}}=undefined}">
<el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
{{- else}}
<el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
{{- if eq .FieldType "float64" "int"}}
{{if eq .FieldSearchType "BETWEEN" "NOT BETWEEN"}}
<el-input v-model.number="searchInfo.start{{.FieldName}}" placeholder="最小值" />
—
<el-input v-model.number="searchInfo.end{{.FieldName}}" placeholder="最大值" />
{{- else}}
{{- if .DictType}}
<el-select v-model="searchInfo.{{.FieldJson}}" placeholder="请选择" style="width:100%" :clearable="true" >
<el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
</el-select>
{{- else}}
<el-input v-model.number="searchInfo.{{.FieldJson}}" placeholder="搜索条件" />
{{- end }}
{{- end}}
{{- else if eq .FieldType "time.Time"}}
{{if eq .FieldSearchType "BETWEEN" "NOT BETWEEN"}}
<template #label>
<span>
{{.FieldDesc}}
<el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</span>
</template>
<el-date-picker v-model="searchInfo.start{{.FieldName}}" type="datetime" placeholder="开始日期" :disabled-date="time=> searchInfo.end{{.FieldName}} ? time.getTime() > searchInfo.end{{.FieldName}}.getTime() : false"></el-date-picker>
—
<el-date-picker v-model="searchInfo.end{{.FieldName}}" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.start{{.FieldName}} ? time.getTime() < searchInfo.start{{.FieldName}}.getTime() : false"></el-date-picker>
{{- else}}
<el-date-picker v-model="searchInfo.{{.FieldJson}}" type="datetime" placeholder="搜索条件"></el-date-picker>
{{- end}}
{{- else}}
<el-input v-model="searchInfo.{{.FieldJson}}" placeholder="搜索条件" />
{{- end}}

</el-form-item>
{{ end }}{{ end }}{{ end }}{{ end }}
</template>

<el-form-item>
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button icon="refresh" @click="onReset">重置</el-button>
<el-button type="text" icon="arrow-down" @click="showAllQuery=true" v-if="!showAllQuery">展开</el-button>
<el-button type="text" icon="arrow-up" @click="showAllQuery=false" v-else>收起</el-button>
</el-form-item>
</el-form>
</div>
Expand Down Expand Up @@ -327,6 +393,9 @@ defineOptions({
name: '{{.StructName}}'
})
// 控制更多查询条件显示/隐藏状态
const showAllQuery = ref(false)
// 自动化生成的字典（可能为空）以及字段
{{- range $index, $element := .DictTypes}}
const {{ $element }}Options = ref([])
Expand Down
3 changes: 3 additions & 0 deletions web/src/view/systemTools/autoCode/component/fieldDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,9 @@
<el-form-item label="是否可清空">
<el-switch v-model="middleDate.clearable" />
</el-form-item>
<el-form-item label="隐藏查询条件">
<el-switch :disabled="!middleDate.fieldSearchType" v-model="middleDate.fieldSearchHide" />
</el-form-item>
<el-form-item label="校验失败文案">
<el-input v-model="middleDate.errorText" />
</el-form-item>
Expand Down

0 comments on commit b336529

Please sign in to comment.