<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"
>
<span slot="zoneCode" slot-scope="zoneCode">
<a-tag :key="zoneCode" color="blue">
{{ solutionZoneCode(zoneCode) }}
</a-tag>
</span>
</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>
<InventoryDetailSelectList />
</j-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import Ellipsis from '@/components/Ellipsis'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { pushIfNotExist } from '@/utils/util'
import JSelectBizQueryItem from './JSelectBizQueryItem'
import { cloneDeep } from 'lodash'
import { stockTakeTask } from '../../../api/api'
import Utils from './util.js'
import InventoryDetailSelectList from '../../../views/system/inventory/InventoryDetailSelectList'
export default {
name: 'JSelectBizComponentModal',
mixins: [JeecgListMixin],
components: { Ellipsis, JSelectBizQueryItem, InventoryDetailSelectList },
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: () => []
},
testConfig: '',
headerCode: '',
rowKey: {
type: String,
default: 'id'
},
// 过长裁剪长度，设置为 -1 代表不裁剪
ellipsisLength: {
type: Number,
default: 12
}
},
data() {
return {
innerValue: [],
// 已选择列表
selectedTable: {
pagination: false,
scroll: { y: 240 },
columns: [
{
...this.columns[3],
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 = cloneDeep(this.columns)
columns.forEach(column => {
// 给所有的列加上过长裁剪
if (this.ellipsisLength !== -1) {
// JSelectBizComponent columns 建议开放customRender等方法类配置
// https://github.com/jeecgboot/jeecg-boot/issues/3203
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) {
Utils.$emit('methodA', data[this.valueKey])
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: {
solutionZoneCode(value) {
var actions = []
Object.keys(this.zoneList).some(key => {
if (this.zoneList[key].code == '' + value) {
actions.push(this.zoneList[key].name)
return true
}
})
return actions.join('')
},
/** 关闭弹窗 */
close() {
this.$emit('update:visible', false)
this.handleDeleteSelected(this.selectedTable.dataSource, 0)
},
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])
if (value.length >= 1) {
stockTakeTask(value, this.testConfig, this.headerCode)
.then(res => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
this.close()
Utils.$emit('methodB', res.result)
} else {
this.$message.warning(res.message)
}
})
.finally(() => {
this.confirmLoading = false
this.close()
})
} else {
alert('至少选择一项')
}
this.handleDeleteSelected(this.selectedTable.dataSource, 0)
},
/** 删除已选择的 */
handleDeleteSelected(record, index) {
Utils.$emit('methodA', 10)
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>