!36 封装搜索表单
Merge pull request !36 from QuAoLi/auto-5159892-develop-1629876522888
This commit is contained in:
commit
c4460facbd
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<a-form layout="inline" :model="form" ref="queryForm">
|
||||||
|
<a-row :gutter="48">
|
||||||
|
<a-col :md="6" :sm="24" v-for="(item, index) in list" :key="index">
|
||||||
|
<a-form-item :label="item.placeholder">
|
||||||
|
<!-- input -->
|
||||||
|
<a-input v-if="item.type === 'input'" v-model="form[item.key]" :type="item.type || 'text'" :placeholder="item.placeholder || '请输入'"/>
|
||||||
|
|
||||||
|
<!-- select-common -->
|
||||||
|
<a-select v-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择">
|
||||||
|
<a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.id">{{ j.name }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
|
||||||
|
<!-- select-dictionary -->
|
||||||
|
<a-select v-if="item.type === 'select-dic'" v-model="form[item.key]" placeholder="请选择">
|
||||||
|
<a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.value">{{ j.name }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
|
||||||
|
<!-- date -->
|
||||||
|
<a-date-picker
|
||||||
|
v-if="item.type === 'date'"
|
||||||
|
v-model="form[item.key]"
|
||||||
|
style="width: 100%"
|
||||||
|
:format="item.format"
|
||||||
|
:valueFormat="item.format"
|
||||||
|
:placeholder="item.placeholder || '请输入日期'"/>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<a-button type="primary" @click="handleQuery">查询</a-button>
|
||||||
|
<a-button @click="resetQuery">重置</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleQuery () {
|
||||||
|
this.$emit('search')
|
||||||
|
},
|
||||||
|
resetQuery () {
|
||||||
|
this.$emit('reset')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
|
@ -26,6 +26,7 @@ import StandardFormRow from '@/components/StandardFormRow'
|
||||||
import ArticleListContent from '@/components/ArticleListContent'
|
import ArticleListContent from '@/components/ArticleListContent'
|
||||||
|
|
||||||
import Dialog from '@/components/Dialog'
|
import Dialog from '@/components/Dialog'
|
||||||
|
import SearchCom from '@/components/SearchCom'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
AvatarList,
|
AvatarList,
|
||||||
|
@ -52,5 +53,6 @@ export {
|
||||||
StandardFormRow,
|
StandardFormRow,
|
||||||
ArticleListContent,
|
ArticleListContent,
|
||||||
|
|
||||||
Dialog
|
Dialog,
|
||||||
|
SearchCom
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,27 +2,12 @@
|
||||||
<page-header-wrapper :title="false">
|
<page-header-wrapper :title="false">
|
||||||
<a-card :bordered="false">
|
<a-card :bordered="false">
|
||||||
<div class="table-page-search-wrapper">
|
<div class="table-page-search-wrapper">
|
||||||
<a-form layout="inline">
|
<SearchCom
|
||||||
<a-row :gutter="48">
|
:form="queryParam"
|
||||||
<a-col :md="6" :sm="24">
|
:list="queryOptions"
|
||||||
<a-form-item label="词典名称">
|
@search="handleRefresh"
|
||||||
<a-input v-model="queryParam.dictionaryName" placeholder="请输入词典名称" @pressEnter="handleRefresh"/>
|
@reset="() => {queryParam = {}, handleRefresh()}" >
|
||||||
</a-form-item>
|
</SearchCom>
|
||||||
</a-col>
|
|
||||||
<a-col :md="6" :sm="24">
|
|
||||||
<a-form-item label="词典编码">
|
|
||||||
<a-input v-model="queryParam.dictionaryCode" placeholder="请输入词典编码" @pressEnter="handleRefresh"/>
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :md="6" :sm="24">
|
|
||||||
<a-button type="primary" @click="handleRefresh">查询</a-button>
|
|
||||||
<a-button @click="() => {queryParam = {}, handleRefresh()}">重置</a-button>
|
|
||||||
</a-col>
|
|
||||||
<a-col :md="6" :sm="24" align="right" >
|
|
||||||
<a-button type="primary" @click="handleCreate">新增</a-button>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</a-form>
|
|
||||||
</div>
|
</div>
|
||||||
<s-table
|
<s-table
|
||||||
ref="table"
|
ref="table"
|
||||||
|
@ -50,18 +35,19 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { dictionaryPage, dictionaryDel } from '@/api/sys/dictionary'
|
import { dictionaryPage, dictionaryDel } from '@/api/sys/dictionary'
|
||||||
import { STable } from '@/components'
|
import { STable, SearchCom } from '@/components'
|
||||||
import DictionaryForm from './DictionaryForm'
|
import DictionaryForm from './DictionaryForm'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DictionaryList',
|
name: 'DictionaryList',
|
||||||
components: {
|
components: {
|
||||||
STable,
|
STable,
|
||||||
|
SearchCom,
|
||||||
DictionaryForm
|
DictionaryForm
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
queryParam: { dictionaryName: null, dictionaryCode: null },
|
queryParam: { dictionaryName: null, dictionaryCode: null, status: null, createTime: null },
|
||||||
selectedRowKeys: [], // 选中行的key 出选择框时需要配置
|
selectedRowKeys: [], // 选中行的key 出选择框时需要配置
|
||||||
selectedRows: [], // 选中行的数据
|
selectedRows: [], // 选中行的数据
|
||||||
columns: [
|
columns: [
|
||||||
|
@ -84,6 +70,14 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
queryOptions: function () {
|
||||||
|
const list = [{ 'value': 1, 'name': '类型1' }, { 'value': 2, 'name': '类型2' }]
|
||||||
|
return [
|
||||||
|
{ type: 'input', placeholder: '词典名称', key: 'dictionaryName' },
|
||||||
|
{ type: 'date', placeholder: '请选择开始时间', key: 'createTime', format: 'YYYY-MM-DD HH:mm:ss' },
|
||||||
|
{ type: 'select', placeholder: '请选择类型', key: 'status', options: [{ name: '类型', id: undefined }, ...list] }
|
||||||
|
]
|
||||||
|
},
|
||||||
rowSelection () {
|
rowSelection () {
|
||||||
return {
|
return {
|
||||||
selectedRowKeys: this.selectedRowKeys,
|
selectedRowKeys: this.selectedRowKeys,
|
||||||
|
@ -106,7 +100,7 @@ export default {
|
||||||
},
|
},
|
||||||
// 删
|
// 删
|
||||||
handleDelete (record) {
|
handleDelete (record) {
|
||||||
dictionaryDel({ ids: record.id, deleteReason: "" }).then(() => {
|
dictionaryDel({ ids: record.id, deleteReason: '' }).then(() => {
|
||||||
this.$refs.table.refresh()
|
this.$refs.table.refresh()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue