【modify】使用ESLint格式化代码
This commit is contained in:
zer0Black
+271
-271
@@ -59,301 +59,301 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import { pushIfNotExist } from '@/utils/util'
|
||||
import JSelectBizQueryItem from './JSelectBizQueryItem'
|
||||
import {cloneDeep} from 'lodash'
|
||||
import { getAction } from '@/api/manage'
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import { pushIfNotExist } from '@/utils/util'
|
||||
import JSelectBizQueryItem from './JSelectBizQueryItem'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
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
|
||||
},
|
||||
export default {
|
||||
name: 'JSelectBizComponentModal',
|
||||
mixins: [JeroListMixin],
|
||||
components: { Ellipsis, JSelectBizQueryItem },
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
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 + '条'
|
||||
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
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
{ 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 + '条'
|
||||
},
|
||||
options: [],
|
||||
dataSourceMap: {},
|
||||
showMoreQueryItems: false,
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
options: [],
|
||||
dataSourceMap: {},
|
||||
showMoreQueryItems: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 表头
|
||||
innerColumns () {
|
||||
const columns = cloneDeep(this.columns)
|
||||
columns.forEach(column => {
|
||||
// 给所有的列加上过长裁剪
|
||||
if (this.ellipsisLength !== -1) {
|
||||
const myCustomRender = column.customRender
|
||||
column.customRender = (text, record, index) => {
|
||||
let value = text
|
||||
if (typeof myCustomRender === 'function') {
|
||||
// noinspection JSVoidFunctionReturnValueUsed
|
||||
value = myCustomRender(text, record, index)
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return this.renderEllipsis(value)
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
})
|
||||
return columns
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler (val) {
|
||||
this.innerValue = cloneDeep(val)
|
||||
this.selectedRowKeys = []
|
||||
this.valueWatchHandler(val)
|
||||
this.queryOptionsByValue(val)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 表头
|
||||
innerColumns() {
|
||||
let columns = cloneDeep(this.columns)
|
||||
columns.forEach(column => {
|
||||
// 给所有的列加上过长裁剪
|
||||
if (this.ellipsisLength !== -1) {
|
||||
let myCustomRender = column.customRender
|
||||
column.customRender = (text, record, index) => {
|
||||
let value = text
|
||||
if (typeof myCustomRender === 'function') {
|
||||
// noinspection JSVoidFunctionReturnValueUsed
|
||||
value = myCustomRender(text, record, index)
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return this.renderEllipsis(value)
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
})
|
||||
return columns
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.innerValue = cloneDeep(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 {}
|
||||
})
|
||||
},
|
||||
dataSource: {
|
||||
deep: true,
|
||||
handler (val) {
|
||||
this.emitOptions(val)
|
||||
this.valueWatchHandler(this.innerValue)
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
selectedRowKeys: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (val) {
|
||||
// update--begin--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
|
||||
if (this.innerValue) {
|
||||
this.innerValue.length = 0
|
||||
}
|
||||
// 判断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
|
||||
// update--end--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
|
||||
this.selectedTable.dataSource = val.map(key => {
|
||||
for (const data of this.dataSource) {
|
||||
if (data[this.rowKey] === key) {
|
||||
pushIfNotExist(this.innerValue, data[this.valueKey])
|
||||
return data
|
||||
}
|
||||
}
|
||||
if (!find) {
|
||||
notExist = true
|
||||
for (const 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 (const val of value) {
|
||||
let find = false
|
||||
for (const option of this.options) {
|
||||
if (val === option.value) {
|
||||
find = 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)
|
||||
})
|
||||
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)
|
||||
},
|
||||
emitOptions (dataSource, callback) {
|
||||
dataSource.forEach(data => {
|
||||
const 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组件切换页数值问题------
|
||||
},
|
||||
/** 完成选择 */
|
||||
handleOk () {
|
||||
const 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]
|
||||
customRowFn (record) {
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
const key = record[this.rowKey]
|
||||
if (!this.multiple) {
|
||||
this.selectedRowKeys = [key]
|
||||
this.selectedTable.dataSource = [record]
|
||||
} else {
|
||||
const index = this.selectedRowKeys.indexOf(key)
|
||||
if (index === -1) {
|
||||
this.selectedRowKeys.push(key)
|
||||
this.selectedTable.dataSource.push(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)
|
||||
}
|
||||
this.handleDeleteSelected(record, index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.full-form-item {
|
||||
@@ -381,4 +381,4 @@
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,19 +2,19 @@ export default {
|
||||
name: 'JSelectBizQueryItem',
|
||||
props: {
|
||||
queryParam: Object,
|
||||
queryConfig: Array,
|
||||
queryConfig: Array
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
renderQueryItem() {
|
||||
renderQueryItem () {
|
||||
return this.queryConfig.map(queryItem => {
|
||||
const {key, label, placeholder, dictCode, props, customRender} = queryItem
|
||||
const { key, label, placeholder, dictCode, props, customRender } = queryItem
|
||||
const options = {
|
||||
props: {},
|
||||
on: {
|
||||
pressEnter: () => this.$emit('pressEnter'),
|
||||
pressEnter: () => this.$emit('pressEnter')
|
||||
}
|
||||
}
|
||||
if (props != null) {
|
||||
@@ -22,17 +22,17 @@ export default {
|
||||
}
|
||||
if (placeholder === undefined) {
|
||||
if (dictCode) {
|
||||
options.props['placeholder'] = `请选择${label}`
|
||||
options.props.placeholder = `请选择${label}`
|
||||
} else {
|
||||
options.props['placeholder'] = `请输入${label}`
|
||||
options.props.placeholder = `请输入${label}`
|
||||
}
|
||||
} else {
|
||||
options.props['placeholder'] = placeholder
|
||||
options.props.placeholder = placeholder
|
||||
}
|
||||
|
||||
let input
|
||||
if (typeof customRender === 'function') {
|
||||
input = customRender.call(this, {key, options, queryParam: this.queryParam})
|
||||
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 {
|
||||
@@ -40,9 +40,9 @@ export default {
|
||||
}
|
||||
return <a-form-item key={key} label={label}>{input}</a-form-item>
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
render() {
|
||||
render () {
|
||||
return <span>{this.renderQueryItem()}</span>
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,116 +31,116 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectBizComponentModal from './JSelectBizComponentModal'
|
||||
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: '选择'
|
||||
},
|
||||
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]
|
||||
},
|
||||
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)
|
||||
}
|
||||
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 = []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOptions(options, dataSourceMap) {
|
||||
this.selectOptions = options
|
||||
this.dataSourceMap = dataSourceMap
|
||||
},
|
||||
handleDropdownVisibleChange() {
|
||||
// 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
|
||||
this.selectOpen = true
|
||||
this.$nextTick(() => {
|
||||
this.selectOpen = false
|
||||
})
|
||||
},
|
||||
selectValue: {
|
||||
deep: true,
|
||||
handler (val) {
|
||||
const rows = val.map(key => this.dataSourceMap[key])
|
||||
const 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>
|
||||
@@ -165,4 +165,4 @@
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -25,30 +25,30 @@ import JSelectDepartModal from './modal/JSelectDepartModal'
|
||||
import { underLinetoHump } from '@/components/_util/StringUtil'
|
||||
export default {
|
||||
name: 'JSelectDepart',
|
||||
components:{
|
||||
components: {
|
||||
JSelectDepartModal
|
||||
},
|
||||
props:{
|
||||
modalWidth:{
|
||||
type:Number,
|
||||
default:500,
|
||||
required:false
|
||||
props: {
|
||||
modalWidth: {
|
||||
type: Number,
|
||||
default: 500,
|
||||
required: false
|
||||
},
|
||||
multi:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
multi: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
rootOpened:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
required:false
|
||||
rootOpened: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
value: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
disabled:{
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
@@ -82,46 +82,46 @@ export default {
|
||||
}
|
||||
|
||||
},
|
||||
data(){
|
||||
data () {
|
||||
return {
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
storeVals: '', //[key values]
|
||||
textVals: '' //[label values]
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
storeVals: '', // [key values]
|
||||
textVals: '' // [label values]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
storeField(){
|
||||
computed: {
|
||||
storeField () {
|
||||
let field = this.customReturnField
|
||||
if(!field){
|
||||
field = this.store;
|
||||
if (!field) {
|
||||
field = this.store
|
||||
}
|
||||
return underLinetoHump(field)
|
||||
},
|
||||
textField(){
|
||||
textField () {
|
||||
return underLinetoHump(this.text)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted () {
|
||||
this.storeVals = this.value
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
watch: {
|
||||
value (val) {
|
||||
this.storeVals = val
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initComp(textVals){
|
||||
methods: {
|
||||
initComp (textVals) {
|
||||
this.textVals = textVals
|
||||
},
|
||||
//返回选中的部门信息
|
||||
backDepartInfo(){
|
||||
if(this.backDepart===true){
|
||||
if(this.storeVals && this.storeVals.length>0){
|
||||
let arr1 = this.storeVals.split(',')
|
||||
let arr2 = this.textVals.split(',')
|
||||
let info = []
|
||||
for(let i=0;i<arr1.length;i++){
|
||||
// 返回选中的部门信息
|
||||
backDepartInfo () {
|
||||
if (this.backDepart === true) {
|
||||
if (this.storeVals && this.storeVals.length > 0) {
|
||||
const arr1 = this.storeVals.split(',')
|
||||
const arr2 = this.textVals.split(',')
|
||||
const info = []
|
||||
for (let i = 0; i < arr1.length; i++) {
|
||||
info.push({
|
||||
value: arr1[i],
|
||||
text: arr2[i]
|
||||
@@ -131,30 +131,30 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
openModal(){
|
||||
openModal () {
|
||||
this.$refs.innerDepartSelectModal.show()
|
||||
},
|
||||
handleOK(rows) {
|
||||
handleOK (rows) {
|
||||
if (!rows && rows.length <= 0) {
|
||||
this.textVals = ''
|
||||
this.storeVals = ''
|
||||
} else {
|
||||
let arr1 = []
|
||||
let arr2 = []
|
||||
for(let dep of rows){
|
||||
const arr1 = []
|
||||
const arr2 = []
|
||||
for (const dep of rows) {
|
||||
arr1.push(dep[this.storeField])
|
||||
arr2.push(dep[this.textField])
|
||||
}
|
||||
this.storeVals = arr1.join(',')
|
||||
this.textVals = arr2.join(',')
|
||||
}
|
||||
this.$emit("change", this.storeVals)
|
||||
this.$emit('change', this.storeVals)
|
||||
this.backDepartInfo()
|
||||
},
|
||||
getDepartNames(){
|
||||
getDepartNames () {
|
||||
return this.departNames
|
||||
},
|
||||
handleEmpty(){
|
||||
handleEmpty () {
|
||||
this.handleOK('')
|
||||
}
|
||||
},
|
||||
@@ -178,4 +178,4 @@ export default {
|
||||
.components-input-demo-presuffix .anticon-close-circle:active {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -11,64 +11,64 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JDate from '@comp/jero/JDate'
|
||||
import JSelectBizComponent from './JSelectBizComponent'
|
||||
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: () => []
|
||||
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%', dataIndex: 'username' },
|
||||
{ title: '用户姓名', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'realname' },
|
||||
{ title: '性别', align: 'center', dataIndex: 'sex_dictText' },
|
||||
{ title: '电话', align: 'center', width: '20%', dataIndex: 'phone' },
|
||||
{
|
||||
title: '部门',
|
||||
align: 'center',
|
||||
dataIndex: 'orgCodeTxt'
|
||||
}
|
||||
],
|
||||
// 定义在这里的参数都是可以在外部传递覆盖的，可以更灵活的定制化使用的组件
|
||||
default: {
|
||||
name: '用户',
|
||||
width: 1200,
|
||||
displayKey: 'realname',
|
||||
returnKeys: ['id', 'username'],
|
||||
queryParamText: '账号'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: { list: '/sys/user/page' },
|
||||
columns: [
|
||||
{ title: '用户账号', align: 'center', width: '25%', dataIndex: 'username' },
|
||||
{ title: '用户姓名', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'realname' },
|
||||
{ title: '性别', align: 'center', dataIndex: 'sex_dictText', },
|
||||
{ title: '电话', align: 'center', width: '20%', dataIndex: 'phone' },
|
||||
{
|
||||
title: '部门',
|
||||
align: 'center',
|
||||
dataIndex: 'orgCodeTxt'
|
||||
}
|
||||
],
|
||||
// 定义在这里的参数都是可以在外部传递覆盖的，可以更灵活的定制化使用的组件
|
||||
default: {
|
||||
name: '用户',
|
||||
width: 1200,
|
||||
displayKey: 'realname',
|
||||
returnKeys: ['id', 'username'],
|
||||
queryParamText: '账号',
|
||||
// 多条件查询配置
|
||||
queryConfigDefault: [
|
||||
{
|
||||
key: 'realname',
|
||||
label: '姓名'
|
||||
},
|
||||
// 多条件查询配置
|
||||
queryConfigDefault: [
|
||||
{
|
||||
key: 'realname',
|
||||
label: '姓名',
|
||||
},
|
||||
{
|
||||
key: 'sex',
|
||||
label: '性别',
|
||||
// 如果包含 dictCode，那么就会显示成下拉框
|
||||
dictCode: 'sex',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
attrs() {
|
||||
return Object.assign(this.default, this.$attrs, {
|
||||
queryConfig: this.queryConfigDefault.concat(this.queryConfig)
|
||||
})
|
||||
}
|
||||
{
|
||||
key: 'sex',
|
||||
label: '性别',
|
||||
// 如果包含 dictCode，那么就会显示成下拉框
|
||||
dictCode: 'sex'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
attrs () {
|
||||
return Object.assign(this.default, this.$attrs, {
|
||||
queryConfig: this.queryConfigDefault.concat(this.queryConfig)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@@ -13,23 +13,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectBizComponent from './JSelectBizComponent'
|
||||
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 }
|
||||
]
|
||||
}
|
||||
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>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@@ -26,7 +26,7 @@ import { underLinetoHump } from '@/components/_util/StringUtil'
|
||||
|
||||
export default {
|
||||
name: 'JSelectUserByDep',
|
||||
components: {JSelectUserByDepModal},
|
||||
components: { JSelectUserByDepModal },
|
||||
props: {
|
||||
modalWidth: {
|
||||
type: Number,
|
||||
@@ -65,29 +65,29 @@ export default {
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
storeVals: '', //[key values]
|
||||
textVals: '' //[label values]
|
||||
storeVals: '', // [key values]
|
||||
textVals: '' // [label values]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
storeField(){
|
||||
computed: {
|
||||
storeField () {
|
||||
let field = this.customReturnField
|
||||
if(!field){
|
||||
field = this.store;
|
||||
if (!field) {
|
||||
field = this.store
|
||||
}
|
||||
return underLinetoHump(field)
|
||||
},
|
||||
textField(){
|
||||
textField () {
|
||||
return underLinetoHump(this.text)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.storeVals = this.value
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
value (val) {
|
||||
this.storeVals = val
|
||||
}
|
||||
},
|
||||
@@ -96,17 +96,17 @@ export default {
|
||||
event: 'change'
|
||||
},
|
||||
methods: {
|
||||
initComp(textVals) {
|
||||
initComp (textVals) {
|
||||
this.textVals = textVals
|
||||
},
|
||||
//返回选中的用户信息
|
||||
backDeparInfo(){
|
||||
if(this.backUser===true){
|
||||
if(this.storeVals && this.storeVals.length>0){
|
||||
let arr1 = this.storeVals.split(',')
|
||||
let arr2 = this.textVals.split(',')
|
||||
let info = []
|
||||
for(let i=0;i<arr1.length;i++){
|
||||
// 返回选中的用户信息
|
||||
backDeparInfo () {
|
||||
if (this.backUser === true) {
|
||||
if (this.storeVals && this.storeVals.length > 0) {
|
||||
const arr1 = this.storeVals.split(',')
|
||||
const arr2 = this.textVals.split(',')
|
||||
const info = []
|
||||
for (let i = 0; i < arr1.length; i++) {
|
||||
info.push({
|
||||
value: arr1[i],
|
||||
text: arr2[i]
|
||||
@@ -116,25 +116,25 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
onSearchDepUser() {
|
||||
onSearchDepUser () {
|
||||
this.$refs.selectModal.showModal()
|
||||
},
|
||||
selectOK(rows) {
|
||||
console.log("当前选中用户", rows)
|
||||
selectOK (rows) {
|
||||
console.log('当前选中用户', rows)
|
||||
if (!rows) {
|
||||
this.storeVals = ''
|
||||
this.textVals = ''
|
||||
} else {
|
||||
let temp1 = []
|
||||
let temp2 = []
|
||||
for (let item of rows) {
|
||||
const temp1 = []
|
||||
const temp2 = []
|
||||
for (const item of rows) {
|
||||
temp1.push(item[this.storeField])
|
||||
temp2.push(item[this.textField])
|
||||
}
|
||||
this.storeVals = temp1.join(',')
|
||||
this.textVals = temp2.join(',')
|
||||
}
|
||||
this.$emit("change", this.storeVals)
|
||||
this.$emit('change', this.storeVals)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -142,4 +142,4 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -54,232 +54,230 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryDepartTreeList } from '@/api/api'
|
||||
export default {
|
||||
name: 'JSelectDepartModal',
|
||||
props:['modalWidth','multi','rootOpened','departId', 'store', 'text','treeOpera'],
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
treeData:[],
|
||||
autoExpandParent:true,
|
||||
expandedKeys:[],
|
||||
dataList:[],
|
||||
checkedKeys:[],
|
||||
checkedRows:[],
|
||||
searchValue:"",
|
||||
checkStrictly: true,
|
||||
fullscreen:false
|
||||
}
|
||||
import { queryDepartTreeList } from '@/api/api'
|
||||
export default {
|
||||
name: 'JSelectDepartModal',
|
||||
props: ['modalWidth', 'multi', 'rootOpened', 'departId', 'store', 'text', 'treeOpera'],
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
treeData: [],
|
||||
autoExpandParent: true,
|
||||
expandedKeys: [],
|
||||
dataList: [],
|
||||
checkedKeys: [],
|
||||
checkedRows: [],
|
||||
searchValue: '',
|
||||
checkStrictly: true,
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadDepart()
|
||||
},
|
||||
watch: {
|
||||
departId () {
|
||||
this.initDepartComponent()
|
||||
},
|
||||
created(){
|
||||
this.loadDepart();
|
||||
},
|
||||
watch:{
|
||||
departId(){
|
||||
this.initDepartComponent()
|
||||
},
|
||||
visible: {
|
||||
handler() {
|
||||
this.initDepartComponent(true)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
treeScreenClass() {
|
||||
return {
|
||||
'my-dept-select-tree': true,
|
||||
'fullscreen': this.fullscreen,
|
||||
}
|
||||
},
|
||||
},
|
||||
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(flag){
|
||||
let arr = []
|
||||
//该方法两个地方用 1.visible改变事件重新设置选中项 2.组件编辑页面回显
|
||||
let fieldName = flag==true?'key':this.text
|
||||
if(this.departId){
|
||||
let arr2 = this.departId.split(',')
|
||||
for(let item of this.dataList){
|
||||
if(arr2.indexOf(item[this.store])>=0){
|
||||
arr.push(item[fieldName])
|
||||
}
|
||||
}
|
||||
}
|
||||
if(flag==true){
|
||||
this.checkedKeys = [...arr]
|
||||
}else{
|
||||
this.$emit("initComp", arr.join(','))
|
||||
}
|
||||
},
|
||||
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{
|
||||
if(this.checkStrictly){
|
||||
this.checkedKeys = checkedKeys.checked
|
||||
}else{
|
||||
this.checkedKeys = checkedKeys
|
||||
}
|
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys)
|
||||
}
|
||||
},
|
||||
onSelect(selectedKeys,info) {
|
||||
//取消关联的情况下才走onSelect的逻辑
|
||||
if(this.checkStrictly){
|
||||
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{
|
||||
let checkRow = this.getCheckedRows(this.checkedKeys)
|
||||
let keyStr = this.checkedKeys.join(",")
|
||||
this.$emit("ok", checkRow, keyStr)
|
||||
}
|
||||
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
|
||||
},
|
||||
switchCheckStrictly (v) {
|
||||
if(v==1){
|
||||
this.checkStrictly = false
|
||||
}else if(v==2){
|
||||
this.checkStrictly = true
|
||||
}
|
||||
},
|
||||
isFullscreen(val){
|
||||
this.fullscreen=val
|
||||
visible: {
|
||||
handler () {
|
||||
this.initDepartComponent(true)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
treeScreenClass () {
|
||||
return {
|
||||
'my-dept-select-tree': true,
|
||||
fullscreen: this.fullscreen
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true
|
||||
this.checkedRows = []
|
||||
this.checkedKeys = []
|
||||
},
|
||||
loadDepart () {
|
||||
// 这个方法是找到所有的部门信息
|
||||
queryDepartTreeList().then(res => {
|
||||
if (res.success) {
|
||||
const arr = [...res.result]
|
||||
this.reWriterWithSlot(arr)
|
||||
this.treeData = arr
|
||||
this.initDepartComponent()
|
||||
if (this.rootOpened) {
|
||||
this.initExpandedKeys(res.result)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initDepartComponent (flag) {
|
||||
const arr = []
|
||||
// 该方法两个地方用 1.visible改变事件重新设置选中项 2.组件编辑页面回显
|
||||
const fieldName = flag == true ? 'key' : this.text
|
||||
if (this.departId) {
|
||||
const arr2 = this.departId.split(',')
|
||||
for (const item of this.dataList) {
|
||||
if (arr2.indexOf(item[this.store]) >= 0) {
|
||||
arr.push(item[fieldName])
|
||||
}
|
||||
}
|
||||
}
|
||||
if (flag == true) {
|
||||
this.checkedKeys = [...arr]
|
||||
} else {
|
||||
this.$emit('initComp', arr.join(','))
|
||||
}
|
||||
},
|
||||
reWriterWithSlot (arr) {
|
||||
for (const item of arr) {
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.reWriterWithSlot(item.children)
|
||||
const 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) {
|
||||
const keys = []
|
||||
for (const 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) {
|
||||
const arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0)
|
||||
this.checkedKeys = [...arr]
|
||||
this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef]
|
||||
} else {
|
||||
if (this.checkStrictly) {
|
||||
this.checkedKeys = checkedKeys.checked
|
||||
} else {
|
||||
this.checkedKeys = checkedKeys
|
||||
}
|
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys)
|
||||
}
|
||||
},
|
||||
onSelect (selectedKeys, info) {
|
||||
// 取消关联的情况下才走onSelect的逻辑
|
||||
if (this.checkStrictly) {
|
||||
const keys = []
|
||||
keys.push(selectedKeys[0])
|
||||
if (!this.checkedKeys || this.checkedKeys.length === 0 || !this.multi) {
|
||||
this.checkedKeys = [...keys]
|
||||
this.checkedRows = [info.node.dataRef]
|
||||
} else {
|
||||
const 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 {
|
||||
const checkRow = this.getCheckedRows(this.checkedKeys)
|
||||
const keyStr = this.checkedKeys.join(',')
|
||||
this.$emit('ok', checkRow, keyStr)
|
||||
}
|
||||
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 (const item of list) {
|
||||
if (item.id === key) {
|
||||
return item
|
||||
}
|
||||
if (item.children instanceof Array) {
|
||||
const value = forChildren(item.children, key)
|
||||
if (value != null) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const rows = []
|
||||
for (const key of checkedKeys) {
|
||||
const row = forChildren(this.treeData, key)
|
||||
if (row != null) {
|
||||
rows.push(row)
|
||||
}
|
||||
}
|
||||
return rows
|
||||
},
|
||||
switchCheckStrictly (v) {
|
||||
if (v == 1) {
|
||||
this.checkStrictly = false
|
||||
} else if (v == 2) {
|
||||
this.checkStrictly = true
|
||||
}
|
||||
},
|
||||
isFullscreen (val) {
|
||||
this.fullscreen = val
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -304,4 +302,4 @@
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -62,278 +62,276 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {filterObj} from '@/utils/util'
|
||||
import {queryDepartTreeList, getUserList, queryUserByDepId, queryDepartTreeSync} from '@/api/api'
|
||||
import { getAction } from '@/api/manage'
|
||||
import { filterObj } from '@/utils/util'
|
||||
import { queryDepartTreeList, getUserList, queryUserByDepId, queryDepartTreeSync } from '@/api/api'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JSelectUserByDepModal',
|
||||
components: {},
|
||||
props: ['modalWidth', 'multi', 'userIds', 'store', 'text'],
|
||||
data() {
|
||||
return {
|
||||
queryParam: {
|
||||
username: "",
|
||||
realname: ""
|
||||
export default {
|
||||
name: 'JSelectUserByDepModal',
|
||||
components: {},
|
||||
props: ['modalWidth', 'multi', 'userIds', 'store', 'text'],
|
||||
data () {
|
||||
return {
|
||||
queryParam: {
|
||||
username: '',
|
||||
realname: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '用户账号',
|
||||
align: 'center',
|
||||
dataIndex: 'username'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '用户账号',
|
||||
align: 'center',
|
||||
dataIndex: 'username'
|
||||
},
|
||||
{
|
||||
title: '用户姓名',
|
||||
align: 'center',
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex_dictText'
|
||||
},
|
||||
{
|
||||
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
|
||||
{
|
||||
title: '用户姓名',
|
||||
align: 'center',
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex_dictText'
|
||||
},
|
||||
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()
|
||||
{
|
||||
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
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 该方法触发屏幕自适应
|
||||
this.resetScreenSize();
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
initUserNames() {
|
||||
if (this.userIds) {
|
||||
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
|
||||
let values = this.userIds.split(',') + ','
|
||||
let param = {[this.store]: values}
|
||||
getAction('/sys/user/getMultiUser', param).then((list)=>{
|
||||
this.selectionRows = []
|
||||
let selectedRowKeys = []
|
||||
let textArray = []
|
||||
if(list && list.length>0){
|
||||
for(let user of list){
|
||||
textArray.push(user[this.text])
|
||||
selectedRowKeys.push(user['id'])
|
||||
this.selectionRows.push(user)
|
||||
}
|
||||
}
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.$emit('initComp', textArray.join(','))
|
||||
})
|
||||
|
||||
} else {
|
||||
// JSelectUserByDep组件bug issues/I16634
|
||||
this.$emit('initComp', '')
|
||||
// 前端用户选择单选无法置空的问题 #2610
|
||||
this.selectedRowKeys = []
|
||||
}
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
},
|
||||
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();
|
||||
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()
|
||||
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.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
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 该方法触发屏幕自适应
|
||||
this.resetScreenSize()
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
initUserNames () {
|
||||
if (this.userIds) {
|
||||
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
|
||||
const values = this.userIds.split(',') + ','
|
||||
const param = { [this.store]: values }
|
||||
getAction('/sys/user/getMultiUser', param).then((list) => {
|
||||
this.selectionRows = []
|
||||
const selectedRowKeys = []
|
||||
const textArray = []
|
||||
if (list && list.length > 0) {
|
||||
for (const user of list) {
|
||||
textArray.push(user[this.text])
|
||||
selectedRowKeys.push(user.id)
|
||||
this.selectionRows.push(user)
|
||||
}
|
||||
}
|
||||
}
|
||||
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.selectedRowKeys = selectedRowKeys
|
||||
this.$emit('initComp', textArray.join(','))
|
||||
})
|
||||
} else {
|
||||
// JSelectUserByDep组件bug issues/I16634
|
||||
this.$emit('initComp', '')
|
||||
// 前端用户选择单选无法置空的问题 #2610
|
||||
this.selectedRowKeys = []
|
||||
}
|
||||
},
|
||||
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
|
||||
return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
|
||||
const params = this.getQueryParams()// 查询条件
|
||||
await getUserList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
this.ipagination.total = res.result.length;
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
queryDepartTree() {
|
||||
//update-begin-author:taoyan date:20211202 for: 异步加载部门树 https://github.com/jeecgboot/jeecg-boot/issues/3196
|
||||
this.expandedKeys = []
|
||||
this.departTree = []
|
||||
queryDepartTreeSync().then((res) => {
|
||||
}
|
||||
},
|
||||
// 触发屏幕自适应
|
||||
resetScreenSize () {
|
||||
const 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 () {
|
||||
const 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) {
|
||||
const 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 = sorter.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
this.ipagination = pagination
|
||||
this.loadData()
|
||||
},
|
||||
handleSubmit () {
|
||||
const that = this
|
||||
this.getSelectUserRows()
|
||||
that.$emit('ok', that.selectUserRows)
|
||||
that.searchReset(0)
|
||||
that.close()
|
||||
},
|
||||
// 获取选择用户信息
|
||||
getSelectUserRows (rowId) {
|
||||
const 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 () {
|
||||
// update-begin-author:taoyan date:20211202 for: 异步加载部门树 https://github.com/jeecgboot/jeecg-boot/issues/3196
|
||||
this.expandedKeys = []
|
||||
this.departTree = []
|
||||
queryDepartTreeSync().then((res) => {
|
||||
if (res.success) {
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
const temp = res.result[i]
|
||||
this.departTree.push(temp)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoadDepartment (treeNode) {
|
||||
return new Promise(resolve => {
|
||||
queryDepartTreeSync({ pid: treeNode.dataRef.id }).then((res) => {
|
||||
if (res.success) {
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i]
|
||||
this.departTree.push(temp)
|
||||
// 判断chidlren是否为空，并修改isLeaf属性值
|
||||
if (res.result.length == 0) {
|
||||
treeNode.dataRef.isLeaf = true
|
||||
} else {
|
||||
treeNode.dataRef.children = res.result
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoadDepartment(treeNode){
|
||||
return new Promise(resolve => {
|
||||
queryDepartTreeSync({pid:treeNode.dataRef.id}).then((res) => {
|
||||
if (res.success) {
|
||||
//判断chidlren是否为空，并修改isLeaf属性值
|
||||
if(res.result.length == 0){
|
||||
treeNode.dataRef['isLeaf']=true
|
||||
return;
|
||||
}else{
|
||||
treeNode.dataRef['children']= res.result;
|
||||
}
|
||||
}
|
||||
})
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
//update-end-author:taoyan date:20211202 for: 异步加载部门树 https://github.com/jeecgboot/jeecg-boot/issues/3196
|
||||
modalFormOk() {
|
||||
this.loadData();
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
// update-end-author:taoyan date:20211202 for: 异步加载部门树 https://github.com/jeecgboot/jeecg-boot/issues/3196
|
||||
modalFormOk () {
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -349,4 +347,4 @@
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -21,100 +21,99 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getUserList} from '@/api/api'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
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"
|
||||
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
|
||||
},
|
||||
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'
|
||||
}
|
||||
]
|
||||
{
|
||||
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) {
|
||||
const 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()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//Step.2 加载用户数据
|
||||
getUserList().then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
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()
|
||||
},
|
||||
handleSubmit () {
|
||||
this.$emit('ok', this.selectionRows)
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -17,78 +17,78 @@ const backEndUrl = {
|
||||
// 企业微信
|
||||
wechatEnterprise: {
|
||||
user: '/sys/thirdApp/sync/wechatEnterprise/user',
|
||||
depart: '/sys/thirdApp/sync/wechatEnterprise/depart',
|
||||
depart: '/sys/thirdApp/sync/wechatEnterprise/depart'
|
||||
},
|
||||
// 钉钉
|
||||
dingtalk: {
|
||||
user: '/sys/thirdApp/sync/dingtalk/user',
|
||||
depart: '/sys/thirdApp/sync/dingtalk/depart',
|
||||
depart: '/sys/thirdApp/sync/dingtalk/depart'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'JThirdAppButton',
|
||||
components: {JThirdAppDropdown},
|
||||
components: { JThirdAppDropdown },
|
||||
props: {
|
||||
// 同步类型，可以是 user、depart
|
||||
bizType: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
// 是否允许同步到第三方APP
|
||||
syncToApp: Boolean,
|
||||
// 是否允许第三方APP同步到本地
|
||||
syncToLocal: Boolean,
|
||||
// 选择的行
|
||||
selectedRowKeys: Array,
|
||||
selectedRowKeys: Array
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
enabledTypes: {},
|
||||
attrs: {
|
||||
dingtalk: {},
|
||||
},
|
||||
dingtalk: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bindAttrs() {
|
||||
bindAttrs () {
|
||||
return {
|
||||
syncToApp: this.syncToApp,
|
||||
syncToLocal: this.syncToLocal
|
||||
}
|
||||
},
|
||||
bindEvents() {
|
||||
bindEvents () {
|
||||
return {
|
||||
'to-app': this.onToApp,
|
||||
'to-local': this.onToLocal,
|
||||
'to-local': this.onToLocal
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
this.loadEnabledTypes()
|
||||
},
|
||||
methods: {
|
||||
handleMenuClick() {
|
||||
handleMenuClick () {
|
||||
console.log(arguments)
|
||||
},
|
||||
onToApp(e) {
|
||||
onToApp (e) {
|
||||
this.doSync(e.type, '/toApp')
|
||||
},
|
||||
onToLocal(e) {
|
||||
onToLocal (e) {
|
||||
this.doSync(e.type, '/toLocal')
|
||||
},
|
||||
// 获取启用的第三方App
|
||||
async loadEnabledTypes() {
|
||||
async loadEnabledTypes () {
|
||||
this.enabledTypes = await loadEnabledTypes()
|
||||
},
|
||||
// 开始同步第三方App
|
||||
doSync(type, direction) {
|
||||
let urls = backEndUrl[type]
|
||||
doSync (type, direction) {
|
||||
const urls = backEndUrl[type]
|
||||
if (!(urls && urls[this.bizType])) {
|
||||
console.warn('配置出错')
|
||||
return
|
||||
}
|
||||
let url = urls[this.bizType] + direction
|
||||
const url = urls[this.bizType] + direction
|
||||
|
||||
let selectedRowKeys = this.selectedRowKeys
|
||||
let content = '确定要开始同步全部数据吗？可能花费较长时间！'
|
||||
@@ -98,14 +98,14 @@ export default {
|
||||
selectedRowKeys = []
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
let model = this.$confirm({
|
||||
const model = this.$confirm({
|
||||
title: '同步',
|
||||
content,
|
||||
onOk: () => {
|
||||
model.update({
|
||||
keyboard: false,
|
||||
okText: '同步中…',
|
||||
cancelButtonProps: {props: {disabled: true}}
|
||||
cancelButtonProps: { props: { disabled: true } }
|
||||
})
|
||||
return getAction(url, {
|
||||
ids: selectedRowKeys.join(',')
|
||||
@@ -117,22 +117,22 @@ export default {
|
||||
title: res.message,
|
||||
content: (h) => {
|
||||
let nodes
|
||||
let successInfo = [
|
||||
const successInfo = [
|
||||
`成功信息如下：`,
|
||||
this.renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
|
||||
this.renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n'))
|
||||
]
|
||||
if (res.success) {
|
||||
nodes = [
|
||||
...successInfo,
|
||||
h('br'),
|
||||
`无失败信息！`,
|
||||
`无失败信息！`
|
||||
]
|
||||
} else {
|
||||
nodes = [
|
||||
`失败信息如下：`,
|
||||
this.renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
|
||||
h('br'),
|
||||
...successInfo,
|
||||
...successInfo
|
||||
]
|
||||
}
|
||||
return nodes
|
||||
@@ -160,43 +160,43 @@ export default {
|
||||
type,
|
||||
direction,
|
||||
isToApp: direction === '/toApp',
|
||||
isToLocal: direction === '/toLocal',
|
||||
isToLocal: direction === '/toLocal'
|
||||
})
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
onCancel () {
|
||||
resolve()
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
renderTextarea(h, value) {
|
||||
renderTextarea (h, value) {
|
||||
return h('a-textarea', {
|
||||
props: {
|
||||
value: value,
|
||||
readOnly: true,
|
||||
autosize: {minRows: 5, maxRows: 10},
|
||||
autosize: { minRows: 5, maxRows: 10 }
|
||||
},
|
||||
style: {
|
||||
// 关闭textarea的自动换行，使其可以左右滚动
|
||||
whiteSpace: 'pre',
|
||||
overflow: 'auto',
|
||||
overflow: 'auto'
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// 启用了哪些第三方App（在此缓存）
|
||||
let enabledTypes = null
|
||||
|
||||
// 获取启用的第三方App
|
||||
export async function loadEnabledTypes() {
|
||||
export async function loadEnabledTypes () {
|
||||
// 获取缓存
|
||||
if (enabledTypes != null) {
|
||||
return cloneObject(enabledTypes)
|
||||
} else {
|
||||
let {success, result} = await getAction(backEndUrl.getEnabledType)
|
||||
const { success, result } = await getAction(backEndUrl.getEnabledType)
|
||||
if (success) {
|
||||
// 在此缓存
|
||||
enabledTypes = cloneObject(result)
|
||||
@@ -211,4 +211,4 @@ export async function loadEnabledTypes() {
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -19,16 +19,16 @@ export default {
|
||||
type: String,
|
||||
name: String,
|
||||
syncToApp: Boolean,
|
||||
syncToLocal: Boolean,
|
||||
syncToLocal: Boolean
|
||||
},
|
||||
methods: {
|
||||
handleMenuClick(event) {
|
||||
this.$emit(event.key, {type: this.type})
|
||||
},
|
||||
},
|
||||
handleMenuClick (event) {
|
||||
this.$emit(event.key, { type: this.type })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user