<template>
|
<a-card title="弹出子表示例" :bordered="false">
|
<!--
|
【弹出子表大体思路】
|
1. 必须要有 clickRowShowSubForm 属性，如果该属性设为false，那么就不会弹出子表
|
2. 必须要有 subForm 插槽，用于规定弹出子表的内容
|
3. highlightCurrentRow 属性可有可无，如果有则点击一行的时候，该行会背景色会常亮
|
-->
|
<!--
|
【弹出详细信息大体思路】
|
1. 必须要有 clickRowShowMainForm 属性，如果该属性设为false，那么就不会弹出详细信息
|
2. 必须要有 mainForm 插槽，用于规定弹出的内容
|
-->
|
<JVxeTable
|
toolbar
|
rowNumber
|
rowSelection
|
highlightCurrentRow
|
clickRowShowSubForm
|
clickRowShowMainForm
|
:height="750"
|
:loading="loading"
|
:columns="columns"
|
:dataSource="dataSource"
|
@detailsConfirm="handleDetailsConfirm"
|
>
|
<!-- 主表单 -->
|
<template #mainForm="{ row }">
|
<template v-if="row">
|
<a-form ref="form2" :model="row" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
|
<a-row :gutter="8">
|
<a-col :span="8">
|
<a-form-item label="ID" name="id">
|
<a-input v-model:value="row.id" disabled />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="序号" name="num">
|
<a-input v-model:value="row.num" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="船名" name="ship_name">
|
<a-input v-model:value="row.ship_name" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="呼叫" name="call">
|
<a-input v-model:value="row.call" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="长" name="len">
|
<a-input v-model:value="row.len" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="吨" name="ton">
|
<a-input v-model:value="row.ton" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="付款方" name="payer">
|
<a-input v-model:value="row.payer" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="数" name="count">
|
<a-input v-model:value="row.count" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="公司" name="company">
|
<a-input v-model:value="row.company" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label="动向" name="trend">
|
<a-input v-model:value="row.trend" />
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</template>
|
</template>
|
|
<!-- 子表单 -->
|
<template #subForm="{ row }">
|
<template v-if="loadSubData(row)">
|
<JVxeTable
|
ref="subFormTable"
|
height="auto"
|
:max-height="350"
|
:loading="subTable.loading"
|
:columns="subTable.columns"
|
:dataSource="subTable.dataSource"
|
/>
|
</template>
|
</template>
|
</JVxeTable>
|
</a-card>
|
</template>
|
|
<script lang="ts" setup>
|
// 弹出子表示例
|
import { reactive, ref } from 'vue';
|
import { defHttp } from '/@/utils/http/axios';
|
import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
const { createMessage } = useMessage();
|
const loading = ref(false);
|
const dataSource = ref([]);
|
const columns = ref<JVxeColumn[]>([
|
{ key: 'num', title: '序号', width: '80px' },
|
{ key: 'ship_name', title: '船名', width: '180px', type: JVxeTypes.input },
|
{ key: 'call', title: '呼叫', width: '80px' },
|
{ key: 'len', title: '长', width: '80px' },
|
{ key: 'ton', title: '吨', width: '120px' },
|
{ key: 'payer', title: '付款方', width: '120px' },
|
{ key: 'count', title: '数', width: '40px' },
|
{
|
key: 'company',
|
title: '公司',
|
minWidth: '180px',
|
// 是否点击显示详细信息
|
// 只有当前单元格不能编辑的时候才能生效
|
// 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
|
showDetails: true,
|
},
|
{ key: 'trend', title: '动向', width: '120px' },
|
]);
|
const selectedRows = ref([]);
|
// 子表的信息
|
const subTable = reactive({
|
currentRowId: null,
|
loading: false,
|
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
selectedRows: [],
|
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 },
|
] as JVxeColumn[],
|
});
|
|
// form表单 col
|
const labelCol = reactive({ span: 4 });
|
const wrapperCol = reactive({ span: 20 });
|
const rules = reactive({
|
num: [{ required: true, message: '必须输入序号' }],
|
});
|
|
// 查询url地址
|
enum Api {
|
getData = '/mock/vxe/getData',
|
}
|
|
loadData();
|
|
// 加载数据
|
function loadData() {
|
// 封装查询条件
|
// 调用查询数据接口
|
loading.value = true;
|
defHttp
|
.get({
|
url: Api.getData,
|
params: {
|
pageNo: 1,
|
pageSize: 30,
|
},
|
})
|
.then((result) => {
|
// 将查询的数据赋值给 dataSource
|
dataSource.value = result.records;
|
// 重置选择
|
selectedRows.value = [];
|
})
|
.finally(() => {
|
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
loading.value = false;
|
});
|
}
|
|
// 查询子表数据
|
function loadSubData(row) {
|
if (row) {
|
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
if (subTable.currentRowId === row.id) {
|
return true;
|
}
|
subTable.currentRowId = row.id;
|
subTable.loading = true;
|
defHttp
|
.get({
|
url: Api.getData,
|
params: {
|
pageNo: 1,
|
pageSize: 30,
|
parentId: row.id,
|
},
|
})
|
.then((result) => {
|
// 将查询的数据赋值给 dataSource
|
subTable.dataSource = result.records;
|
})
|
.finally(() => {
|
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
subTable.loading = false;
|
});
|
return true;
|
} else {
|
return false;
|
}
|
}
|
|
// 详细信息里点了确认按钮
|
function handleDetailsConfirm({ row, $table, callback }) {
|
console.log('保存的数据：', row);
|
// 校验当前行
|
$table.validate(row).then((errMap) => {
|
// 校验通过
|
if (!errMap) {
|
// 校验子表，如果需要的话，可以操作下面这个对象：
|
callback(true);
|
loading.value = true;
|
setTimeout(() => {
|
loading.value = false;
|
createMessage.success('保存成功');
|
}, 1000);
|
} else {
|
callback(false);
|
createMessage.warn('校验失败');
|
}
|
});
|
}
|
</script>
|
|
<style scoped></style>
|
