搜索区封装 select select-dictionary select-dictionary-tree 支持单选多选配置

课程列表界面新增课程类别搜索
This commit is contained in:
18571350067 2021-11-26 18:18:01 +08:00
parent 1a213b6055
commit 4af0bfb066
2 changed files with 14 additions and 8 deletions

View File

@ -7,15 +7,18 @@
<a-input v-if="item.type === 'input'" v-model="form[item.key]" :type="item.type || 'text'" :placeholder="item.placeholder || '请输入'" :allowClear="true" />
<!-- select-common -->
<a-select v-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择" :allowClear="true">
<a-select v-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择" :allowClear="true" :mode="item.mode ? item.mode : 'default'">
<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="请选择" :allowClear="true">
<a-select v-if="item.type === 'select-dic'" v-model="form[item.key]" placeholder="请选择" :allowClear="true" :mode="item.mode ? item.mode : 'default'">
<a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.value">{{ j.name }}</a-select-option>
</a-select>
<!-- select-dictionary-tree -->
<a-tree-select v-if="item.type === 'select-dic-tree'" v-model="form[item.key]" :tree-data="item.options" placeholder="请选择" :multiple="item.mode ? true : false"></a-tree-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 || '请输入日期'" />

View File

@ -32,6 +32,7 @@
import { STable, SearchCom } from '@/components'
import { getCourseList, deleteCourse } from '@/api/course/course'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'
export default {
components: {
@ -44,7 +45,8 @@ export default {
queryParam: { courseName: this.$route.query.courseName || '' },
queryOptions: [
{ type: 'input', placeholder: '课程名称', key: 'courseName' },
{ type: 'select', placeholder: '请选择标签', key: 'tag', options: [] },
{ type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType' , options: [] },
{ type: 'select-dic', placeholder: '请选择标签', key: 'tag', mode: 'multiple', options: [] },
],
loadData: (parameter) => {
return getCourseList(Object.assign(parameter, this.queryParam)).then((res) => {
@ -68,13 +70,14 @@ export default {
dictionaryDropDown() {
this.formLoading = false
//
dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
this.queryOptions[1].options = dictToTree(res.data, [], 0);
})
//
dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
const tagList = res.data
for (let i = 0; i < tagList.length; i++) {
tagList[i].id = tagList[i].value.toString()
}
this.queryOptions[1].options = tagList
this.queryOptions[2].options = res.data
})
},
handleRefresh() {