mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2025-12-08 17:12:28 +08:00
330 lines
9.6 KiB
Java
330 lines
9.6 KiB
Java
import PropTypes from 'ant-design-vue/es/_util/vue-types'
|
||
import { filterDictText } from '@/components/dict/JDictSelectUtil'
|
||
import { getEnhancedMixins, JVXERenderType, replaceProps } from '@/components/jeecg/JVxeTable/utils/cellUtils'
|
||
|
||
// noinspection JSUnusedLocalSymbols
|
||
export default {
|
||
inject: {
|
||
getParentContainer: {default: () => ((node) => node.parentNode)},
|
||
},
|
||
props: {
|
||
value: PropTypes.any,
|
||
row: PropTypes.object,
|
||
column: PropTypes.object,
|
||
// 组件参数
|
||
params: PropTypes.object,
|
||
// 渲染选项
|
||
renderOptions: PropTypes.object,
|
||
// 渲染类型
|
||
renderType: PropTypes.string.def('default'),
|
||
},
|
||
data() {
|
||
return {
|
||
innerValue: null,
|
||
}
|
||
},
|
||
computed: {
|
||
caseId() {
|
||
return this.renderOptions.caseId
|
||
},
|
||
originColumn() {
|
||
return this.column.own
|
||
},
|
||
$type() {
|
||
return this.originColumn.$type
|
||
},
|
||
rows() {
|
||
return this.params.data
|
||
},
|
||
fullDataLength() {
|
||
return this.params.$table.tableFullData.length
|
||
},
|
||
rowIndex() {
|
||
return this.params.rowIndex
|
||
},
|
||
columnIndex() {
|
||
return this.params.columnIndex
|
||
},
|
||
cellProps() {
|
||
let {originColumn: col, renderOptions} = this
|
||
|
||
let props = {}
|
||
|
||
// 输入占位符
|
||
props['placeholder'] = replaceProps(col, col.placeholder)
|
||
|
||
// 解析props
|
||
if (typeof col.props === 'object') {
|
||
Object.keys(col.props).forEach(key => {
|
||
props[key] = replaceProps(col, col.props[key])
|
||
})
|
||
}
|
||
|
||
// 判断是否是禁用的列
|
||
props['disabled'] = (typeof col['disabled'] === 'boolean' ? col['disabled'] : props['disabled'])
|
||
|
||
// TODO 判断是否是禁用的行
|
||
// if (props['disabled'] !== true) {
|
||
// props['disabled'] = ((this.disabledRowIds || []).indexOf(row.id) !== -1)
|
||
// }
|
||
|
||
// 判断是否禁用所有组件
|
||
if (renderOptions.disabled === true) {
|
||
props['disabled'] = true
|
||
}
|
||
|
||
// update-begin-author:taoyan date:20211011 for: online表单，附表用户选择器{"multiSelect":false}不生效，单表可以生效 #3036
|
||
let jsonStr = col['fieldExtendJson']
|
||
if(jsonStr){
|
||
let fieldExtendJson = JSON.parse(jsonStr)
|
||
if(fieldExtendJson && fieldExtendJson['multiSelect']==false){
|
||
props['multi'] = false
|
||
}
|
||
}
|
||
// update-end-author:taoyan date:20211011 for: online表单，附表用户选择器{"multiSelect":false}不生效，单表可以生效 #3036
|
||
|
||
return props
|
||
},
|
||
},
|
||
watch: {
|
||
$type: {
|
||
immediate: true,
|
||
handler($type) {
|
||
this.enhanced = getEnhancedMixins($type)
|
||
this.listeners = getListeners.call(this)
|
||
},
|
||
},
|
||
value: {
|
||
immediate: true,
|
||
handler(val) {
|
||
let value = val
|
||
|
||
// 验证值格式
|
||
let originValue = this.row[this.column.property]
|
||
let getValue = this.enhanced.getValue.call(this, originValue)
|
||
if (originValue !== getValue) {
|
||
// 值格式不正确，重新赋值
|
||
value = getValue
|
||
vModel.call(this, value)
|
||
}
|
||
|
||
this.innerValue = this.enhanced.setValue.call(this, value)
|
||
|
||
// 判断是否启用翻译
|
||
if (this.renderType === JVXERenderType.spaner && this.enhanced.translate.enabled) {
|
||
let res = this.enhanced.translate.handler.call(this, value)
|
||
// 异步翻译，目前仅【多级联动】使用
|
||
if (res instanceof Promise) {
|
||
res.then(value => this.innerValue = value)
|
||
} else {
|
||
this.innerValue = res
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
created() {
|
||
},
|
||
methods: {
|
||
|
||
/** 通用处理change事件 */
|
||
handleChangeCommon(value) {
|
||
let handle = this.enhanced.getValue.call(this, value)
|
||
this.trigger('change', {value: handle})
|
||
// 触发valueChange事件
|
||
this.parentTrigger('valueChange', {
|
||
type: this.$type,
|
||
value: handle,
|
||
oldValue: this.value,
|
||
col: this.originColumn,
|
||
rowIndex: this.params.rowIndex,
|
||
columnIndex: this.params.columnIndex,
|
||
})
|
||
},
|
||
/** 通用处理blur事件 */
|
||
handleBlurCommon(value) {
|
||
this.trigger('blur', {value})
|
||
},
|
||
|
||
/**
|
||
* 如果事件存在的话，就触发
|
||
* @param name 事件名
|
||
* @param event 事件参数
|
||
* @param args 其他附带参数
|
||
*/
|
||
trigger(name, event, args = []) {
|
||
let listener = this.listeners[name]
|
||
if (typeof listener === 'function') {
|
||
if (typeof event === 'object') {
|
||
event = this.packageEvent(name, event)
|
||
}
|
||
listener(event, ...args)
|
||
}
|
||
},
|
||
parentTrigger(name, event, args = []) {
|
||
args.unshift(this.packageEvent(name, event))
|
||
this.trigger('trigger', name, args)
|
||
},
|
||
packageEvent(name, event = {}) {
|
||
event.row = this.row
|
||
event.column = this.column
|
||
//online增强参数兼容
|
||
event.column['key'] = this.column['property']
|
||
event.cellTarget = this
|
||
if (!event.type) {
|
||
event.type = name
|
||
}
|
||
if (!event.cellType) {
|
||
event.cellType = this.$type
|
||
}
|
||
// 是否校验表单，默认为true
|
||
if (typeof event.validate !== 'boolean') {
|
||
event.validate = true
|
||
}
|
||
return event
|
||
},
|
||
|
||
},
|
||
model: {
|
||
prop: 'value',
|
||
event: 'change'
|
||
},
|
||
/**
|
||
* 【自定义增强】用于实现一些增强事件
|
||
* 【注】这里只是定义接口，具体功能需要到各个组件内实现（也有部分功能实现）
|
||
* 【注】该属性不是Vue官方属性，是JVxeTable组件自定义的
|
||
* 所以方法内的 this 指向并不是当前组件，而是方法自身，
|
||
* 也就是说并不能 this 打点调实例里的任何方法
|
||
*/
|
||
enhanced: {
|
||
// 注册参数（详见：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/renderer/edit）
|
||
installOptions: {
|
||
// 自动聚焦的 class 类名
|
||
autofocus: '',
|
||
},
|
||
// 事件拦截器（用于兼容）
|
||
interceptor: {
|
||
// 已实现：event.clearActived
|
||
// 说明：比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
|
||
['event.clearActived'](params, event, target) {
|
||
return true
|
||
},
|
||
// 自定义：event.clearActived.className
|
||
// 说明：比原生的多了一个参数：className，用于判断点击的元素的样式名（递归到顶层）
|
||
['event.clearActived.className'](params, event, target) {
|
||
return true
|
||
},
|
||
},
|
||
// 【功能开关】
|
||
switches: {
|
||
// 是否使用 editRender 模式（仅当前组件，并非全局）
|
||
// 如果设为true，则表头上方会出现一个可编辑的图标
|
||
editRender: true,
|
||
// false = 组件触发后可视）；true = 组件一直可视
|
||
visible: false,
|
||
},
|
||
// 【切面增强】切面事件处理，一般在某些方法执行后同步执行
|
||
aopEvents: {
|
||
// 单元格被激活编辑时会触发该事件
|
||
editActived() {
|
||
},
|
||
// 单元格编辑状态下被关闭时会触发该事件
|
||
editClosed() {
|
||
},
|
||
},
|
||
// 【翻译增强】可以实现例如select组件保存的value，但是span模式下需要显示成text
|
||
translate: {
|
||
// 是否启用翻译
|
||
enabled: false,
|
||
/**
|
||
* 【翻译处理方法】如果handler留空，则使用默认的翻译方法
|
||
* (this指向当前组件)
|
||
*
|
||
* @param value 需要翻译的值
|
||
* @returns{*} 返回翻译后的数据
|
||
*/
|
||
handler(value,) {
|
||
// 默认翻译方法
|
||
return filterDictText(this.column.own.options, value)
|
||
},
|
||
},
|
||
/**
|
||
* 【获取值增强】组件抛出的值
|
||
* (this指向当前组件)
|
||
*
|
||
* @param value 保存到数据库里的值
|
||
* @returns{*} 返回处理后的值
|
||
*/
|
||
getValue(value) {
|
||
return value
|
||
},
|
||
/**
|
||
* 【设置值增强】设置给组件的值
|
||
* (this指向当前组件)
|
||
*
|
||
* @param value 组件触发的值
|
||
* @returns{*} 返回处理后的值
|
||
*/
|
||
setValue(value) {
|
||
return value
|
||
},
|
||
/**
|
||
* 【新增行增强】在用户点击新增时触发的事件，返回新行的默认值
|
||
*
|
||
* @param row 行数据
|
||
* @param column 列配置，.own 是用户配置的参数
|
||
* @param $table vxe 实例
|
||
* @param renderOptions 渲染选项
|
||
* @param params 可以在这里获取 $table
|
||
*
|
||
* @returns 返回新值
|
||
*/
|
||
createValue({row, column, $table, renderOptions, params}) {
|
||
return column.own.defaultValue
|
||
},
|
||
}
|
||
}
|
||
|
||
function getListeners() {
|
||
let listeners = Object.assign({}, (this.renderOptions.listeners || {}))
|
||
if (!listeners.change) {
|
||
listeners.change = async (event) => {
|
||
vModel.call(this, event.value)
|
||
await this.$nextTick()
|
||
// 处理 change 事件相关逻辑（例如校验）
|
||
this.params.$table.updateStatus(this.params)
|
||
}
|
||
}
|
||
return listeners
|
||
}
|
||
|
||
export function vModel(value, row, property) {
|
||
if (!row) {
|
||
row = this.row
|
||
}
|
||
if (!property) {
|
||
property = this.column.property
|
||
}
|
||
this.$set(row, property, value)
|
||
}
|
||
|
||
/** 模拟触发事件 */
|
||
export function dispatchEvent({cell, $event}, className, handler) {
|
||
// alwaysEdit 下不模拟触发事件，否者会导致触发两次
|
||
if (this && this.alwaysEdit) {
|
||
return
|
||
}
|
||
window.setTimeout(() => {
|
||
let element = cell.getElementsByClassName(className)
|
||
if (element && element.length > 0) {
|
||
if (typeof handler === 'function') {
|
||
handler(element[0])
|
||
} else {
|
||
// 模拟触发点击事件
|
||
if($event){
|
||
element[0].dispatchEvent($event)
|
||
}
|
||
}
|
||
}
|
||
}, 10)
|
||
} |