!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 Dialog from '@/components/Dialog'
|
||||
import SearchCom from '@/components/SearchCom'
|
||||
|
||||
export {
|
||||
AvatarList,
|
||||
|
@ -52,5 +53,6 @@ export {
|
|||
StandardFormRow,
|
||||
ArticleListContent,
|
||||
|
||||
Dialog
|
||||
Dialog,
|
||||
SearchCom
|
||||
}
|
||||
|
|
|
@ -2,27 +2,12 @@
|
|||
<page-header-wrapper :title="false">
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="词典名称">
|
||||
<a-input v-model="queryParam.dictionaryName" placeholder="请输入词典名称" @pressEnter="handleRefresh"/>
|
||||
</a-form-item>
|
||||
</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>
|
||||
<SearchCom
|
||||
:form="queryParam"
|
||||
:list="queryOptions"
|
||||
@search="handleRefresh"
|
||||
@reset="() => {queryParam = {}, handleRefresh()}" >
|
||||
</SearchCom>
|
||||
</div>
|
||||
<s-table
|
||||
ref="table"
|
||||
|
@ -50,18 +35,19 @@
|
|||
|
||||
<script>
|
||||
import { dictionaryPage, dictionaryDel } from '@/api/sys/dictionary'
|
||||
import { STable } from '@/components'
|
||||
import { STable, SearchCom } from '@/components'
|
||||
import DictionaryForm from './DictionaryForm'
|
||||
|
||||
export default {
|
||||
name: 'DictionaryList',
|
||||
components: {
|
||||
STable,
|
||||
SearchCom,
|
||||
DictionaryForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
queryParam: { dictionaryName: null, dictionaryCode: null },
|
||||
queryParam: { dictionaryName: null, dictionaryCode: null, status: null, createTime: null },
|
||||
selectedRowKeys: [], // 选中行的key 出选择框时需要配置
|
||||
selectedRows: [], // 选中行的数据
|
||||
columns: [
|
||||
|
@ -84,6 +70,14 @@ export default {
|
|||
}
|
||||
},
|
||||
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 () {
|
||||
return {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
|
@ -106,7 +100,7 @@ export default {
|
|||
},
|
||||
// 删
|
||||
handleDelete (record) {
|
||||
dictionaryDel({ ids: record.id, deleteReason: "" }).then(() => {
|
||||
dictionaryDel({ ids: record.id, deleteReason: '' }).then(() => {
|
||||
this.$refs.table.refresh()
|
||||
})
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue