【fix bug】66425【前端】升级vxe-table组件到3.6.10版本,并同步适配当前框架中所有使用到vxe-table组件的示例

This commit is contained in:
zhaoxiao
2023-03-15 09:48:17 +08:00
parent 131cbd9765
commit 61c230cb87
21 changed files with 449 additions and 295 deletions
+3 -3
View File
@@ -45,9 +45,9 @@
"vue-splitpane": "^1.0.4",
"vuedraggable": "^2.20.0",
"vuex": "^3.1.0",
"vxe-table": "2.9.13",
"vxe-table-plugin-antd": "1.8.10",
"xe-utils": "2.4.8"
"vxe-table": "^3.6.10",
"vxe-table-plugin-antd": "^1.11.2",
"xe-utils": "^3.5.7"
},
"devDependencies": {
"@babel/polyfill": "^7.2.5",
@@ -12,7 +12,7 @@ import JVxeSubPopover from './JVxeSubPopover'
import JVxeDetailsModal from './JVxeDetailsModal'
import JVxePagination from './JVxePagination'
import { cloneObject, getVmParentByName, pushIfNotExist, randomString, simpleDebounce } from '@/utils/util'
import { UtilTools } from 'vxe-table/packages/tools/src/utils'
import { UtilTools } from 'vxe-table/packages/tools/utils'
import { getNoAuthCols } from '@/utils/authFilter'
export default {
@@ -351,7 +351,7 @@ export default {
this.statistics.average = []
// 处理成vxe可识别的columns
columns.forEach(column => {
columns.forEach((column, columnIndex) => {
if (this.excludeCode.indexOf(column.key) >= 0) {
return false
}
@@ -389,7 +389,7 @@ export default {
col[renderName] = renderOptions
// 处理字典
if (col.dictCode) {
this._loadDictConcatToOptions(col)
this._loadDictConcatToOptions(col, columnIndex)
}
// 处理校验
if (col.validateRules) {
@@ -631,7 +631,7 @@ export default {
}
// 显示详细信息
if (column.own.showDetails) {
if (column.params && column.params.showDetails) {
// 两个如果同时存在的话会出现死循环
if ($refs.subPopover) {
$refs.subPopover.close()
@@ -669,13 +669,15 @@ export default {
// 单元格编辑状态下被关闭时会触发该事件
handleEditClosed ({ column }) {
// 执行增强
getEnhancedMixins(column.own.$type, 'aopEvents').editClosed.apply(this, arguments)
getEnhancedMixins(column.params.type, 'aopEvents').editClosed.apply(this, arguments)
},
// 单元格被激活编辑时会触发该事件
handleEditActived ({ column }) {
// 执行增强
getEnhancedMixins(column.own.$type, 'aopEvents').editActived.apply(this, arguments)
if (column.params && column.params.type) {
getEnhancedMixins(column.params.type, 'aopEvents').editActived.apply(this, arguments)
}
},
/** 表尾数据处理方法,用于显示统计信息 */
@@ -794,10 +796,10 @@ export default {
this.$set(row, colKey, newValue)
// 触发 valueChange 事件
this.trigger('valueChange', {
type: column.own.$type,
type: column.params.type,
value: newValue,
oldValue: oldValue,
col: column.own,
col: column.params,
column: column,
isSetValues: true
})
@@ -1067,7 +1069,7 @@ export default {
},
/** 加载数据字典并合并到 options */
_loadDictConcatToOptions (column) {
_loadDictConcatToOptions (column, columnIndex) {
initDictOptions(column.dictCode).then((res) => {
if (res.success) {
const newOptions = (column.options || [])// .concat(res.result)
@@ -1077,6 +1079,9 @@ export default {
newOptions.push(item)
})
this.$set(column, 'options', newOptions)
const newParams = Object.assign(column.params, { options: newOptions })
this.$set(column, 'params', newParams)
this.$set(this._innerColumns, columnIndex, column)
} else {
console.group(`JVxeTable 查询字典(${column.dictCode})发生异常`)
console.warn(res.message)
@@ -1182,7 +1187,7 @@ export default {
XEUtils.remove(insertList, row => rows.indexOf(row) > -1)
xTable.handleTableData()
xTable.updateFooter()
xTable.updateCache()
xTable.updateCache && xTable.updateCache()
xTable.checkSelectionStatus()
if (scrollYLoad) {
xTable.updateScrollYSpace()
@@ -1219,7 +1224,9 @@ export default {
data[this.dragSortKey] = (idx + 1)
})
}
await xTable.updateCache(true)
if (xTable.updateCache) {
await xTable.updateCache(true)
}
return await xTable.updateData()
},
@@ -1255,7 +1262,7 @@ export default {
const { xTable } = this.$refs.vxe.$refs
// 添加默认值
xTable.tableFullColumn.forEach(column => {
const col = column.own
const col = column.params || {}
if (col.key && (record[col.key] == null || record[col.key] === '')) {
// 设置默认值
const createValue = getEnhancedMixins(col.$type || col.type, 'createValue')
@@ -1436,7 +1443,7 @@ function handlerConvertToValidator (event) {
rule.handler(event, (flag, msg) => {
let message = rule.message
if (typeof msg === 'string') {
message = replaceProps(column.own, msg)
message = replaceProps(column.params, msg)
}
if (flag == null) {
resolve(message)
@@ -1455,7 +1462,7 @@ function uniqueValidator (event) {
const tableData = this.getTableData()
let findCount = 0
for (const rowData of tableData) {
if (rowData[column.own.key] === cellValue) {
if (rowData[column.params.key] === cellValue) {
if (++findCount >= 2) {
return Promise.reject(new Error(rule.message))
}
@@ -50,7 +50,7 @@ export default {
visible: true
},
getValue (value) {
const { own: col } = this.column
const { params: col } = this.column
// 处理 customValue
if (Array.isArray(col.customValue)) {
const customValue = getCustomValue(col)
@@ -64,7 +64,7 @@ export default {
}
},
setValue (value) {
const { own: col } = this.column
const { params: col } = this.column
// 判断是否设定了customValue(自定义值)
if (Array.isArray(col.customValue)) {
const customValue = getCustomValue(col)
@@ -74,7 +74,7 @@ export default {
}
},
createValue ({ column }) {
const { own: col } = column
const { params: col } = column
if (Array.isArray(col.customValue)) {
const customValue = getCustomValue(col)
return col.defaultChecked ? customValue[0] : customValue[1]
@@ -93,11 +93,11 @@ function getCustomValue (col) {
</script>
<style lang="less">
// 关闭动画,防止滚动时动态赋值出现问题
.j-vxe-checkbox.no-animation {
.ant-checkbox-inner,
.ant-checkbox-inner::after {
transition: none !important;
}
// 关闭动画,防止滚动时动态赋值出现问题
.j-vxe-checkbox.no-animation {
.ant-checkbox-inner,
.ant-checkbox-inner::after {
transition: none !important;
}
}
</style>
@@ -8,8 +8,7 @@
style="width: 100%;"
@blur="handleBlur"
@change="handleChange"
@search="handleSearchSelect"
>
@search="handleSearchSelect">
<div v-if="loading" slot="notFoundContent">
<a-icon type="loading" />
@@ -47,7 +46,7 @@ export default {
}
const { linkage } = this.renderOptions
if (linkage) {
this.handleComputedSelectOptions(linkage)
return this.handleComputedSelectOptions(linkage)
}
return this.originColumn.options
},
@@ -184,7 +183,7 @@ export default {
})
}
} else {
options = this.column.own.options
options = (this.column.params || {}).options
}
return filterDictText(options, value)
}
@@ -197,7 +196,7 @@ export default {
}
},
setValue (value) {
const { column: { own: col }, params: { $table } } = this
const { column: { params: col }, params: { $table } } = this
// 判断是否是多选
if ((col.props || {}).mode === 'multiple') {
$table.$set(col.props, 'maxTagCount', 1)
@@ -45,12 +45,11 @@
name="file"
:data="{'isup': 1}"
:multiple="false"
:action="originColumn.action"
:action="uploadAction"
:headers="uploadHeaders"
:showUploadList="false"
v-bind="cellProps"
@change="handleChangeUpload"
>
@change="handleChangeUpload">
<a-button icon="upload">{{ originColumn.btnText || '点击上传' }}</a-button>
</a-upload>
</div>
@@ -80,11 +79,15 @@ export default {
}
return headers
},
hasFile () {
return this.innerFile != null
return !!this.innerFile
},
uploadAction () {
if (this.originColumn.action) {
return this.originColumn.action
}
return window._CONFIG.domianURL + '/sys/common/upload'
}
},
watch: {
innerValue: {
@@ -116,7 +119,7 @@ export default {
if (file.status === 'done') {
if (typeof file.response.success === 'boolean') {
if (file.response.success) {
value.path = file.response[col.responseName]
value.path = col.responseName ? file.response[col.responseName] : file.response.result.url
} else {
value.status = 'error'
value.message = file.response.message || '未知错误'
@@ -129,6 +132,10 @@ export default {
value.message = file.response.message || '未知错误'
}
this.innerFile = value
// 上传完成后触发通用change事件,将值抛出去
if (file.status === 'done') {
this.handleChangeCommon(this.innerFile)
}
},
// handleClickPreviewFile(id) {
@@ -43,15 +43,15 @@ installAllCell(VXETable)
// 比如点击了某个组件的弹出层面板之后,此时被激活单元格不应该被自动关闭,通过返回 false 可以阻止默认的行为。
VXETable.interceptor.add('event.clearActived', function (params, event, target) {
// 获取组件增强
const col = params.column.own
const col = params.column.params || {}
const interceptor = getEnhancedMixins(col.$type, 'interceptor')
// 执行增强
const flag = interceptor['event.clearActived'].apply(this, arguments)
if (flag === false) {
return false
}
const path = getEventPath(event)
// 此处判断一下event是否存在,防止后续内容报错
const path = event ? getEventPath(event) : []
for (const p of path) {
let className = p.className || ''
className = typeof className === 'string' ? className : className.toString()
@@ -28,10 +28,10 @@ export default {
return this.renderOptions.caseId
},
originColumn () {
return this.column.own
return this.column.params || {}
},
$type () {
return this.originColumn.$type
return this.originColumn.type
},
rows () {
return this.params.data
@@ -272,7 +272,7 @@ export default {
* @returns 返回新值
*/
createValue ({ row, column, $table, renderOptions, params }) {
return column.own.defaultValue
return (column.params || {}).defaultValue
}
}
}
@@ -307,7 +307,7 @@ export function dispatchEvent ({ cell, $event }, className, handler) {
return
}
window.setTimeout(() => {
const element = cell.getElementsByClassName(className)
const element = cell ? cell.getElementsByClassName(className) : null
if (element && element.length > 0) {
if (typeof handler === 'function') {
handler(element[0])
@@ -49,7 +49,7 @@ const vs = {
initialWebSocket () {
if (this.ws === null) {
const userId = store.getters.userInfo.id
const domain = window._CONFIG.domianURL.replace('https://', 'wss://').replace('http://', 'ws://')
const domain = window._CONFIG.domianWebSocketURL.replace('https://', 'wss://').replace('http://', 'ws://')
const url = `${domain}/vxeSocket/${userId}/${this.pageId}`
this.ws = new WebSocket(url)
@@ -33,12 +33,14 @@ export function installEditRender (VXETable, type, comp, spanComp) {
} else {
spanComp = AllCells[JVXETypes.normal]
}
// 如果是常显的cell,显示模板和编辑模板都用编辑模板
const cellRender = enhanced.switches.visible ? createRender(comp, enhanced, JVXERenderType.editer) : createRender(spanComp, enhanced, JVXERenderType.spaner)
// 添加渲染
VXETable.renderer.add(JVXETypes._prefix + type, {
// 可编辑模板
renderEdit: createRender(comp, enhanced, JVXERenderType.editer),
// 显示模板
renderCell: createRender(spanComp, enhanced, JVXERenderType.spaner),
renderCell: cellRender,
// 增强注册
...enhanced.installOptions
})
@@ -56,7 +58,7 @@ export function installCellRender (VXETable, type, comp = AllCells[JVXETypes.nor
})
}
function createRender (comp, enhanced, renderType) {
export function createRender (comp, enhanced, renderType) {
return function (h, renderOptions, params) {
return [h(comp, {
props: {
+82 -30
View File
@@ -5,14 +5,13 @@
:row-number="true"
:row-selection="true"
:drag-sort="true"
keep-source
:keep-source="true"
:height="580"
:loading="loading"
:dataSource="dataSource"
:columns="columns"
style="margin-top: 8px;"
@valueChange="handleValueChange"
>
@valueChange="handleValueChange">
<template v-slot:toolbarSuffix>
<a-button @click="handleTableCheck">表单验证</a-button>
@@ -24,9 +23,13 @@
</a-tooltip>
</template>
<template v-slot:checkbox="props">
<a-checkbox />
</template>
<template v-slot:action="props">
<a @click="handleCK(props)">查看</a>
<a-divider type="vertical"/>
<a-divider type="vertical" />
<a-popconfirm title="确定删除吗?" @confirm="handleDL(props)">
<a>删除</a>
</a-popconfirm>
@@ -50,6 +53,14 @@ export default {
title: '不可编辑',
key: 'normal',
type: JVXETypes.normal,
params: {
key: 'normal',
type: JVXETypes.normal
},
props: {
key: 'normal',
type: JVXETypes.normal
},
width: '180px',
fixed: 'left',
defaultValue: 'normal-new'
@@ -58,6 +69,10 @@ export default {
title: '单行文本',
key: 'input',
type: JVXETypes.input,
params: {
key: 'input',
type: JVXETypes.input
},
width: '180px',
defaultValue: '',
placeholder: '请输入${title}', // 这是vxe-table的写法
@@ -97,14 +112,22 @@ export default {
title: '多行文本',
key: 'textarea',
type: JVXETypes.textarea,
params: {
key: 'textarea',
type: JVXETypes.textarea
},
width: '200px'
},
{
title: '数字',
key: 'number',
type: JVXETypes.inputNumber,
params: {
key: 'number',
type: JVXETypes.inputNumber,
defaultValue: 32
},
width: '80px',
defaultValue: 32,
// 【统计列】sum = 求和、average = 平均值
statistics: ['sum', 'average']
},
@@ -112,38 +135,49 @@ export default {
title: '下拉框',
key: 'select',
type: JVXETypes.select,
params: {
key: 'select',
allowInput: true,
type: JVXETypes.select,
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
]
},
width: '180px',
// 下拉选项
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
],
allowInput: true,
placeholder: '请选择'
},
{
title: '下拉框_字典',
key: 'select_dict',
type: JVXETypes.select,
width: '180px',
options: [],
params: {
key: 'select_dict',
type: JVXETypes.select,
options: []
},
dictCode: 'sex',
width: '180px',
placeholder: '请选择'
},
{
title: '下拉框_多选',
key: 'select_multiple',
type: JVXETypes.selectMultiple,
params: {
key: 'select_multiple',
defaultValue: ['int', 'boolean'], // 多个默认项
type: JVXETypes.selectMultiple,
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
]
},
width: '205px',
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
],
defaultValue: ['int', 'boolean'], // 多个默认项
// defaultValue: 'string,double,int', // 也可使用这种方式
placeholder: '多选'
},
@@ -152,26 +186,40 @@ export default {
title: '下拉框_搜索',
key: 'select_search',
type: JVXETypes.selectSearch,
width: '180px',
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
]
params: {
key: 'select_search',
type: JVXETypes.selectSearch,
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
]
},
width: '180px'
},
{
title: '日期时间',
key: 'datetime',
type: JVXETypes.datetime,
params: {
key: 'datetime',
type: JVXETypes.datetime,
defaultValue: '2019-4-30 14:52:22'
},
width: '200px',
defaultValue: '2019-4-30 14:52:22',
placeholder: '请选择'
},
{
title: '复选框',
key: 'checkbox',
type: JVXETypes.checkbox,
params: {
key: 'checkbox',
type: JVXETypes.checkbox,
customValue: ['Y', 'N'], // true ,false
defaultChecked: false
},
width: '100px',
customValue: ['Y', 'N'], // true ,false
defaultChecked: false
@@ -180,6 +228,10 @@ export default {
title: '操作',
key: 'action',
type: JVXETypes.slot,
params: {
key: 'action',
type: JVXETypes.slot
},
fixed: 'right',
minWidth: '100px',
align: 'center',
+57 -11
View File
@@ -11,8 +11,7 @@
:columns="columns"
:pagination="pagination"
style="margin-top: 8px;"
@pageChange="handlePageChange"
>
@pageChange="handlePageChange">
<template v-slot:toolbarSuffix>
<a-button @click="handleTableGet">获取值</a-button>
@@ -38,7 +37,11 @@ export default {
type: JVXETypes.selectDictSearch,
width: '200px',
// 【字典表配置信息】:数据库表名,显示字段名,存储字段名
dict: 'sys_user,realname,username'
dict: 'sys_user,realname,username',
params: {
key: 'select_dict_search',
type: JVXETypes.selectDictSearch
}
},
{
title: 'JPopup',
@@ -48,7 +51,15 @@ export default {
popupCode: 'demo',
field: 'name,sex,age',
orgFields: 'name,sex,age',
destFields: 'popup,popup_sex,popup_age'
destFields: 'popup,popup_sex,popup_age',
params: {
key: 'popup',
type: JVXETypes.popup,
popupCode: 'demo',
field: 'name,sex,age',
orgFields: 'name,sex,age',
destFields: 'popup,popup_sex,popup_age'
}
},
{
title: 'JP-性别',
@@ -56,19 +67,31 @@ export default {
type: JVXETypes.select,
dictCode: 'sex',
disabled: true,
width: '100px'
width: '100px',
params: {
key: 'popup_sex',
type: JVXETypes.select
}
},
{
title: 'JP-年龄',
key: 'popup_age',
type: JVXETypes.normal,
width: '80px'
width: '80px',
params: {
key: 'popup_age',
type: JVXETypes.normal
}
},
{
title: '进度条',
key: 'progress',
type: JVXETypes.progress,
minWidth: '120px'
minWidth: '120px',
params: {
key: 'progress',
type: JVXETypes.progress
}
},
{
title: '单选',
@@ -80,7 +103,15 @@ export default {
{ text: '女', value: '2' }
],
// 允许清除选择(再点一次取消选择)
allowClear: true
allowClear: true,
params: {
key: 'radio',
type: JVXETypes.radio,
options: [
{ text: '男', value: '1' },
{ text: '女', value: '2' }
]
}
},
{
title: '上传',
@@ -90,21 +121,36 @@ export default {
btnText: '点击上传',
token: true,
responseName: 'message',
action: window._CONFIG.domianURL + '/sys/common/upload'
action: window._CONFIG.domianURL + '/sys/common/upload',
params: {
key: 'upload',
type: JVXETypes.upload,
token: true
}
},
{
title: '图片上传',
key: 'image',
type: JVXETypes.image,
width: '180px',
token: true
token: true,
params: {
key: 'image',
type: JVXETypes.image,
token: true
}
},
{
title: '文件上传',
key: 'file',
type: JVXETypes.file,
width: '180px',
token: true
token: true,
params: {
key: 'file',
type: JVXETypes.file,
token: true
}
}
],
dataSource: [],
+46 -10
View File
@@ -8,8 +8,7 @@
:height="484"
:dataSource="dataSource"
:columns="columns"
:linkage-config="linkageConfig"
/>
:linkage-config="linkageConfig" />
</template>
<script>
@@ -30,9 +29,14 @@ export default {
title: '性别',
key: 'sex',
type: JVXETypes.select,
dictCode: 'sex',
width: '180px',
placeholder: '请选择${title}'
placeholder: '请选择${title}',
params: {
key: 'sex',
type: JVXETypes.select,
options: [],
dictCode: 'sex'
}
},
{
title: '/直辖市/自治区',
@@ -41,7 +45,13 @@ export default {
width: '180px',
placeholder: '请选择${title}',
// 联动字段(即下一级的字段)
linkageKey: 's2'
linkageKey: 's2',
params: {
key: 's1',
type: JVXETypes.select,
// 联动字段(即下一级的字段)
linkageKey: 's2'
}
},
{
title: '市',
@@ -50,7 +60,13 @@ export default {
width: '180px',
placeholder: '请选择${title}',
// 联动字段(即下一级的字段)
linkageKey: 's3'
linkageKey: 's3',
params: {
key: 's2',
type: JVXETypes.select,
// 联动字段(即下一级的字段)
linkageKey: 's3'
}
},
{
title: '/',
@@ -58,7 +74,11 @@ export default {
type: JVXETypes.select,
width: '180px',
options: [],
placeholder: '请选择${title}'
placeholder: '请选择${title}',
params: {
key: 's3',
type: JVXETypes.select
}
},
{
title: '一级',
@@ -67,7 +87,13 @@ export default {
width: '180px',
placeholder: '请选择${title}',
// 联动字段(即下一级的字段)
linkageKey: 'level2'
linkageKey: 'level2',
params: {
key: 'level1',
type: JVXETypes.select,
// 联动字段(即下一级的字段)
linkageKey: 'level2'
}
},
{
title: '二级',
@@ -76,14 +102,24 @@ export default {
width: '180px',
placeholder: '请选择${title}',
// 联动字段(即下一级的字段)
linkageKey: 'level3'
linkageKey: 'level3',
params: {
key: 'level2',
type: JVXETypes.select,
// 联动字段(即下一级的字段)
linkageKey: 'level3'
}
},
{
title: '三级',
key: 'level3',
type: JVXETypes.select,
width: '180px',
placeholder: '请选择${title}'
placeholder: '请选择${title}',
params: {
key: 'level3',
type: JVXETypes.select
}
}
],
dataSource: [
@@ -23,8 +23,7 @@
@remove="handleTableRemove"
@edit-closed="handleEditClosed"
@pageChange="handlePageChange"
@selectRowChange="handleSelectRowChange"
/>
@selectRowChange="handleSelectRowChange" />
</a-card>
</template>
@@ -70,12 +69,22 @@ export default {
// 列的宽度
width: '180px',
// 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input, params: { defaultValue: 233, type: JVXETypes.input } },
{
key: 'payer',
title: '付款方',
width: '120px',
defaultValue: '张三',
type: JVXETypes.input,
params: { defaultValue: '张三', type: JVXETypes.input }
},
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
{ key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input },
{ key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', type: JVXETypes.input },
{ key: 'count', title: '数', width: '40px' },
{
key: 'company',
@@ -83,9 +92,12 @@ export default {
// 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
// 如果要做占满表格的列可以这么写
minWidth: '180px',
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
],
// 查询url地址
url: {
@@ -16,80 +16,65 @@
-->
<j-vxe-table
:toolbar="true"
:row-number="true"
:row-selection="true"
:toolbar="true" :row-number="true" :row-selection="true"
highlight-current-row
:click-row-show-sub-form="true"
:click-row-show-main-form="true"
highlight-current-row :click-row-show-sub-form="true" :click-row-show-main-form="true"
:height="750"
:loading="loading"
:columns="columns"
:dataSource="dataSource"
@detailsConfirm="handleDetailsConfirm"
>
:height="750" :loading="loading" :columns="columns" :dataSource="dataSource" @detailsConfirm="handleDetailsConfirm">
<!-- 主表单 -->
<template v-slot:mainForm="{row}">
<template v-if="row">
<a-form-model
ref="form2"
:model="row"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model ref="form2" :model="row" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="8">
<a-col :span="8">
<a-form-model-item label="ID" prop="id">
<a-input v-model="row.id" disabled/>
<a-input v-model="row.id" disabled />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="序号" prop="num">
<a-input v-model="row.num"/>
<a-input v-model="row.num" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="船名" prop="ship_name">
<a-input v-model="row.ship_name"/>
<a-input v-model="row.ship_name" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="呼叫" prop="call">
<a-input v-model="row.call"/>
<a-input v-model="row.call" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="" prop="len">
<a-input v-model="row.len"/>
<a-input v-model="row.len" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="" prop="ton">
<a-input v-model="row.ton"/>
<a-input v-model="row.ton" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="付款方" prop="payer">
<a-input v-model="row.payer"/>
<a-input v-model="row.payer" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="" prop="count">
<a-input v-model="row.count"/>
<a-input v-model="row.count" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="公司" prop="company">
<a-input v-model="row.company"/>
<a-input v-model="row.company" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="动向" prop="trend">
<a-input v-model="row.trend"/>
<a-input v-model="row.trend" />
</a-form-model-item>
</a-col>
</a-row>
@@ -107,8 +92,7 @@
:max-height="350"
:loading="subTable.loading"
:columns="subTable.columns"
:dataSource="subTable.dataSource"
/>
:dataSource="subTable.dataSource" />
</template>
</template>
@@ -130,7 +114,7 @@ export default {
dataSource: [],
columns: [
{ key: 'num', title: '序号', width: '80px' },
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input },
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'call', title: '呼叫', width: '80px' },
{ key: 'len', title: '长', width: '80px' },
{ key: 'ton', title: '吨', width: '120px' },
@@ -143,7 +127,10 @@ export default {
// 是否点击显示详细信息
// 只有当前单元格不能编辑的时候才能生效
// 如果不设的话,点击就只弹出子表,不会弹出主表的详细信息
showDetails: true
showDetails: true,
params: {
showDetails: true
}
},
{ key: 'trend', title: '动向', width: '120px' }
],
@@ -156,11 +143,11 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
{ key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 查询url地址
@@ -3,7 +3,7 @@
<div style="margin-bottom: 8px;">
<span>启用数据变动特效</span>
<a-switch v-model="reloadEffect"/>
<a-switch v-model="reloadEffect" />
</div>
<!--
@@ -47,14 +47,14 @@ export default {
dataSource: [],
columns: [
{ key: 'num', title: '序号', width: '80px' },
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input },
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'count', title: '数', width: '40px' },
{ key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input },
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
],
// 查询url地址
url: {
@@ -19,8 +19,7 @@
style="margin-bottom: 8px"
@pageChange="handleTable1PageChange"
@selectRowChange="handleTable1SelectRowChange"
></j-vxe-table>
@selectRowChange="handleTable1SelectRowChange"></j-vxe-table>
<a-tabs v-show="subTabs.show" :class="{'sub-tabs':true, 'un-expand': !subTabs.expand}">
<a-tab-pane tab="子表1" key="1">
@@ -35,8 +34,7 @@
:dataSource="table2.dataSource"
:pagination="table2.pagination"
@pageChange="handleTable2PageChange"
@selectRowChange="handleTable2SelectRowChange"
/>
@selectRowChange="handleTable2SelectRowChange" />
</a-tab-pane>
<a-tab-pane tab="子表2" key="2">
<h1>这里是子表2</h1>
@@ -100,7 +98,7 @@ export default {
if (this.subTabs.show) {
const expand = (<span>
<a-button type="link" onClick={this.handleToggleTabs}>
<a-icon type={this.subTabs.expand ? 'up' : 'down'}/>
<a-icon type={this.subTabs.expand ? 'up' : 'down'} />
<span>{this.subTabs.expand ? '收起' : '展开'}</span>
</a-button>
<a-checkbox vModel={this.subTabs.autoExpand}>自动展开</a-checkbox>
@@ -128,12 +126,15 @@ export default {
// 列的宽度
width: '180px',
// 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
{ key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'count', title: '数', width: '40px' },
{
key: 'company',
@@ -141,9 +142,12 @@ export default {
// 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
// 如果要做占满表格的列可以这么写
minWidth: '180px',
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 子级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
@@ -155,11 +159,11 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
currentSubRow: null,
@@ -285,23 +289,23 @@ export default {
</script>
<style lang="less" scoped>
.sub-tabs {
&.un-expand {
/deep/ .ant-tabs-content {
height: 0 !important;
}
.sub-tabs {
&.un-expand {
/deep/ .ant-tabs-content {
height: 0 !important;
}
/deep/ .ant-tabs-bar {
border-color: transparent !important;
}
/deep/ .ant-tabs-bar {
border-color: transparent !important;
}
/deep/ .ant-tabs-ink-bar {
background-color: transparent !important;
}
/deep/ .ant-tabs-ink-bar {
background-color: transparent !important;
}
/deep/ .ant-tabs-tab {
display: none !important;
}
/deep/ .ant-tabs-tab {
display: none !important;
}
}
}
</style>
@@ -17,8 +17,7 @@
:dataSource="table1.dataSource"
:pagination="table1.pagination"
@pageChange="handleTable1PageChange"
@selectRowChange="handleTable1SelectRowChange"
/>
@selectRowChange="handleTable1SelectRowChange" />
</a-col>
<!-- 这里是子级节点 -->
<a-col :span="12">
@@ -36,9 +35,7 @@
:dataSource="table2.dataSource"
:pagination="table2.pagination"
@pageChange="handleTable2PageChange"
@selectRowChange="handleTable2SelectRowChange"
>
</j-vxe-table>
@selectRowChange="handleTable2SelectRowChange"></j-vxe-table>
</a-col>
<!-- 这里是孙级节点 -->
<a-col :span="12">
@@ -51,9 +48,7 @@
:columns="table3.columns"
:dataSource="table3.dataSource"
:pagination="table3.pagination"
@pageChange="handleTable3PageChange"
>
</j-vxe-table>
@pageChange="handleTable3PageChange"></j-vxe-table>
</a-col>
</a-row>
</a-card>
@@ -106,12 +101,15 @@ export default {
foo += '-233'
}
return cellValue + foo
},
params: {
type: JVXETypes.input
}
},
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'count', title: '数', width: '40px' },
{
key: 'company',
@@ -119,9 +117,12 @@ export default {
// 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
// 如果要做占满表格的列可以这么写
minWidth: '180px',
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 子级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
@@ -134,11 +135,11 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 孙级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
@@ -149,10 +150,10 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input },
{ key: 'power', title: '马力', width: '120px', type: JVXETypes.input },
{ key: 'nature', title: '性质', width: '120px', type: JVXETypes.input },
{ key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'power', title: '马力', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'nature', title: '性质', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 查询url地址
@@ -17,20 +17,15 @@
:dataSource="table1.dataSource"
:pagination="table1.pagination"
@pageChange="handleTable1PageChange"
@selectRowChange="handleTable1SelectRowChange"
/>
@selectRowChange="handleTable1SelectRowChange" />
</a-col>
<a-col :span="12">
<!-- 左侧选择的数据展示在这里 -->
<j-vxe-table
:row-number="true"
:height="381"
:row-number="true" :height="381"
:columns="table1.columns"
:dataSource="table1.selectedRows"
style="margin: 40px 0 8px;"
/>
:columns="table1.columns" :dataSource="table1.selectedRows" style="margin: 40px 0 8px;" />
<!-- 右下子 -->
<j-vxe-table
@@ -44,8 +39,7 @@
:dataSource="table2.dataSource"
:pagination="table2.pagination"
@pageChange="handleTable2PageChange"
@selectRowChange="handleTable2SelectRowChange"
/>
@selectRowChange="handleTable2SelectRowChange" />
</a-col>
</a-row>
@@ -92,12 +86,15 @@ export default {
// 列的宽度
width: '180px',
// 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'count', title: '数', width: '40px' },
{
key: 'company',
@@ -105,9 +102,12 @@ export default {
// 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
// 如果要做占满表格的列可以这么写
minWidth: '180px',
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 子级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
@@ -118,11 +118,11 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 查询url地址
@@ -19,8 +19,7 @@
:pagination="table1.pagination"
style="margin-bottom: 8px;"
@pageChange="handleTable1PageChange"
@selectRowChange="handleTable1SelectRowChange"
/>
@selectRowChange="handleTable1SelectRowChange" />
<!-- 左下子 -->
<j-vxe-table
@@ -33,18 +32,11 @@
:columns="table2.columns"
:dataSource="table2.dataSource"
:pagination="table2.pagination"
@pageChange="handleTable2PageChange"
/>
@pageChange="handleTable2PageChange" />
</a-col>
<!-- 左侧父选择的数据展示在这里 -->
<a-col :span="12">
<j-vxe-table
:row-number="true"
:height="800"
:columns="table1.columns"
:dataSource="table1.selectedRows"
style="margin-top: 40px;"
/>
<j-vxe-table :row-number="true" :height="800" :columns="table1.columns" :dataSource="table1.selectedRows" style="margin-top: 40px;" />
</a-col>
</a-row>
@@ -93,15 +85,18 @@ export default {
// 列的宽度
width: '180px',
// 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'count', title: '数', width: '40px' },
{ key: 'company', title: '公司', width: '180px', type: JVXETypes.input },
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'company', title: '公司', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 子表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
@@ -111,11 +106,11 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 查询url地址
@@ -19,8 +19,7 @@
:pagination="table1.pagination"
style="margin-bottom: 8px;"
@pageChange="handleTable1PageChange"
@selectRowChange="handleTable1SelectRowChange"
/>
@selectRowChange="handleTable1SelectRowChange" />
<!-- 左下子 -->
<j-vxe-table
:toolbar="true"
@@ -32,8 +31,7 @@
:columns="table2.columns"
:dataSource="table2.dataSource"
:pagination="table2.pagination"
@pageChange="handleTable2PageChange"
/>
@pageChange="handleTable2PageChange" />
</a-col>
<!-- 左侧父选择的数据展示在这里 -->
<a-col :span="12">
@@ -49,8 +47,7 @@
:columns="table1.columns"
:dataSource="table1.selectedRows"
style="margin: 40px 0 8px;"
@selectRowChange="handleTable3SelectRowChange"
/>
@selectRowChange="handleTable3SelectRowChange" />
<!-- 右下子 -->
<j-vxe-table
:toolbar="true"
@@ -62,8 +59,7 @@
:columns="table4.columns"
:dataSource="table4.dataSource"
:pagination="table4.pagination"
style="margin: 48px 0 0;"
/>
style="margin: 48px 0 0;" />
</a-col>
</a-row>
@@ -109,12 +105,15 @@ export default {
// 列的宽度
width: '180px',
// 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'count', title: '数', width: '40px' },
{
key: 'company',
@@ -122,9 +121,12 @@ export default {
// 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
// 如果要做占满表格的列可以这么写
minWidth: '180px',
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 子级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
@@ -135,11 +137,11 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
table3: {
@@ -155,11 +157,11 @@ export default {
dataSource: [],
columns: [
{ key: 'dd_num', title: '调度序号', width: '120px' },
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
]
},
// 查询url地址
@@ -12,10 +12,9 @@
:expandedKeys="treeExpandedKeys"
:selectedKeys="[pagination.current]"
@expand="handleTreeExpand"
@select="handleTreeSelect"
>
@select="handleTreeSelect">
<!-- 自定义子节点图标 -->
<a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;"/>
<a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;" />
</a-tree>
</a-col>
<a-col :span="18">
@@ -27,8 +26,7 @@
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
@pageChange="handleTablePageChange"
/>
@pageChange="handleTablePageChange" />
</a-col>
</a-row>
@@ -72,12 +70,15 @@ export default {
// 列的宽度
width: '180px',
// 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
{ key: 'count', title: '数', width: '40px' },
{
key: 'company',
@@ -85,9 +86,12 @@ export default {
// 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
// 如果要做占满表格的列可以这么写
minWidth: '180px',
type: JVXETypes.input
type: JVXETypes.input,
params: {
type: JVXETypes.input
}
},
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
],
// 树的数据,这里模拟分页固定数据,实际情况应该是后台查出来的数据
treeData: [
@@ -214,10 +218,10 @@ export default {
</script>
<style lang="less">
/** 隐藏文件小图标 */
.template-5-tree.ant-tree {
li span.ant-tree-switcher.ant-tree-switcher-noop {
display: none;
}
/** 隐藏文件小图标 */
.template-5-tree.ant-tree {
li span.ant-tree-switcher.ant-tree-switcher-noop {
display: none;
}
}
</style>