517 lines
15 KiB
Vue
517 lines
15 KiB
Vue
<!--
|
||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||
* No deletion without permission, or be held responsible to law.
|
||
* @author ThinkGem
|
||
-->
|
||
<template>
|
||
<BasicDrawer
|
||
v-bind="$attrs"
|
||
:showFooter="true"
|
||
:okAuth="'test:testData:edit'"
|
||
@register="registerDrawer"
|
||
@ok="handleSubmit"
|
||
width="70%"
|
||
>
|
||
<template #title>
|
||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||
<span> {{ getTitle.value }} </span>
|
||
</template>
|
||
<Tabs v-model:activeKey="activeKey" tabPosition="left">
|
||
<Tabs.TabPane key="1" :forceRender="true" tab="基本信息">
|
||
<BasicForm @register="registerForm1">
|
||
<template #remarks="{ model, field }">
|
||
<WangEditor
|
||
v-model:value="model[field]"
|
||
:bizKey="record.id"
|
||
:bizType="'testDataChild_' + field"
|
||
:height="300"
|
||
/>
|
||
</template>
|
||
</BasicForm>
|
||
</Tabs.TabPane>
|
||
<Tabs.TabPane key="2" :forceRender="true" tab="详细信息">
|
||
<BasicForm @register="registerForm2">
|
||
<template #testDataChildList>
|
||
<BasicTable @register="registerTestDataChildTable" @row-click="handleTestDataChildRowClick">
|
||
<template #testDataChildUpload="{ record: childRecord }">
|
||
<BasicUpload
|
||
v-model:value="childRecord.dataMap"
|
||
:bizKey="childRecord.id"
|
||
:bizType="'testDataChild_file'"
|
||
:uploadType="'all'"
|
||
:loadTime="record.__t"
|
||
:size="'small'"
|
||
/>
|
||
</template>
|
||
</BasicTable>
|
||
<a-button class="mt-2" @click="handleTestDataChildAdd" v-auth="'test:testData:edit'">
|
||
<Icon icon="i-ant-design:plus-circle-outlined" /> {{ t('新增') }}
|
||
</a-button>
|
||
</template>
|
||
</BasicForm>
|
||
</Tabs.TabPane>
|
||
</Tabs>
|
||
</BasicDrawer>
|
||
</template>
|
||
<script lang="ts" setup name="ViewsTestTestDataForm">
|
||
import { ref, unref, computed, h } from 'vue';
|
||
import { Tabs } from 'ant-design-vue';
|
||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||
import { router } from '@jeesite/core/router';
|
||
import { Icon } from '@jeesite/core/components/Icon';
|
||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||
import { BasicTable, useTable } from '@jeesite/core/components/Table';
|
||
import { BasicDrawer, useDrawerInner } from '@jeesite/core/components/Drawer';
|
||
import { TestData, testDataSave, testDataForm } from '@jeesite/test/api/test/testData';
|
||
import { TestDataChild } from '@jeesite/test/api/test/testDataChild';
|
||
import { officeTreeData } from '@jeesite/core/api/sys/office';
|
||
import { areaTreeData } from '@jeesite/core/api/sys/area';
|
||
import { BasicUpload } from '@jeesite/core/components/Upload';
|
||
import { WangEditor } from '@jeesite/core/components/WangEditor';
|
||
|
||
const emit = defineEmits(['success', 'register']);
|
||
|
||
const { t } = useI18n('test.testData');
|
||
const { showMessage } = useMessage();
|
||
const { meta } = unref(router.currentRoute);
|
||
const record = ref<TestData>({} as TestData);
|
||
|
||
const getTitle = computed(() => ({
|
||
icon: meta.icon || 'ant-design:book-outlined',
|
||
value: record.value.isNewRecord ? t('新增数据') : t('编辑数据'),
|
||
}));
|
||
|
||
const activeKey = ref<string>('1');
|
||
|
||
const inputFormSchemas1: FormSchema<TestData>[] = [
|
||
{
|
||
label: t('单行文本'),
|
||
field: 'testInput',
|
||
component: 'Input',
|
||
componentProps: {
|
||
maxlength: 200,
|
||
},
|
||
required: true,
|
||
},
|
||
{
|
||
field: 'testInputHelpMessage',
|
||
component: 'Text',
|
||
render: () => h('div', { class: 'ml-4 text-gray-500' }, '这是栅格帮助信息，优点是可以对齐。'),
|
||
},
|
||
{
|
||
label: t('多行文本'),
|
||
field: 'testTextarea',
|
||
component: 'InputTextArea',
|
||
componentProps: {
|
||
maxlength: 200,
|
||
},
|
||
suffix: h('div', { class: 'ml-4 text-gray-500' }, 'Suffix帮助信息，优点是自由嵌入组件后。'),
|
||
rules: [{ required: true }],
|
||
colProps: { md: 24, lg: 24 },
|
||
},
|
||
{
|
||
label: t('下拉框'),
|
||
field: 'testSelect',
|
||
component: 'Select',
|
||
componentProps: {
|
||
dictType: 'sys_menu_type',
|
||
allowClear: true,
|
||
},
|
||
},
|
||
{
|
||
label: t('下拉多选'),
|
||
field: 'testSelectMultiple',
|
||
component: 'Select',
|
||
componentProps: {
|
||
dictType: 'sys_menu_type',
|
||
allowClear: true,
|
||
mode: 'multiple',
|
||
},
|
||
},
|
||
{
|
||
label: t('单选框'),
|
||
field: 'testRadio',
|
||
component: 'RadioGroup',
|
||
componentProps: {
|
||
dictType: 'sys_menu_type',
|
||
},
|
||
},
|
||
{
|
||
label: t('复选框'),
|
||
field: 'testCheckbox',
|
||
component: 'CheckboxGroup',
|
||
componentProps: {
|
||
dictType: 'sys_menu_type',
|
||
},
|
||
},
|
||
{
|
||
label: t('日期选择'),
|
||
field: 'testDate',
|
||
component: 'DatePicker',
|
||
componentProps: {
|
||
format: 'YYYY-MM-DD',
|
||
showTime: false,
|
||
},
|
||
},
|
||
{
|
||
label: t('日期时间'),
|
||
field: 'testDatetime',
|
||
component: 'DatePicker',
|
||
componentProps: {
|
||
format: 'YYYY-MM-DD HH:mm',
|
||
showTime: { format: 'HH:mm' },
|
||
},
|
||
},
|
||
{
|
||
label: t('用户选择'),
|
||
field: 'testUser.userCode',
|
||
fieldLabel: 'testUser.userName',
|
||
component: 'TreeSelect',
|
||
componentProps: {
|
||
api: officeTreeData,
|
||
params: { isLoadUser: true, userIdPrefix: '' },
|
||
canSelectParent: false,
|
||
allowClear: true,
|
||
},
|
||
},
|
||
{
|
||
label: t('用户列表选择'),
|
||
field: 'testUser.userCode',
|
||
component: 'ListSelect',
|
||
componentProps: {
|
||
selectType: 'empUserSelect',
|
||
},
|
||
},
|
||
{
|
||
label: t('机构选择'),
|
||
field: 'testOffice.officeCode',
|
||
fieldLabel: 'testOffice.officeName',
|
||
component: 'TreeSelect',
|
||
componentProps: {
|
||
api: officeTreeData,
|
||
allowClear: true,
|
||
},
|
||
},
|
||
{
|
||
label: t('区域选择'),
|
||
field: 'testAreaCode',
|
||
fieldLabel: 'testAreaName',
|
||
component: 'TreeSelect',
|
||
componentProps: {
|
||
api: areaTreeData,
|
||
allowClear: true,
|
||
},
|
||
},
|
||
{
|
||
label: t('备注信息'),
|
||
field: 'remarks',
|
||
component: 'InputTextArea',
|
||
componentProps: {
|
||
maxlength: 500,
|
||
},
|
||
slot: 'remarks',
|
||
colProps: { md: 24, lg: 24 },
|
||
},
|
||
];
|
||
const inputFormSchemas2: FormSchema<TestData>[] = [
|
||
{
|
||
label: t('图片上传'),
|
||
field: 'dataMap',
|
||
component: 'Upload',
|
||
componentProps: {
|
||
loadTime: computed(() => record.value.__t),
|
||
bizKey: computed(() => record.value.id),
|
||
bizType: 'testData_image',
|
||
uploadType: 'image',
|
||
},
|
||
suffix: [
|
||
h('div', { class: 'ml-4 text-gray-500' }, '请上传图片格式，文件小于 5 M。'),
|
||
h('a', { href: 'https://jeesite.com', target: '_blank', class: 'mr-8' }, '查看模板'),
|
||
],
|
||
colProps: { md: 24, lg: 24 },
|
||
},
|
||
{
|
||
label: t('文件上传'),
|
||
field: 'dataMap',
|
||
component: 'Upload',
|
||
componentProps: {
|
||
loadTime: computed(() => record.value.__t),
|
||
bizKey: computed(() => record.value.id),
|
||
bizType: 'testData_file',
|
||
uploadType: 'all',
|
||
},
|
||
suffix: [
|
||
h('div', { class: 'ml-4 text-gray-500' }, '请上传文档格式，文件小于 5 M。'),
|
||
h('a', { href: 'https://jeesite.com', target: '_blank', class: 'mr-8' }, '查看模板'),
|
||
],
|
||
colProps: { md: 24, lg: 24 },
|
||
},
|
||
{
|
||
label: t('子表数据'),
|
||
field: 'testDataChildList',
|
||
component: 'Input',
|
||
colProps: { md: 24, lg: 24 },
|
||
slot: 'testDataChildList',
|
||
},
|
||
];
|
||
|
||
const [registerForm1, formAction1] = useForm<TestData>({
|
||
labelWidth: 120,
|
||
schemas: inputFormSchemas1,
|
||
baseColProps: { md: 24, lg: 12 },
|
||
});
|
||
|
||
const [registerForm2, formAction2] = useForm<TestData>({
|
||
labelWidth: 120,
|
||
schemas: inputFormSchemas2,
|
||
baseColProps: { md: 24, lg: 12 },
|
||
});
|
||
|
||
async function resetFields() {
|
||
activeKey.value = '1';
|
||
await formAction1.resetFields();
|
||
await formAction2.resetFields();
|
||
}
|
||
|
||
async function setFieldsValue(values: Recordable) {
|
||
await formAction1.setFieldsValue(values);
|
||
await formAction2.setFieldsValue(values);
|
||
}
|
||
|
||
async function validate(): Promise<Recordable> {
|
||
return Object.assign(await formAction1.validate(), await formAction2.validate());
|
||
}
|
||
|
||
const [registerTestDataChildTable, testDataChildTable] = useTable<TestDataChild>({
|
||
actionColumn: {
|
||
width: 60,
|
||
actions: (record: Recordable) => [
|
||
{
|
||
icon: 'i-ant-design:delete-outlined',
|
||
color: 'error',
|
||
popConfirm: {
|
||
title: t('是否确认删除'),
|
||
confirm: handleTestDataChildDelete.bind(this, record),
|
||
},
|
||
auth: 'test:testData:edit',
|
||
},
|
||
],
|
||
},
|
||
rowKey: 'id',
|
||
pagination: false,
|
||
bordered: true,
|
||
size: 'small',
|
||
inset: true,
|
||
scroll: { x: 1000 },
|
||
});
|
||
|
||
function setTestDataChildTableData(_res: Recordable) {
|
||
testDataChildTable.setColumns([
|
||
{
|
||
title: t('单行文本'),
|
||
dataIndex: 'testInput',
|
||
width: 130,
|
||
align: 'left',
|
||
editRow: true,
|
||
editComponent: 'Input',
|
||
editRule: true,
|
||
},
|
||
{
|
||
title: t('多行文本'),
|
||
dataIndex: 'testTextarea',
|
||
width: 130,
|
||
align: 'left',
|
||
editRow: true,
|
||
editComponent: 'Input',
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('下拉框'),
|
||
dataIndex: 'testSelect',
|
||
width: 130,
|
||
align: 'left',
|
||
dictType: 'sys_menu_type',
|
||
editRow: true,
|
||
editComponent: 'Select',
|
||
editComponentProps: {
|
||
dictType: 'sys_menu_type',
|
||
allowClear: true,
|
||
},
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('下拉多选'),
|
||
dataIndex: 'testSelectMultiple',
|
||
width: 130,
|
||
align: 'left',
|
||
dictType: 'sys_menu_type',
|
||
editRow: true,
|
||
editComponent: 'Select',
|
||
editComponentProps: {
|
||
dictType: 'sys_menu_type',
|
||
mode: 'multiple',
|
||
allowClear: true,
|
||
},
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('日期选择'),
|
||
dataIndex: 'testDate',
|
||
width: 130,
|
||
align: 'center',
|
||
editRow: true,
|
||
editComponent: 'DatePicker',
|
||
editComponentProps: {
|
||
format: 'YYYY-MM-DD',
|
||
showTime: false,
|
||
},
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('日期时间'),
|
||
dataIndex: 'testDatetime',
|
||
width: 215,
|
||
align: 'center',
|
||
editRow: true,
|
||
editComponent: 'DatePicker',
|
||
editComponentProps: {
|
||
format: 'YYYY-MM-DD HH:mm',
|
||
showTime: { format: 'HH:mm' },
|
||
},
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('用户选择'),
|
||
dataIndex: 'testUser.userCode',
|
||
dataLabel: 'testUser.userName',
|
||
width: 130,
|
||
align: 'left',
|
||
editRow: true,
|
||
editComponent: 'TreeSelect',
|
||
editComponentProps: {
|
||
api: officeTreeData,
|
||
params: { isLoadUser: true, userIdPrefix: '' },
|
||
canSelectParent: false,
|
||
allowClear: true,
|
||
},
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('机构选择'),
|
||
dataIndex: 'testOffice.officeCode',
|
||
dataLabel: 'testOffice.officeName',
|
||
width: 130,
|
||
align: 'left',
|
||
editRow: true,
|
||
editComponent: 'TreeSelect',
|
||
editComponentProps: {
|
||
api: officeTreeData,
|
||
canSelectParent: false,
|
||
allowClear: true,
|
||
},
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('区域选择'),
|
||
dataIndex: 'testAreaCode',
|
||
dataLabel: 'testAreaName',
|
||
width: 130,
|
||
align: 'left',
|
||
editRow: true,
|
||
editComponent: 'TreeSelect',
|
||
editComponentProps: {
|
||
api: areaTreeData,
|
||
canSelectParent: false,
|
||
allowClear: true,
|
||
},
|
||
editRule: false,
|
||
},
|
||
{
|
||
title: t('文件上传'),
|
||
dataIndex: 'upload',
|
||
width: 160,
|
||
align: 'left',
|
||
slot: 'testDataChildUpload',
|
||
},
|
||
]);
|
||
testDataChildTable.setTableData(record.value.testDataChildList || []);
|
||
}
|
||
|
||
function handleTestDataChildRowClick(record: Recordable) {
|
||
record.onEdit?.(true, false);
|
||
}
|
||
|
||
function handleTestDataChildAdd() {
|
||
testDataChildTable.insertTableDataRecord({
|
||
id: new Date().getTime(),
|
||
isNewRecord: true,
|
||
editable: true,
|
||
});
|
||
}
|
||
|
||
function handleTestDataChildDelete(record: Recordable) {
|
||
testDataChildTable.deleteTableDataRecord(record);
|
||
}
|
||
|
||
async function getTestDataChildList() {
|
||
let testDataChildListValid = true;
|
||
let testDataChildList: Recordable[] = [];
|
||
for (const record of testDataChildTable.getDataSource()) {
|
||
if (!(await record.onEdit?.(false, true))) {
|
||
testDataChildListValid = false;
|
||
}
|
||
testDataChildList.push({
|
||
...record,
|
||
id: !!record.isNewRecord ? '' : record.id,
|
||
});
|
||
}
|
||
for (const record of testDataChildTable.getDelDataSource()) {
|
||
if (!!record.isNewRecord) continue;
|
||
testDataChildList.push({
|
||
...record,
|
||
status: '1',
|
||
});
|
||
}
|
||
if (!testDataChildListValid) {
|
||
throw { errorFields: [{ name: ['testDataChildList'] }] };
|
||
}
|
||
return testDataChildList;
|
||
}
|
||
|
||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||
setDrawerProps({ loading: true });
|
||
await resetFields();
|
||
const res = await testDataForm(data);
|
||
record.value = (res.testData || {}) as TestData;
|
||
record.value.__t = new Date().getTime();
|
||
await setFieldsValue(record.value);
|
||
setTestDataChildTableData(res);
|
||
setDrawerProps({ loading: false });
|
||
});
|
||
|
||
async function handleSubmit() {
|
||
try {
|
||
const data = await validate();
|
||
setDrawerProps({ confirmLoading: true });
|
||
const params: any = {
|
||
isNewRecord: record.value.isNewRecord,
|
||
id: record.value.id,
|
||
};
|
||
data.testDataChildList = await getTestDataChildList();
|
||
// console.log('submit', params, data, record);
|
||
const res = await testDataSave(params, data);
|
||
showMessage(res.message);
|
||
setTimeout(closeDrawer);
|
||
emit('success', data);
|
||
} catch (error: any) {
|
||
if (error && error.errorFields) {
|
||
showMessage(error.message || t('common.validateError'));
|
||
}
|
||
console.log('error', error);
|
||
} finally {
|
||
setDrawerProps({ confirmLoading: false });
|
||
}
|
||
}
|
||
</script>
|