代码初始化
This commit is contained in:
wangchengjun
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<j-modal
|
||||
centered
|
||||
:title="name + '选择'"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
@cancel="close"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-row :gutter="18">
|
||||
<a-col :span="16">
|
||||
<!-- 查询区域 -->
|
||||
<a-form layout="inline" class="j-inline-form">
|
||||
<!-- 固定条件 -->
|
||||
<a-form-item :label="(queryParamText||name)">
|
||||
<a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
|
||||
</a-form-item>
|
||||
<!-- 动态生成的查询条件 -->
|
||||
<j-select-biz-query-item v-if="queryConfig.length>0" v-show="showMoreQueryItems" :queryParam="queryParam" :queryConfig="queryConfig" @pressEnter="searchQuery"/>
|
||||
<!-- 按钮 -->
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
<a v-if="queryConfig.length>0" @click="showMoreQueryItems=!showMoreQueryItems" style="margin-left: 8px">
|
||||
{{ showMoreQueryItems ? '收起' : '展开' }}
|
||||
<a-icon :type="showMoreQueryItems ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</a-form>
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
bordered
|
||||
:rowKey="rowKey"
|
||||
:columns="innerColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 240 }"
|
||||
:rowSelection="{selectedRowKeys, onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}"
|
||||
:customRow="customRowFn"
|
||||
@change="handleTableChange">
|
||||
</a-table>
|
||||
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
|
||||
|
||||
<a-table size="middle" :rowKey="rowKey" bordered v-bind="selectedTable">
|
||||
<span slot="action" slot-scope="text, record, index">
|
||||
<a @click="handleDeleteSelected(record, index)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import { cloneObject, pushIfNotExist } from '@/utils/util'
|
||||
import JSelectBizQueryItem from './JSelectBizQueryItem'
|
||||
|
||||
export default {
|
||||
name: 'JSelectBizComponentModal',
|
||||
mixins: [JeroListMixin],
|
||||
components: {Ellipsis, JSelectBizQueryItem},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 900
|
||||
},
|
||||
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
// 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname
|
||||
valueUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
displayKey: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
// 查询条件Code
|
||||
queryParamCode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 查询条件文字
|
||||
queryParamText: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 查询配置
|
||||
queryConfig: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
// 过长裁剪长度，设置为 -1 代表不裁剪
|
||||
ellipsisLength: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerValue: [],
|
||||
// 已选择列表
|
||||
selectedTable: {
|
||||
pagination: false,
|
||||
scroll: { y: 240 },
|
||||
columns: [
|
||||
{
|
||||
...this.columns[0],
|
||||
width: this.columns[0].widthRight || this.columns[0].width,
|
||||
},
|
||||
{ title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
|
||||
],
|
||||
dataSource: [],
|
||||
},
|
||||
renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),
|
||||
url: { list: this.listUrl },
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
options: [],
|
||||
dataSourceMap: {},
|
||||
showMoreQueryItems: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 表头
|
||||
innerColumns() {
|
||||
let columns = cloneObject(this.columns)
|
||||
columns.forEach(column => {
|
||||
// 给所有的列加上过长裁剪
|
||||
if (this.ellipsisLength !== -1) {
|
||||
column.customRender = (text) => this.renderEllipsis(text)
|
||||
}
|
||||
})
|
||||
return columns
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.innerValue = cloneObject(val)
|
||||
this.selectedRowKeys = []
|
||||
this.valueWatchHandler(val)
|
||||
this.queryOptionsByValue(val)
|
||||
}
|
||||
},
|
||||
dataSource: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.emitOptions(val)
|
||||
this.valueWatchHandler(this.innerValue)
|
||||
}
|
||||
},
|
||||
selectedRowKeys: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(val) {
|
||||
//update--begin--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
|
||||
if(this.innerValue){
|
||||
this.innerValue.length=0;
|
||||
}
|
||||
//update--end--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
|
||||
this.selectedTable.dataSource = val.map(key => {
|
||||
for (let data of this.dataSource) {
|
||||
if (data[this.rowKey] === key) {
|
||||
pushIfNotExist(this.innerValue, data[this.valueKey])
|
||||
return data
|
||||
}
|
||||
}
|
||||
for (let data of this.selectedTable.dataSource) {
|
||||
if (data[this.rowKey] === key) {
|
||||
pushIfNotExist(this.innerValue, data[this.valueKey])
|
||||
return data
|
||||
}
|
||||
}
|
||||
console.warn('未找到选择的行信息，key：' + key)
|
||||
return {}
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
/** 关闭弹窗 */
|
||||
close() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
|
||||
valueWatchHandler(val) {
|
||||
val.forEach(item => {
|
||||
this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
|
||||
if (data[this.valueKey] === item) {
|
||||
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
queryOptionsByValue(value) {
|
||||
if (!value || value.length === 0) {
|
||||
return
|
||||
}
|
||||
// 判断options是否存在value，如果已存在数据就不再请求后台了
|
||||
let notExist = false
|
||||
for (let val of value) {
|
||||
let find = false
|
||||
for (let option of this.options) {
|
||||
if (val === option.value) {
|
||||
find = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!find) {
|
||||
notExist = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!notExist) return
|
||||
getAction(this.valueUrl || this.listUrl, {
|
||||
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
|
||||
[this.valueKey]: value.join(',') + ',',
|
||||
pageNo: 1,
|
||||
pageSize: value.length
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
let dataSource = res.result
|
||||
if (!(dataSource instanceof Array)) {
|
||||
dataSource = res.result.records
|
||||
}
|
||||
this.emitOptions(dataSource, (data) => {
|
||||
pushIfNotExist(this.innerValue, data[this.valueKey])
|
||||
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
|
||||
pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
emitOptions(dataSource, callback) {
|
||||
dataSource.forEach(data => {
|
||||
let key = data[this.valueKey]
|
||||
this.dataSourceMap[key] = data
|
||||
pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
|
||||
typeof callback === 'function' ? callback(data) : ''
|
||||
})
|
||||
this.$emit('options', this.options, this.dataSourceMap)
|
||||
},
|
||||
|
||||
/** 完成选择 */
|
||||
handleOk() {
|
||||
let value = this.selectedTable.dataSource.map(data => data[this.valueKey])
|
||||
this.$emit('input', value)
|
||||
this.close()
|
||||
},
|
||||
/** 删除已选择的 */
|
||||
handleDeleteSelected(record, index) {
|
||||
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
|
||||
//update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
|
||||
this.selectedTable.dataSource.splice(this.selectedTable.dataSource.indexOf(record), 1)
|
||||
this.innerValue.splice(this.innerValue.indexOf(record[this.valueKey]), 1)
|
||||
console.log("this.selectedRowKeys:",this.selectedRowKeys)
|
||||
console.log("this.selectedTable.dataSource:",this.selectedTable.dataSource)
|
||||
//update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
|
||||
},
|
||||
|
||||
customRowFn(record) {
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
let key = record[this.rowKey]
|
||||
if (!this.multiple) {
|
||||
this.selectedRowKeys = [key]
|
||||
this.selectedTable.dataSource = [record]
|
||||
} else {
|
||||
let index = this.selectedRowKeys.indexOf(key)
|
||||
if (index === -1) {
|
||||
this.selectedRowKeys.push(key)
|
||||
this.selectedTable.dataSource.push(record)
|
||||
} else {
|
||||
this.handleDeleteSelected(record, index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.full-form-item {
|
||||
display: flex;
|
||||
margin-right: 0;
|
||||
|
||||
/deep/ .ant-form-item-control-wrapper {
|
||||
flex: 1 1;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.j-inline-form {
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/deep/ .ant-form-item-label {
|
||||
line-height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/deep/ .ant-form-item-control {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
export default {
|
||||
name: 'JSelectBizQueryItem',
|
||||
props: {
|
||||
queryParam: Object,
|
||||
queryConfig: Array,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
renderQueryItem() {
|
||||
return this.queryConfig.map(queryItem => {
|
||||
const {key, label, placeholder, dictCode, props, customRender} = queryItem
|
||||
const options = {
|
||||
props: {},
|
||||
on: {
|
||||
pressEnter: () => this.$emit('pressEnter'),
|
||||
}
|
||||
}
|
||||
if (props != null) {
|
||||
Object.assign(options.props, props)
|
||||
}
|
||||
if (placeholder === undefined) {
|
||||
if (dictCode) {
|
||||
options.props['placeholder'] = `请选择${label}`
|
||||
} else {
|
||||
options.props['placeholder'] = `请输入${label}`
|
||||
}
|
||||
} else {
|
||||
options.props['placeholder'] = placeholder
|
||||
}
|
||||
|
||||
let input
|
||||
if (typeof customRender === 'function') {
|
||||
input = customRender.call(this, {key, options, queryParam: this.queryParam})
|
||||
} else if (dictCode) {
|
||||
input = <j-dict-select-tag {...options} vModel={this.queryParam[key]} dictCode={dictCode} style="width:180px;"/>
|
||||
} else {
|
||||
input = <a-input {...options} vModel={this.queryParam[key]}/>
|
||||
}
|
||||
return <a-form-item key={key} label={label}>{input}</a-form-item>
|
||||
})
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return <span>{this.renderQueryItem()}</span>
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
# JSelectBizComponent
|
||||
|
||||
Jero 选择组件的公共可复用组件
|
||||
|
||||
## 引用方式
|
||||
|
||||
```js
|
||||
import JSelectBizComponent from '@/src/components/jerobiz/JSelectBizComponent'
|
||||
|
||||
export default {
|
||||
components: { JSelectBizComponent }
|
||||
}
|
||||
```
|
||||
|
||||
## 参数
|
||||
|
||||
### 配置参数
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 备注 |
|
||||
|-----------------------|---------|------|--------------|--------------------------------------------------------------------------------------|
|
||||
| rowKey | String | | "id" | 唯一标识的字段名 |
|
||||
| value(v-model) | String | | "" | 默认选择的数据，多个用半角逗号分割 |
|
||||
| name | String | | "" | 显示名字，例如选择用户就填写"用户" |
|
||||
| listUrl | String | 是 | | 数据请求地址，必须是封装了分页的地址 |
|
||||
| valueUrl | String | | "" | 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname |
|
||||
| displayKey | String | | null | 显示在标签上的字段 key ，不传则直接显示数据 |
|
||||
| returnKeys | Array | | ['id', 'id'] | v-model 绑定的 keys，是个数组，默认使用第二项，当配置了 `returnId=true` 就返回第一项 |
|
||||
| returnId | Boolean | | false | 返回ID，设为true后将返回配置的 `returnKeys` 中的第一项 |
|
||||
| selectButtonText | String | | "选择" | 选择按钮的文字 |
|
||||
| queryParamText | String | | null | 查询条件显示文字，不传则使用 `name` |
|
||||
| columns | Array | 是 | | 列配置项，与antd的table的配置完全一致。列的第一项会被配置成右侧已选择的列表上 |
|
||||
| columns[0].widthRight | String | | null | 仅列的第一项可以应用此配置，表示右侧已选择列表的宽度，建议 `70%`，不传则应用`width` |
|
||||
| placeholder | String | | "请选择" | 占位符 |
|
||||
| disabled | Boolean | | false | 是否禁用 |
|
||||
| multiple | Boolean | | false | 是否可多选 |
|
||||
| buttons | Boolean | | true | 是否显示"选择"按钮，如果不显示，可以直接点击文本框打开选择界面 |
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<a-row class="j-select-biz-component-box" type="flex" :gutter="8">
|
||||
<a-col class="left" :class="{'full': !buttons}">
|
||||
<slot name="left">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
:placeholder="placeholder"
|
||||
v-model="selectValue"
|
||||
:options="selectOptions"
|
||||
allowClear
|
||||
:disabled="disabled"
|
||||
:open="selectOpen"
|
||||
style="width: 100%;"
|
||||
@dropdownVisibleChange="handleDropdownVisibleChange"
|
||||
@click.native="visible=(buttons || disabled ?visible:true)"
|
||||
/>
|
||||
</slot>
|
||||
</a-col>
|
||||
|
||||
<a-col v-if="buttons" class="right">
|
||||
<a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
|
||||
</a-col>
|
||||
|
||||
<j-select-biz-component-modal
|
||||
v-model="selectValue"
|
||||
:visible.sync="visible"
|
||||
v-bind="modalProps"
|
||||
@options="handleOptions"
|
||||
/>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectBizComponentModal from './JSelectBizComponentModal'
|
||||
|
||||
export default {
|
||||
name: 'JSelectBizComponent',
|
||||
components: { JSelectBizComponentModal },
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/** 是否返回 id，默认 false，返回 code */
|
||||
returnId: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否支持多选，默认 true
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示按钮，默认 true
|
||||
buttons: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 显示的 Key
|
||||
displayKey: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 返回的 key
|
||||
returnKeys: {
|
||||
type: Array,
|
||||
default: () => ['id', 'id']
|
||||
},
|
||||
// 选择按钮文字
|
||||
selectButtonText: {
|
||||
type: String,
|
||||
default: '选择'
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectValue: [],
|
||||
selectOptions: [],
|
||||
dataSourceMap: {},
|
||||
visible: false,
|
||||
selectOpen: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
valueKey() {
|
||||
return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
|
||||
},
|
||||
modalProps() {
|
||||
return Object.assign({
|
||||
valueKey: this.valueKey,
|
||||
multiple: this.multiple,
|
||||
returnKeys: this.returnKeys,
|
||||
displayKey: this.displayKey || this.valueKey
|
||||
}, this.$attrs)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.selectValue = val.split(',')
|
||||
} else {
|
||||
this.selectValue = []
|
||||
}
|
||||
}
|
||||
},
|
||||
selectValue: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
let rows = val.map(key => this.dataSourceMap[key])
|
||||
let data = val.join(',')
|
||||
if (data !== this.value) {
|
||||
this.$emit('select', rows)
|
||||
this.$emit('input', data)
|
||||
this.$emit('change', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOptions(options, dataSourceMap) {
|
||||
this.selectOptions = options
|
||||
this.dataSourceMap = dataSourceMap
|
||||
},
|
||||
handleDropdownVisibleChange() {
|
||||
// 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
|
||||
this.selectOpen = true
|
||||
this.$nextTick(() => {
|
||||
this.selectOpen = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.j-select-biz-component-box {
|
||||
|
||||
@width: 82px;
|
||||
|
||||
.left {
|
||||
//width: calc(100% - @width - 8px);
|
||||
width: calc(100% - @width);
|
||||
}
|
||||
|
||||
.right {
|
||||
width: @width;
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .ant-select-search__field {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="components-input-demo-presuffix">
|
||||
<!---->
|
||||
<a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled">
|
||||
<a-icon slot="prefix" type="cluster" title="部门选择控件"/>
|
||||
<a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
|
||||
</a-input>
|
||||
|
||||
<j-select-depart-modal
|
||||
ref="innerDepartSelectModal"
|
||||
:modal-width="modalWidth"
|
||||
:multi="multi"
|
||||
:rootOpened="rootOpened"
|
||||
:depart-id="departIds"
|
||||
@ok="handleOK"
|
||||
@initComp="initComp"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectDepartModal from './modal/JSelectDepartModal'
|
||||
export default {
|
||||
name: 'JSelectDepart',
|
||||
components:{
|
||||
JSelectDepartModal
|
||||
},
|
||||
props:{
|
||||
modalWidth:{
|
||||
type:Number,
|
||||
default:500,
|
||||
required:false
|
||||
},
|
||||
multi:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
},
|
||||
rootOpened:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
required:false
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 自定义返回字段，默认返回 id
|
||||
customReturnField: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
backDepart: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
departNames:"",
|
||||
departIds:''
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.departIds = this.value
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
//update-begin-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2
|
||||
// if (this.customReturnField === 'id') {
|
||||
this.departIds = val
|
||||
// }
|
||||
//update-end-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initComp(departNames){
|
||||
this.departNames = departNames
|
||||
//update-begin-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
|
||||
//TODO 当返回字段为部门名称时会有问题,因为部门名称不唯一
|
||||
//返回字段不为id时，根据返回字段获取id
|
||||
if(this.customReturnField !== 'id' && this.value){
|
||||
const dataList = this.$refs.innerDepartSelectModal.dataList;
|
||||
this.departIds = this.value.split(',').map(item => {
|
||||
const data = dataList.filter(d=>d[this.customReturnField] === item)
|
||||
return data.length > 0 ? data[0].id : ''
|
||||
}).join(',')
|
||||
}
|
||||
//update-end-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
|
||||
this.backDeparInfo()
|
||||
},
|
||||
//返回选中的部门信息
|
||||
backDeparInfo(){
|
||||
if(this.backDepart===true){
|
||||
if(this.departIds && this.departIds.length>0){
|
||||
let arr1 = this.departIds.split(',')
|
||||
let arr2 = this.departNames.split(',')
|
||||
let info = []
|
||||
for(let i=0;i<arr1.length;i++){
|
||||
info.push({
|
||||
value: arr1[i],
|
||||
text: arr2[i]
|
||||
})
|
||||
}
|
||||
this.$emit('back', info)
|
||||
}
|
||||
}
|
||||
},
|
||||
openModal(){
|
||||
this.$refs.innerDepartSelectModal.show()
|
||||
},
|
||||
handleOK(rows, idstr) {
|
||||
let value = ''
|
||||
if (!rows && rows.length <= 0) {
|
||||
this.departNames = ''
|
||||
this.departIds = ''
|
||||
} else {
|
||||
value = rows.map(row => row[this.customReturnField]).join(',')
|
||||
this.departNames = rows.map(row => row['departName']).join(',')
|
||||
this.departIds = idstr
|
||||
}
|
||||
this.$emit("change", value)
|
||||
},
|
||||
getDepartNames(){
|
||||
return this.departNames
|
||||
},
|
||||
handleEmpty(){
|
||||
this.handleOK('')
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.components-input-demo-presuffix .anticon-close-circle {
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
transition: color 0.3s;
|
||||
font-size: 12px;
|
||||
}
|
||||
.components-input-demo-presuffix .anticon-close-circle:hover {
|
||||
color: #f5222d;
|
||||
}
|
||||
.components-input-demo-presuffix .anticon-close-circle:active {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<!-- 定义在这里的参数都是不可在外部覆盖的，防止出现问题 -->
|
||||
<j-select-biz-component
|
||||
:value="value"
|
||||
:ellipsisLength="25"
|
||||
:listUrl="url.list"
|
||||
:columns="columns"
|
||||
v-on="$listeners"
|
||||
v-bind="attrs"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JDate from '@comp/jero/JDate'
|
||||
import JSelectBizComponent from './JSelectBizComponent'
|
||||
|
||||
export default {
|
||||
name: 'JSelectMultiUser',
|
||||
components: {JDate, JSelectBizComponent},
|
||||
props: {
|
||||
value: null, // any type
|
||||
queryConfig: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: { list: '/sys/user/page' },
|
||||
columns: [
|
||||
{ title: '姓名', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'realname' },
|
||||
{ title: '账号', align: 'center', width: '25%', dataIndex: 'username' },
|
||||
{ title: '电话', align: 'center', width: '20%', dataIndex: 'phone' },
|
||||
{ title: '出生日期', align: 'center', width: '20%', dataIndex: 'birthday' }
|
||||
],
|
||||
// 定义在这里的参数都是可以在外部传递覆盖的，可以更灵活的定制化使用的组件
|
||||
default: {
|
||||
name: '用户',
|
||||
width: 1200,
|
||||
displayKey: 'realname',
|
||||
returnKeys: ['id', 'username'],
|
||||
queryParamText: '账号',
|
||||
},
|
||||
// 多条件查询配置
|
||||
queryConfigDefault: [
|
||||
{
|
||||
key: 'sex',
|
||||
label: '性别',
|
||||
// 如果包含 dictCode，那么就会显示成下拉框
|
||||
dictCode: 'sex',
|
||||
},
|
||||
{
|
||||
key: 'birthday',
|
||||
label: '生日',
|
||||
placeholder: '请选择出生日期',
|
||||
// 如果想要使用局部注册的组件，就必须要使用箭头函数
|
||||
customRender: ({key, queryParam, options}) => {
|
||||
return <j-date {...options} vModel={queryParam[key]} style="width:180px;"/>
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
attrs() {
|
||||
return Object.assign(this.default, this.$attrs, {
|
||||
queryConfig: this.queryConfigDefault.concat(this.queryConfig)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<j-select-biz-component
|
||||
:value="value"
|
||||
|
||||
name="角色"
|
||||
displayKey="roleName"
|
||||
|
||||
:returnKeys="returnKeys"
|
||||
:listUrl="url.list"
|
||||
:columns="columns"
|
||||
queryParamText="角色编码"
|
||||
|
||||
v-on="$listeners"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectBizComponent from './JSelectBizComponent'
|
||||
|
||||
export default {
|
||||
name: 'JSelectRole',
|
||||
components: { JSelectBizComponent },
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
returnKeys: ['id', 'roleCode'],
|
||||
url: { list: '/sys/role/page' },
|
||||
columns: [
|
||||
{ title: '角色名称', dataIndex: 'roleName', align: 'center', width: 120 },
|
||||
{ title: '角色编码', dataIndex: 'roleCode', align: 'center', width: 120 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input-search
|
||||
v-model="userNames"
|
||||
placeholder="请先选择用户"
|
||||
readOnly
|
||||
unselectable="on"
|
||||
@search="onSearchDepUser">
|
||||
<a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
|
||||
</a-input-search>
|
||||
<j-select-user-by-dep-modal ref="selectModal" :modal-width="modalWidth" :multi="multi" @ok="selectOK" :user-ids="value" @initComp="initComp"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectUserByDepModal from './modal/JSelectUserByDepModal'
|
||||
|
||||
export default {
|
||||
name: 'JSelectUserByDep',
|
||||
components: {JSelectUserByDepModal},
|
||||
props: {
|
||||
modalWidth: {
|
||||
type: Number,
|
||||
default: 1250,
|
||||
required: false
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
multi: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false
|
||||
},
|
||||
backUser: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userIds: "",
|
||||
userNames: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.userIds = this.value
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.userIds = val
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
methods: {
|
||||
initComp(userNames) {
|
||||
this.userNames = userNames
|
||||
},
|
||||
//返回选中的用户信息
|
||||
backDeparInfo(){
|
||||
if(this.backUser===true){
|
||||
if(this.userIds && this.userIds.length>0){
|
||||
let arr1 = this.userIds.split(',')
|
||||
let arr2 = this.userNames.split(',')
|
||||
let info = []
|
||||
for(let i=0;i<arr1.length;i++){
|
||||
info.push({
|
||||
value: arr1[i],
|
||||
text: arr2[i]
|
||||
})
|
||||
}
|
||||
this.$emit('back', info)
|
||||
}
|
||||
}
|
||||
},
|
||||
onSearchDepUser() {
|
||||
this.$refs.selectModal.showModal()
|
||||
},
|
||||
selectOK(rows, idstr) {
|
||||
console.log("当前选中用户", rows)
|
||||
console.log("当前选中用户ID", idstr)
|
||||
if (!rows) {
|
||||
this.userNames = ''
|
||||
this.userIds = ''
|
||||
} else {
|
||||
let temp = ''
|
||||
for (let item of rows) {
|
||||
temp += ',' + item.realname
|
||||
}
|
||||
this.userNames = temp.substring(1)
|
||||
this.userIds = idstr
|
||||
}
|
||||
this.$emit("change", this.userIds)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
# JSelectDepart 部门选择组件
|
||||
选择部门组件,存储部门ID,显示部门名称
|
||||
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 |说明|
|
||||
|--------------|---------|----|---------|
|
||||
| modalWidth |Number | | 弹框宽度 默认500 |
|
||||
| multi |Boolean | | 是否多选 默认false |
|
||||
| rootOpened |Boolean | | 是否展开根节点 默认true |
|
||||
| disabled |Boolean | | 是否禁用 默认false|
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<template>
|
||||
<a-form :form="form">
|
||||
<a-form-item label="部门选择v-decorator" style="width: 300px">
|
||||
<j-select-depart v-decorator="['bumen']"/>
|
||||
{{ getFormFieldValue('bumen') }}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="部门选择v-model" style="width: 300px">
|
||||
<j-select-depart v-model="bumen"/>
|
||||
{{ bumen }}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="部门多选v-model" style="width: 300px">
|
||||
<j-select-depart v-model="bumens" :multi="true"/>
|
||||
{{ bumens }}
|
||||
</a-form-item>
|
||||
|
||||
</a-form >
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectDepart from '@/components/jerobiz/JSelectDepart'
|
||||
export default {
|
||||
components: {JSelectDepart},
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
bumen:"",
|
||||
bumens:""
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getFormFieldValue(field){
|
||||
return this.form.getFieldValue(field)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
# JSelectMultiUser 用户多选组件
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<template>
|
||||
<a-form :form="form">
|
||||
<a-form-item label="用户选择v-decorator" style="width: 500px">
|
||||
<j-select-multi-user v-decorator="['users']"/>
|
||||
{{ getFormFieldValue('users') }}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="用户选择v-model" style="width: 500px">
|
||||
<j-select-multi-user v-model="users" ></j-select-multi-user>
|
||||
{{ users }}
|
||||
</a-form-item>
|
||||
|
||||
</a-form >
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectMultiUser from '@/components/jerobiz/JSelectMultiUser'
|
||||
export default {
|
||||
components: {JSelectMultiUser},
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
users:"",
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getFormFieldValue(field){
|
||||
return this.form.getFieldValue(field)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
# JSelectUserByDep 根据部门选择用户
|
||||
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 |说明|
|
||||
|--------------|---------|----|---------|
|
||||
| modalWidth |Number | | 弹框宽度 默认1250 |
|
||||
| disabled |Boolean | | 是否禁用 |
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<template>
|
||||
<a-form :form="form">
|
||||
<a-form-item label="用户选择v-decorator" style="width: 500px">
|
||||
<j-select-user-by-dep v-decorator="['users']"/>
|
||||
{{ getFormFieldValue('users') }}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="用户选择v-model" style="width: 500px">
|
||||
<j-select-user-by-dep v-model="users" ></j-select-user-by-dep>
|
||||
{{ users }}
|
||||
</a-form-item>
|
||||
|
||||
</a-form >
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectUserByDep from '@/components/jerobiz/JSelectUserByDep'
|
||||
export default {
|
||||
components: {JSelectUserByDep},
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
users:"",
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getFormFieldValue(field){
|
||||
return this.form.getFieldValue(field)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<j-modal
|
||||
title="选择部门"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
wrapClassName="j-depart-select-modal"
|
||||
switchFullscreen
|
||||
cancelText="关闭">
|
||||
<a-spin tip="Loading..." :spinning="false">
|
||||
<a-input-search style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @search="onSearch" />
|
||||
<a-tree
|
||||
checkable
|
||||
class="my-dept-select-tree"
|
||||
:treeData="treeData"
|
||||
:checkStrictly="true"
|
||||
@check="onCheck"
|
||||
@select="onSelect"
|
||||
@expand="onExpand"
|
||||
:autoExpandParent="autoExpandParent"
|
||||
:expandedKeys="expandedKeys"
|
||||
:checkedKeys="checkedKeys">
|
||||
|
||||
<template slot="title" slot-scope="{title}">
|
||||
<span v-if="title.indexOf(searchValue) > -1">
|
||||
{{title.substr(0, title.indexOf(searchValue))}}
|
||||
<span style="color: #f50">{{searchValue}}</span>
|
||||
{{title.substr(title.indexOf(searchValue) + searchValue.length)}}
|
||||
</span>
|
||||
<span v-else>{{title}}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
|
||||
</a-spin>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryDepartTreeList } from '@/api/api'
|
||||
export default {
|
||||
name: 'JSelectDepartModal',
|
||||
props:['modalWidth','multi','rootOpened','departId'],
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
treeData:[],
|
||||
autoExpandParent:true,
|
||||
expandedKeys:[],
|
||||
dataList:[],
|
||||
checkedKeys:[],
|
||||
checkedRows:[],
|
||||
searchValue:""
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.loadDepart();
|
||||
},
|
||||
watch:{
|
||||
departId(){
|
||||
this.initDepartComponent()
|
||||
},
|
||||
visible: {
|
||||
handler() {
|
||||
if (this.departId) {
|
||||
this.checkedKeys = this.departId.split(",");
|
||||
// console.log('this.departId', this.departId)
|
||||
} else {
|
||||
this.checkedKeys = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
show(){
|
||||
this.visible=true
|
||||
this.checkedRows=[]
|
||||
this.checkedKeys=[]
|
||||
},
|
||||
loadDepart(){
|
||||
queryDepartTreeList().then(res=>{
|
||||
if(res.success){
|
||||
let arr = [...res.result]
|
||||
this.reWriterWithSlot(arr)
|
||||
this.treeData = arr
|
||||
this.initDepartComponent()
|
||||
if(this.rootOpened){
|
||||
this.initExpandedKeys(res.result)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initDepartComponent(){
|
||||
let names = ''
|
||||
if(this.departId){
|
||||
let currDepartId = this.departId
|
||||
for(let item of this.dataList){
|
||||
if(currDepartId.indexOf(item.key)>=0){
|
||||
names+=","+item.title
|
||||
}
|
||||
}
|
||||
if(names){
|
||||
names = names.substring(1)
|
||||
}
|
||||
}
|
||||
this.$emit("initComp",names)
|
||||
},
|
||||
reWriterWithSlot(arr){
|
||||
for(let item of arr){
|
||||
if(item.children && item.children.length>0){
|
||||
this.reWriterWithSlot(item.children)
|
||||
let temp = Object.assign({},item)
|
||||
temp.children = {}
|
||||
this.dataList.push(temp)
|
||||
}else{
|
||||
this.dataList.push(item)
|
||||
item.scopedSlots={ title: 'title' }
|
||||
}
|
||||
}
|
||||
},
|
||||
initExpandedKeys(arr){
|
||||
if(arr && arr.length>0){
|
||||
let keys = []
|
||||
for(let item of arr){
|
||||
if(item.children && item.children.length>0){
|
||||
keys.push(item.id)
|
||||
}
|
||||
}
|
||||
this.expandedKeys=[...keys]
|
||||
}else{
|
||||
this.expandedKeys=[]
|
||||
}
|
||||
},
|
||||
onCheck (checkedKeys,info) {
|
||||
if(!this.multi){
|
||||
let arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0)
|
||||
this.checkedKeys = [...arr]
|
||||
this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef]
|
||||
}else{
|
||||
this.checkedKeys = checkedKeys.checked
|
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys)
|
||||
}
|
||||
},
|
||||
onSelect(selectedKeys,info) {
|
||||
let keys = []
|
||||
keys.push(selectedKeys[0])
|
||||
if(!this.checkedKeys || this.checkedKeys.length===0 || !this.multi){
|
||||
this.checkedKeys = [...keys]
|
||||
this.checkedRows=[info.node.dataRef]
|
||||
}else{
|
||||
let currKey = info.node.dataRef.key
|
||||
if(this.checkedKeys.indexOf(currKey)>=0){
|
||||
this.checkedKeys = this.checkedKeys.filter(item=> item !==currKey)
|
||||
}else{
|
||||
this.checkedKeys.push(...keys)
|
||||
}
|
||||
}
|
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys)
|
||||
},
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = expandedKeys
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
handleSubmit(){
|
||||
if(!this.checkedKeys || this.checkedKeys.length==0){
|
||||
this.$emit("ok",'')
|
||||
}else{
|
||||
this.$emit("ok",this.checkedRows,this.checkedKeys.join(","))
|
||||
}
|
||||
this.handleClear()
|
||||
},
|
||||
handleCancel(){
|
||||
this.handleClear()
|
||||
},
|
||||
handleClear(){
|
||||
this.visible=false
|
||||
this.checkedKeys=[]
|
||||
},
|
||||
getParentKey(currKey,treeData){
|
||||
let parentKey
|
||||
for (let i = 0; i < treeData.length; i++) {
|
||||
const node = treeData[i]
|
||||
if (node.children) {
|
||||
if (node.children.some(item => item.key === currKey)) {
|
||||
parentKey = node.key
|
||||
} else if (this.getParentKey(currKey, node.children)) {
|
||||
parentKey = this.getParentKey(currKey, node.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey
|
||||
},
|
||||
onSearch(value){
|
||||
const expandedKeys = this.dataList.map((item) => {
|
||||
if (item.title.indexOf(value) > -1) {
|
||||
return this.getParentKey(item.key,this.treeData)
|
||||
}
|
||||
return null
|
||||
}).filter((item, i, self) => item && self.indexOf(item) === i)
|
||||
|
||||
Object.assign(this, {
|
||||
expandedKeys,
|
||||
searchValue: value,
|
||||
autoExpandParent: true,
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
// 根据 checkedKeys 获取 rows
|
||||
getCheckedRows(checkedKeys) {
|
||||
const forChildren = (list, key) => {
|
||||
for (let item of list) {
|
||||
if (item.id === key) {
|
||||
return item
|
||||
}
|
||||
if (item.children instanceof Array) {
|
||||
let value = forChildren(item.children, key)
|
||||
if (value != null) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
let rows = []
|
||||
for (let key of checkedKeys) {
|
||||
let row = forChildren(this.treeData, key)
|
||||
if (row != null) {
|
||||
rows.push(row)
|
||||
}
|
||||
}
|
||||
return rows
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 限制部门选择树高度，避免部门太多时点击确定不便
|
||||
.my-dept-select-tree{
|
||||
height: 350px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:title="title"
|
||||
switchFullscreen
|
||||
wrapClassName="j-user-select-modal"
|
||||
@ok="handleSubmit"
|
||||
@cancel="close"
|
||||
style="top:50px"
|
||||
cancelText="关闭"
|
||||
>
|
||||
<a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<!--组织机构-->
|
||||
<a-directory-tree
|
||||
selectable
|
||||
:selectedKeys="selectedDepIds"
|
||||
:checkStrictly="true"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="departTree"
|
||||
:expandAction="false"
|
||||
:expandedKeys.sync="expandedKeys"
|
||||
@select="onDepSelect"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="18" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
用户账号:
|
||||
<a-input-search
|
||||
:style="{width:'150px',marginBottom:'15px'}"
|
||||
placeholder="请输入账号"
|
||||
v-model="queryParam.username"
|
||||
@search="onSearch"
|
||||
></a-input-search>
|
||||
<a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
|
||||
<!--用户列表-->
|
||||
<a-table
|
||||
ref="table"
|
||||
:scroll="scrollTrigger"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {filterObj} from '@/utils/util'
|
||||
import {queryDepartTreeList, getUserList, queryUserByDepId} from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: 'JSelectUserByDepModal',
|
||||
components: {},
|
||||
props: ['modalWidth', 'multi', 'userIds'],
|
||||
data() {
|
||||
return {
|
||||
queryParam: {
|
||||
username: "",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '用户账号',
|
||||
align: 'center',
|
||||
dataIndex: 'username'
|
||||
},
|
||||
{
|
||||
title: '用户姓名',
|
||||
align: 'center',
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex',
|
||||
customRender: function (text) {
|
||||
if (text === 1) {
|
||||
return '男'
|
||||
} else if (text === 2) {
|
||||
return '女'
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '手机',
|
||||
align: 'center',
|
||||
dataIndex: 'phone'
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
align: 'center',
|
||||
dataIndex: 'orgCodeTxt'
|
||||
}
|
||||
],
|
||||
scrollTrigger: {},
|
||||
dataSource: [],
|
||||
selectedRowKeys: [],
|
||||
selectUserRows: [],
|
||||
selectUserIds: [],
|
||||
title: '根据部门选择用户',
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
},
|
||||
selectedDepIds: [],
|
||||
departTree: [],
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
loading: false,
|
||||
expandedKeys: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算属性的 getter
|
||||
getType: function () {
|
||||
return this.multi == true ? 'checkbox' : 'radio';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userIds: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.initUserNames()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 该方法触发屏幕自适应
|
||||
this.resetScreenSize();
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
initUserNames() {
|
||||
if (this.userIds) {
|
||||
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
|
||||
let values = this.userIds.split(',') + ','
|
||||
getUserList({
|
||||
username: values,
|
||||
pageNo: 1,
|
||||
pageSize: values.length
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
let selectedRowKeys = []
|
||||
let realNames = []
|
||||
res.result.records.forEach(user => {
|
||||
realNames.push(user['realname'])
|
||||
selectedRowKeys.push(user['id'])
|
||||
})
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.$emit('initComp', realNames.join(','))
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// JSelectUserByDep组件bug issues/I16634
|
||||
this.$emit('initComp', '')
|
||||
}
|
||||
},
|
||||
async loadData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
if (this.selectedDepIds && this.selectedDepIds.length > 0) {
|
||||
await this.initQueryUserByDepId(this.selectedDepIds)
|
||||
} else {
|
||||
this.loading = true
|
||||
let params = this.getQueryParams()//查询条件
|
||||
await getUserList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
// 触发屏幕自适应
|
||||
resetScreenSize() {
|
||||
let screenWidth = document.body.clientWidth;
|
||||
if (screenWidth < 500) {
|
||||
this.scrollTrigger = {x: 800};
|
||||
} else {
|
||||
this.scrollTrigger = {};
|
||||
}
|
||||
},
|
||||
showModal() {
|
||||
this.visible = true;
|
||||
this.queryDepartTree();
|
||||
this.initUserNames()
|
||||
this.loadData();
|
||||
this.form.resetFields();
|
||||
},
|
||||
getQueryParams() {
|
||||
let param = Object.assign({}, this.queryParam, this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
getQueryField() {
|
||||
let str = 'id,';
|
||||
for (let a = 0; a < this.columns.length; a++) {
|
||||
str += ',' + this.columns[a].dataIndex;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
searchReset(num) {
|
||||
let that = this;
|
||||
if (num !== 0) {
|
||||
that.queryParam = {};
|
||||
that.loadData(1);
|
||||
}
|
||||
that.selectedRowKeys = [];
|
||||
that.selectUserIds = [];
|
||||
that.selectedDepIds = [];
|
||||
},
|
||||
close() {
|
||||
this.searchReset(0);
|
||||
this.visible = false;
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
|
||||
}
|
||||
this.ipagination = pagination;
|
||||
this.loadData();
|
||||
},
|
||||
handleSubmit() {
|
||||
let that = this;
|
||||
this.getSelectUserRows();
|
||||
that.$emit('ok', that.selectUserRows, that.selectUserIds);
|
||||
that.searchReset(0)
|
||||
that.close();
|
||||
},
|
||||
//获取选择用户信息
|
||||
getSelectUserRows(rowId) {
|
||||
let dataSource = this.dataSource;
|
||||
let userIds = "";
|
||||
this.selectUserRows = [];
|
||||
for (let i = 0, len = dataSource.length; i < len; i++) {
|
||||
if (this.selectedRowKeys.includes(dataSource[i].id)) {
|
||||
this.selectUserRows.push(dataSource[i]);
|
||||
userIds = userIds + "," + dataSource[i].username
|
||||
}
|
||||
}
|
||||
this.selectUserIds = userIds.substring(1);
|
||||
},
|
||||
// 点击树节点,筛选出对应的用户
|
||||
onDepSelect(selectedDepIds) {
|
||||
if (selectedDepIds[0] != null) {
|
||||
this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
|
||||
if (this.selectedDepIds[0] !== selectedDepIds[0]) {
|
||||
this.selectedDepIds = [selectedDepIds[0]];
|
||||
}
|
||||
}
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectionRows;
|
||||
},
|
||||
onSearch() {
|
||||
this.loadData(1);
|
||||
},
|
||||
// 根据选择的id来查询用户信息
|
||||
initQueryUserByDepId(selectedDepIds) {
|
||||
this.loading = true
|
||||
return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
this.ipagination.total = res.result.length;
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
queryDepartTree() {
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
this.departTree = res.result;
|
||||
// 默认展开父节点
|
||||
this.expandedKeys = this.departTree.map(item => item.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
modalFormOk() {
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#components-layout-demo-custom-trigger .trigger {
|
||||
font-size: 18px;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="用户列表"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
bordered
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"></a-table>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getUserList} from '@/api/api'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "SelectUserListModal",
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
confirmLoading: false,
|
||||
url: {
|
||||
add: "/act/model/create",
|
||||
list: "/sys/user/page"
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '用户账号',
|
||||
align: "center",
|
||||
dataIndex: 'username',
|
||||
fixed: 'left',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '用户姓名',
|
||||
align: "center",
|
||||
dataIndex: 'realname',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
dataIndex: 'sex_dictText'
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
align: "center",
|
||||
dataIndex: 'phone'
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
align: "center",
|
||||
dataIndex: 'email'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
align: "center",
|
||||
dataIndex: 'status_dictText'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//Step.2 加载用户数据
|
||||
getUserList().then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.visible = true;
|
||||
|
||||
//Step.1 清空选中用户
|
||||
this.selectedRowKeys = []
|
||||
this.selectedRows = []
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleChange(info) {
|
||||
let file = info.file;
|
||||
if (file.response.success) {
|
||||
this.$message.success(file.response.message);
|
||||
this.$emit('ok');
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warn(file.response.message);
|
||||
this.close()
|
||||
}
|
||||
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$emit('ok', this.selectionRows);
|
||||
this.close()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user