mirror of https://gitee.com/xiaonuobase/snowy
部门选择、用户选择组件化,可直接代码生成
parent
3e75c46b0a
commit
7df820fb0d
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<a-tree-select
|
||||
:dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
allowClear
|
||||
:treeData="orgTree"
|
||||
:placeholder="placeholder"
|
||||
treeDefaultExpandAll
|
||||
@change="onchange"
|
||||
>
|
||||
<span slot="title" slot-scope="{ id }">{{ id }}</span>
|
||||
</a-tree-select>
|
||||
</template>
|
||||
<script>
|
||||
import { getOrgTree } from '@/api/modular/system/orgManage'
|
||||
|
||||
export default {
|
||||
name: 'DepartSelect',
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String
|
||||
},
|
||||
value: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orgTree: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOrgData()
|
||||
},
|
||||
methods: {
|
||||
getOrgData() {
|
||||
getOrgTree().then((res) => {
|
||||
this.orgTree = res
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 选择树机构,初始化机构名称于表单中
|
||||
*/
|
||||
onchange (value) {
|
||||
this.$emit('change', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,3 @@
|
|||
import DepartmentSelect from './DepartmentSelect'
|
||||
|
||||
export default DepartmentSelect
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<a-select
|
||||
:mode="model"
|
||||
showSearch
|
||||
:value="selectValue"
|
||||
:filter-option="false"
|
||||
:placeholder="placeholder"
|
||||
:not-found-content="fetching ? undefined : null"
|
||||
@search="fetchUser"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-spin v-if="fetching" slot="notFoundContent" size="small" />
|
||||
<a-select-option v-for="d in data" :key="d.value">
|
||||
{{ d.text }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script>
|
||||
import debounce from 'lodash/debounce'
|
||||
import { getUserPage } from '@/api/modular/system/userManage'
|
||||
|
||||
export default {
|
||||
name: 'UserSelect',
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String
|
||||
},
|
||||
value: {
|
||||
type: String
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const multiple = this.multiple
|
||||
this.fetchUser = debounce(this.fetchUser, 800)
|
||||
return {
|
||||
data: [],
|
||||
fetching: false,
|
||||
selectValue: multiple ? [] : undefined,
|
||||
model: multiple ? 'multiple' : 'default'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchUser(key) {
|
||||
console.log('fetching user', key)
|
||||
this.data = []
|
||||
this.fetching = true
|
||||
|
||||
const params = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
searchValue: key
|
||||
}
|
||||
this.userFetching = true
|
||||
|
||||
getUserPage(params).then((res) => {
|
||||
this.data = res.rows.map(user => ({
|
||||
text: `${user.name} ${user.account}`,
|
||||
value: user.id
|
||||
}))
|
||||
}).finally(() => {
|
||||
this.fetching = false
|
||||
})
|
||||
},
|
||||
handleChange(value) {
|
||||
Object.assign(this, {
|
||||
selectValue: value,
|
||||
fetching: false
|
||||
})
|
||||
this.$emit('change', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,3 @@
|
|||
import UserSelect from './UserSelect'
|
||||
|
||||
export default UserSelect
|
|
@ -26,6 +26,20 @@
|
|||
has-feedback
|
||||
>
|
||||
#end
|
||||
#if (${column.effectType} == "user")
|
||||
#if (${column.whetherRequired} == "Y")
|
||||
<user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}!'}]}]" />
|
||||
#else
|
||||
<user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
|
||||
#end
|
||||
#end
|
||||
#if (${column.effectType} == "depart")
|
||||
#if (${column.whetherRequired} == "Y")
|
||||
<depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}!'}]}]" />
|
||||
#else
|
||||
<depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
|
||||
#end
|
||||
#end
|
||||
#if (${column.effectType} == "input")
|
||||
#if (${column.whetherRequired} == "Y")
|
||||
<a-input placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}!'}]}]" />
|
||||
|
|
|
@ -28,6 +28,20 @@
|
|||
has-feedback
|
||||
>
|
||||
#end
|
||||
#if (${column.effectType} == "user")
|
||||
#if (${column.whetherRequired} == "Y")
|
||||
<user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}!'}]}]" />
|
||||
#else
|
||||
<user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
|
||||
#end
|
||||
#end
|
||||
#if (${column.effectType} == "depart")
|
||||
#if (${column.whetherRequired} == "Y")
|
||||
<depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}!'}]}]" />
|
||||
#else
|
||||
<depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
|
||||
#end
|
||||
#end
|
||||
#if (${column.effectType} == "input")
|
||||
#if (${column.whetherRequired} == "Y")
|
||||
<a-input placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}!'}]}]" />
|
||||
|
|
Loading…
Reference in New Issue