Skip to content

W
web-project
Commit f6ad7344 authored by mengzixuan's avatar mengzixuan
Browse files
Options

feat: 工程

parent 36521624
Show whitespace changes
Inline Side-by-side
Showing with 958 additions and 66 deletions
src/views/engineeringProject/data.tsx
View file @ f6ad7344
......@@ -125,53 +125,208 @@ export const searchFormSchema: FormSchema[] = [
},
];
export const formSchema: FormSchema[] = [
export const formSchema: ({ colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { valueFormat: string; format: string; style: { width: string }; placeholder: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { options: ({ label: string; value: string } | { label: string; value: string } | { label: string; value: string })[] }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; icon: string; componentProps: { style: { width: string }; placeholder: string[] }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { options: ({ label: string; value: string } | { label: string; value: string } | { label: string; value: string })[] }; label: string; required: boolean })[] = [
{
field: 'projectName',
label: '项目名称',
required: true,
component: 'Input',
componentProps: {
readonly: true,
style: { border: 'none' },
},
colProps: { span: 7, offset: 1 },
},
{
field: 'constructionSite',
label: '建设地点',
required: true,
component: 'Input',
componentProps: {
placeholder: 'XXXX项目',
disabled: true,
style: {
background: 'none',
border: 'none',
readonly: true,
style: { border: 'none' },
},
colProps: { span: 7, offset: 1 },
},
{
field: 'constructionMode',
label: '建设模式',
required: true,
component: 'Input',
componentProps: {
readonly: true,
style: { border: 'none' },
},
colProps: { span: 8 },
colProps: { span: 7, offset: 1 },
},
{
field: 'projectName',
label: '建设地点',
field: 'projectType',
label: '项目类型',
required: true,
component: 'Input',
componentProps: {
readonly: true,
style: { border: 'none' },
},
colProps: { span: 7, offset: 1 },
},
{
field: 'constructionScale',
label: '建设规模',
required: true,
component: 'Input',
componentProps: {
placeholder: '华苑片区',
disabled: true,
style: {
background: 'none',
border: 'none',
readonly: true,
style: { border: 'none' },
},
colProps: { span: 7, offset: 1 },
},
{
field: 'projectOverview',
label: '项目概况:',
required: true,
component: 'Input',
componentProps: {
readonly: true,
style: { border: 'none' },
},
colProps: { span: 8 },
colProps: { span: 7, offset: 1 },
},
{
field: 'projectName',
label: '建设模式',
field: 'fundingSource',
label: '资金来源:',
required: true,
component: 'Input',
componentProps: {
readonly: true,
style: { border: 'none' },
},
colProps: { span: 7, offset: 1 },
},
{
field: 'implementingEntity',
label: '实施主体:',
required: true,
component: 'Input',
componentProps: {
placeholder: '自建',
disabled: true,
style: {
background: 'none',
border: 'none',
readonly: true,
style: { border: 'none' },
},
colProps: { span: 7, offset: 1 },
},
{
field: 'projectOverview',
label: '项目概况:',
required: true,
component: 'Input',
componentProps: {
readonly: true,
style: { border: 'none' },
},
colProps: { span: 8 },
colProps: { span: 7, offset: 1 },
},
// {
// field: 'data',
// label: '填报周期:',
// required: true,
// component: 'DatePicker',
// componentProps: {
// placeholder: '选择填报周期',
// style: { width: '100%' },
// valueFormat: 'YYYY-MM-DD',
// format: 'YYYY-MM-DD',
// },
// colProps: { span: 7, offset: 1 },
// },
// {
// field: 'investmentAmount',
// label: '总投资',
// required: true,
// component: 'Input',
// componentProps: {
// addonAfter: '万元',
// },
// colProps: { span: 7, offset: 1 },
// },
// {
// field: 'investmentAmount',
// label: '项目主管部门',
// required: true,
// component: 'Input',
// colProps: { span: 7, offset: 1 },
// },
//
// {
// field: 'investmentAmount',
// label: '2024年财政预算匹配资金',
// required: true,
// component: 'Input',
// componentProps: {
// addonAfter: '万元',
// },
// colProps: { span: 7, offset: 1 },
// },
// {
// field: 'investmentAmount',
// label: '其中专项债项目2024年预计使用专项债资金',
// required: true,
// component: 'Input',
// componentProps: {
// addonAfter: '万元',
// },
// colProps: { span: 7, offset: 1 },
// },
// {
// field: 'investmentAmount',
// label: '2024年计划资金',
// required: true,
// component: 'Input',
// componentProps: {
// addonAfter: '万元',
// },
// colProps: { span: 7, offset: 1 },
// },
// {
// field: 'investmentAmount',
// label: '建设性质',
// required: true,
// component: 'Select',
// componentProps: {
// options: [
// { label: '新建', value: '0' },
// { label: '结转', value: '1' },
// { label: '缓建', value: '2' },
// ],
// },
// colProps: { span: 7, offset: 1 },
// },
// {
// component: 'RangePicker',
// label: '开竣工时间',
// required: true,
// icon: 'healthicons:i-schedule-school-date-time-outline',
// field: '',
// colProps: { span: 7, offset: 1 },
// componentProps: {
// placeholder: ['开始日期', '结束日期'],
// style: { width: '100%' },
// },
// },
// {
// field: 'investmentAmount',
// label: '2024年底预计形象进度',
// required: true,
// component: 'Select',
// componentProps: {
// options: [
// { label: 'A(已经立项实施的跨年工程)', value: '0' },
// { label: 'B(该年度必须建设的项目)', value: '1' },
// { label: 'B(该年度必须建设的项目)', value: '2' },
// ],
// },
// colProps: { span: 7, offset: 1 },
// },
// {
// field: 'isReserveProject',
// label: '是否为储备项目',
// component: 'RadioButtonGroup',
......
src/views/engineeringProject/engineeringEdit.vue
View file @ f6ad7344
<template>
<div>
<PageWrapper :title="getTitle" :contentBackground="false" headerSticky>
<template #extra>
<a-button type="primary" danger @click="delect"> 删除 </a-button>
<a-button type="primary" danger> 删除 </a-button>
<a-button type="primary" @click="handleSubmit"> 提交 </a-button>
</template>
<PageCard v-for="(item, index) in tabsFormSchema" :key="index" :title="item.name">
<BasicForm @register="item.Form[0]" />
<template #right>
<a-button
type="text"
preIcon="ant-design:delete-outlined"
danger
@click="deleteItem(index)"
/>
</template>
<BasicForm :loading="loading" @register="item.Form[0]" />
<div style="width: 500px">
{{ 'tableRefIndex' + index }}
<BasicTable :ref="'tableRefIndex'" @register="item.table" :beforeEditSubmit="beforeEditSubmit(index)" />
</div>
</PageCard>
<a-button type="primary" @click="addItem"> 添加 </a-button>
<a-button type="dashed" @click="add" preIcon="ei:plus"> 从项目库导入 </a-button>
<a-button type="dashed" @click="handleAdd" class="ml-2" preIcon="ei:plus"> 新建项目 </a-button>
<projectDrawer @register="registerDrawer" @success="handleSuccess" />
<projectlibraryModel @register="register" @close="handleNewData" />
</PageWrapper>
<projectlibraryModel @register="register" @close="handleNew" />
</div>
</template>
<script lang="ts" setup>
import projectlibraryModel from '@/components/projectlibraryModel/projectlibraryModel.vue';
const [register, { openModal: openModal }] = useModal();
import { unref, computed, onMounted, ref, reactive } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns } from './tableData';
import { ref, nextTick, onMounted, unref, computed, reactive } from 'vue';
import { demoListApi } from '@/api/demo/table';
import projectlibraryModel from '@/components/projectlibraryModel/projectlibraryModel.vue';
import { useRoute } from 'vue-router';
import { PageWrapper } from '@/components/Page';
import PageCard from '@/components/Page/src/PageCard.vue';
import projectDrawer from '@/views/project/projectDrawer.vue';
import { BasicForm, useForm, FormProps, UseFormReturnType } from '@/components/Form';
import { formSchema } from './data';
import {useModal} from "@/components/Modal";
import {router} from "@/router";
import { deepMerge } from '@/utils';
import { useMessage } from '@/hooks/web/useMessage';
import { useDrawer } from '@/components/Drawer';
import { addItem, updateItem, getItem } from '@/api/project/biddingPlan';
import { editModel } from '@/api/project/model/biddingPlanModel';
import { useModal } from '@/components/Modal';
const getTitle = computed(() => (!unref(isUpdate) ? '新增2024年工程项目投资计划（工程）' : '编辑2024年工程项目投资计划（工程）'));
let show = ref<Recordable[]>([]);
// function handleSummary(tableData: Recordable[]) {
// const totalNo = tableData.reduce((prev, next) => {
// prev += next.no;
// return prev;
// }, 0);
// return [
// {
// _row: '合计',
// _index: '平均值',
// no: totalNo,
// },
// {
// _row: '合计',
// _index: '平均值',
// no: totalNo,
// },
// ];
// }
function beforeEditSubmit(index) {
// const tableRefIndex = ref<HTMLElement>([]);
// const setBoxRef = (el: any) => {
// if (el) {
// tableRefIndex.value.push(el);
// }
// };
// console.log('ref节点', setBoxRef);
// let res = getDataSource();
// console.log('res', res);
// console.log('show', show);
// const totalNo = res.reduce((prev, next) => {
// prev += Number(next.no);
// return prev;
// }, 0);
// console.log('totalNo', totalNo);
// show.value = [
// {
// year: '合计',
// // _row: '合计',
// // _index: '合计',
// no: totalNo,
// },
// ];
// return true;
}
// const [registerTable, { getDataSource, setTableData }] = useTable({
// title: '表尾行合计示例',
// // api: demoListApi,
// // rowSelection: { type: 'checkbox' },
// columns: getBasicColumns(),
// showSummary: true,
// summaryData: show,
// maxHeight: 180,
// maxWidth: 200,
// showIndexColumn: false,
// pagination: false,
// // scroll: { x: 2000 },
// // canResize: false,
// // showSelectionBar: true, // 显示多选状态栏
// });
onMounted(async () => {
show.value = [
{
year: '合计',
// _row: '合计',
// _index: '合计',
no: '-',
},
];
// setTableData([
// {
// year: '2022',
// no: '',
// },
// {
// year: '2023',
// no: '',
// },
// {
// year: '2024',
// no: '',
// },
// ]);
});
const [registerDrawer, { openDrawer }] = useDrawer();
const [register, { openModal: openModal }] = useModal();
const { createMessage } = useMessage();
const getTitle = computed(() =>
!unref(isUpdate) ? '新增工程项目投资计划（工程）' : '编辑工程项目投资计划（工程）',
);
const isUpdate = ref(false);
onMounted(() => {
const loading = ref(false);
const formData = ref<editModel>({});
onMounted(async () => {
const route = useRoute();
const id = route.query.id; // 获取名为id的参数
console.log(route.query);
if (!id) {
formData.value.biddingQuarter = route.query.quarter;
formData.value.tenderYear = route.query.year;
formData.value.tenderPlanPro = [];
isUpdate.value = false;
console.log(formData);
} else {
isUpdate.value = true;
let res = await getItem({ id });
formData.value.biddingQuarter = res.data.quarter;
formData.value.tenderYear = res.data.year;
for (let i = 0; i < res.data.tenderPlanPro.length; i++) {
const item = {
name: '序号' + (i + 1),
forceRender: true,
Form: useForm(Object.assign({ schemas: formSchema }, baseFormConfig) as FormProps),
table: useTable({
title: '表尾行合计示例',
// api: demoListApi,
// rowSelection: { type: 'checkbox' },
columns: getBasicColumns(),
showSummary: true,
summaryData: show,
maxHeight: 180,
maxWidth: 200,
showIndexColumn: false,
pagination: false,
// scroll: { x: 2000 },
// canResize: false,
// showSelectionBar: true, // 显示多选状态栏
}),
};
const { setFieldsValue } = item.Form[1];
tabsFormSchema.push(item);
formData.value.tenderPlanPro.push({
proId: info.id,
});
nextTick(() => {
setFieldsValue({
projectName: info.projectName,
constructionSite: info.constructionSite,
constructionMode: info.constructionMode,
projectType: info.projectType,
constructionScale: info.constructionScale,
projectOverview: info.projectOverview,
fundingSource: info.fundingSource,
implementingEntity: info.implementingEntity,
});
});
}
console.log(res);
}
});
type TabsFormType = {
name: string;
forceRender?: boolean;
Form: UseFormReturnType;
table: any;
};
const baseFormConfig: Partial<FormProps> = {
showActionButtonGroup: false,
......@@ -47,24 +214,116 @@
const tabsFormSchema = reactive<TabsFormType[]>([]);
async function addItem() {
tabsFormSchema.push({
async function add() {
openModal();
}
async function handleNewData(info: any) {
if (info) {
info.map((i) => {
handleNew(i);
});
}
}
/***
*
*/
async function handleNew(info: any) {
const item = {
name: '序号' + (tabsFormSchema.length + 1),
forceRender: true,
Form: useForm(Object.assign({ schemas: formSchema }, baseFormConfig) as FormProps),
table: useTable({
title: '表尾行合计示例',
// api: demoListApi,
// rowSelection: { type: 'checkbox' },
columns: getBasicColumns(),
showSummary: true,
summaryData: show,
maxHeight: 180,
maxWidth: 200,
showIndexColumn: false,
pagination: false,
// scroll: { x: 2000 },
// canResize: false,
// showSelectionBar: true, // 显示多选状态栏
}),
};
const { setTableData } = item.table[1];
// console.log('item.table',setTableData)
const { setFieldsValue } = item.Form[1];
tabsFormSchema.push(item);
formData.value.tenderPlanPro.push({
proId: info.id,
});
nextTick(() => {
setTableData([
{
year: '2022',
no: '',
},
{
year: '2023',
no: '',
},
{
year: '2024',
no: '',
},
]);
setFieldsValue({
projectName: info.projectName,
constructionSite: info.constructionSite,
constructionMode: info.constructionMode,
projectType: info.projectType,
constructionScale: info.constructionScale,
projectOverview: info.projectOverview,
fundingSource: info.fundingSource,
implementingEntity: info.implementingEntity,
});
});
}
async function delect() {
openModal(true, {
// data: ['year'],
async function deleteItem(index: any) {
tabsFormSchema.splice(index, 1);
formData.value.tenderPlanPro.splice(index, 1);
}
async function handleAdd() {
openDrawer(true, {
isUpdate: false,
});
}
const handleNew = (e) => {
console.log('e', e);
};
async function handleSuccess(params: any) {
console.log(params);
handleNew(params);
}
async function handleSubmit() {
console.log('tabsFormSchema', tabsFormSchema);
loading.value = true;
try {
for (let i = 0; i < tabsFormSchema.length; i++) {
let item = tabsFormSchema[i];
const { validate, getFieldsValue } = item.Form[1];
await validate();
let res = getFieldsValue();
console.log(' getFieldsValue()', getFieldsValue());
// res.biddingPeriod = res.biddingPeriod.join(',');
// res.plannedPeriod = res.plannedPeriod.join(',');
formData.value.tenderPlanPro[i] = deepMerge(formData.value.tenderPlanPro[i], res);
console.log(formData.value.tenderPlanPro);
}
formData.value.proNumber = formData.value.tenderPlanPro.Length;
console.log(' formData()', formData);
console.log(' setTableData()', setTableData);
let res = isUpdate.value ? await updateItem(unref(formData)) : await addItem(unref(formData));
loading.value = false;
console.log(res);
createMessage.success('提交成功!');
} catch (e) {
// 验证失败或出错，切换到对应标签页
console.log(e);
} finally {
loading.value = false;
}
}
</script>
<style lang="less" scoped>
// .vben-page-wrapper-content-bg {
// background-color: transparent;
// }
</style>
src/views/engineeringProject/index.vue
View file @ f6ad7344
......@@ -16,11 +16,13 @@
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '修改',
// icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
// icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
......@@ -68,7 +70,7 @@
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 80,
width: 160,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
......@@ -77,9 +79,15 @@
});
function handleEdit(record: Recordable) {
openDrawer(true, {
record,
isUpdate: true,
// openDrawer(true, {
// record,
// isUpdate: true,
// });
router.push({
path: '/engineeringProject/edit',
query: {
id: record.id,
},
});
}
......
src/views/engineeringProject/tableData.tsx 0 → 100644
View file @ f6ad7344
import { optionsListApi } from '@/api/demo/select';
import { FormProps, FormSchema, BasicColumn } from '@/components/Table';
import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';
import { ref } from 'vue';
import { Input } from 'ant-design-vue';
export function getBasicColumns(): BasicColumn[] {
return [
// {
// title: 'ID',
// dataIndex: 'id',
// fixed: 'left',
// width: 200,
// },
// {
// title: '姓名',
// dataIndex: 'name',
// width: 150,
// filters: [
// { text: 'Male', value: 'male' },
// { text: 'Female', value: 'female' },
// ],
// },
// {
// title: '地址',
// dataIndex: 'address',
// },
{
title: '年份',
dataIndex: 'year',
width: 80,
},
{
title: '金额(万元)',
dataIndex: 'no',
width: 150,
// sorter: true,
// defaultHidden: true,
edit: true,
},
// {
// title: '开始时间',
// width: 150,
// sorter: true,
// dataIndex: 'beginTime',
// },
// {
// title: '结束时间',
// width: 150,
// sorter: true,
// dataIndex: 'endTime',
// },
];
}
export function getBasicShortColumns(): BasicColumn[] {
return [
{
title: 'ID',
width: 150,
dataIndex: 'id',
sorter: true,
sortOrder: 'ascend',
},
{
title: '姓名',
dataIndex: 'name',
width: 120,
},
{
title: '地址',
dataIndex: 'address',
},
{
title: '编号',
dataIndex: 'no',
width: 80,
},
];
}
export function getMultipleHeaderColumns(): BasicColumn[] {
const testRef = ref('姓名:');
return [
{
title: 'ID',
dataIndex: 'id',
width: 200,
},
{
title: '姓名',
customHeaderRender() {
return (
<Input placeholder="输入值 更新 自定义title" size="small" v-model:value={testRef.value} />
);
},
dataIndex: 'name',
width: 120,
},
{
title: '地址',
dataIndex: 'address',
sorter: true,
children: [
{
title: '编号',
customHeaderRender(column) {
// 【自定义渲染的】
return (
<div>
_ <span style="background: #f00; color: #fff;">{testRef.value}</span> _
{column.customTitle}
</div>
);
},
dataIndex: 'no',
width: 120,
filters: [
{ text: 'Male', value: 'male', children: [] },
{ text: 'Female', value: 'female', children: [] },
],
},
{
title: '开始时间',
dataIndex: 'beginTime',
width: 120,
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 120,
},
],
},
];
}
export function getCustomHeaderColumns(): BasicColumn[] {
return [
{
title: 'ID',
dataIndex: 'id',
helpMessage: 'headerHelpMessage方式1',
width: 200,
},
{
// title: '姓名',
dataIndex: 'name',
width: 120,
},
{
// title: '地址',
dataIndex: 'address',
width: 120,
sorter: true,
},
{
title: '编号',
dataIndex: 'no',
width: 120,
filters: [
{ text: 'Male', value: 'male', children: [] },
{ text: 'Female', value: 'female', children: [] },
],
},
{
title: '开始时间',
dataIndex: 'beginTime',
width: 120,
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 120,
},
];
}
const cellContent = (_, index) => ({
colSpan: index === 9 ? 0 : 1,
});
export function getMergeHeaderColumns(): BasicColumn[] {
return [
{
title: 'ID',
dataIndex: 'id',
width: 300,
customCell: (_, index) => ({
colSpan: index === 9 ? 6 : 1,
}),
},
{
title: '姓名',
dataIndex: 'name',
width: 300,
customCell: cellContent,
},
{
title: '地址',
dataIndex: 'address',
colSpan: 2,
width: 120,
sorter: true,
customCell: (_, index) => ({
rowSpan: index === 2 ? 2 : 1,
colSpan: index === 3 || index === 9 ? 0 : 1,
}),
},
{
title: '编号',
dataIndex: 'no',
colSpan: 0,
filters: [
{ text: 'Male', value: 'male', children: [] },
{ text: 'Female', value: 'female', children: [] },
],
customCell: cellContent,
},
{
title: '开始时间',
dataIndex: 'beginTime',
width: 200,
customCell: cellContent,
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 200,
customCell: cellContent,
},
];
}
export const getAdvanceSchema = (itemNumber = 6): FormSchema[] => {
const arr: FormSchema[] = [];
for (let index = 0; index < itemNumber; index++) {
arr.push({
field: `field${index}`,
label: `字段${index}`,
component: 'Input',
colProps: {
xl: 12,
xxl: 8,
},
});
}
return arr;
};
export function getFormConfig(): Partial<FormProps> {
return {
labelWidth: 100,
schemas: [
...getAdvanceSchema(5),
{
field: `field11`,
label: `Slot示例`,
slot: 'custom',
colProps: {
xl: 12,
xxl: 8,
},
},
],
};
}
export function getBasicData() {
return (() => {
const arr: any = [];
for (let index = 0; index < 40; index++) {
arr.push({
id: `${index}`,
name: 'John Brown',
age: `1${index}`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
});
}
return arr;
})();
}
export function getTreeTableData() {
return (() => {
const arr: any = [];
for (let index = 0; index < 40; index++) {
arr.push({
id: `${index}`,
name: 'John Brown',
age: `1${index}`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
children: [
{
id: `l2-${index}-1`,
name: 'John Brown',
age: `1`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
children: [
{
id: `l3-${index}-1-1`,
name: 'John Brown',
age: `11`,
no: `11`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
},
{
id: `l3-${index}-1-2`,
name: 'John Brown',
age: `12`,
no: `12`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
},
],
},
{
id: `l2-${index}-2`,
name: 'John Brown',
age: `2`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
children: [
{
id: `l3-${index}-2-1`,
name: 'John Brown',
age: `21`,
no: `21`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
},
{
id: `l3-${index}-2-2`,
name: 'John Brown',
age: `22`,
no: `22`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
},
],
},
],
});
}
return arr;
})();
}
export const vxeTableColumns: VxeGridPropTypes.Columns = [
{
title: '序号',
type: 'seq',
fixed: 'left',
width: '50',
align: 'center',
},
{
title: '固定列',
field: 'name',
width: 150,
showOverflow: 'tooltip',
fixed: 'left',
},
{
title: '自适应列',
field: 'address',
},
{
title: '自定义列(自定义导出)',
field: 'no',
width: 200,
showOverflow: 'tooltip',
align: 'center',
slots: {
default: ({ row }) => {
const text = `自定义${row.no}`;
return [<div class="text-red-500">{text}</div>];
},
},
exportMethod: ({ row }) => {
return `自定义${row.no}导出`;
},
},
{
title: '自定义编辑',
width: 150,
field: 'name1',
align: 'center',
editRender: {
name: 'AInput',
placeholder: '请点击输入',
},
},
{
title: '开始时间',
width: 150,
field: 'beginTime',
showOverflow: 'tooltip',
align: 'center',
},
{
title: '结束时间',
width: 150,
field: 'endTime',
showOverflow: 'tooltip',
align: 'center',
},
{
width: 160,
title: '操作',
align: 'center',
slots: { default: 'action' },
fixed: 'right',
},
];
export const vxeTableFormSchema: VxeFormItemProps[] = [
{
field: 'field0',
title: 'field0',
itemRender: {
name: 'AInput',
},
span: 6,
},
{
field: 'field1',
title: 'field1',
itemRender: {
name: 'AApiSelect',
props: {
api: optionsListApi,
resultField: 'list',
labelField: 'name',
valueField: 'id',
},
},
span: 6,
},
{
span: 12,
align: 'right',
className: '!pr-0',
itemRender: {
name: 'AButtonGroup',
children: [
{
props: { type: 'primary', content: '查询', htmlType: 'submit' },
attrs: { class: 'mr-2' },
},
{ props: { type: 'default', htmlType: 'reset', content: '重置' } },
],
},
},
];
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment