部门选择、用户选择组件化,可直接代码生成

pull/22/head
王海通 2021-03-19 19:39:33 +08:00
parent 3e75c46b0a
commit 7df820fb0d
6 changed files with 159 additions and 0 deletions

View File

@ -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>

View File

@ -0,0 +1,3 @@
import DepartmentSelect from './DepartmentSelect'
export default DepartmentSelect

View File

@ -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>

View File

@ -0,0 +1,3 @@
import UserSelect from './UserSelect'
export default UserSelect

View File

@ -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}'}]}]" />

View File

@ -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}'}]}]" />