【fix bug】66425【前端】升级vxe-table组件到3.6.10版本,并同步适配当前框架中所有使用到vxe-table组件的示例
This commit is contained in:
@@ -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: {
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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: [],
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user