style: lint格式化文件
This commit is contained in:
@ -1,302 +1,302 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="tsx" setup>
|
||||
import { ref, computed, unref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import { ref, computed, unref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { addDemo, getDemo, updateDemo } from '/@/api/code/demo';
|
||||
import { Input } from 'ant-design-vue';
|
||||
import { getPostList } from '/@/api/system/post';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { addDemo, getDemo, updateDemo } from '/@/api/code/demo';
|
||||
import { Input } from 'ant-design-vue';
|
||||
import { getPostList } from '/@/api/system/post';
|
||||
|
||||
const accountFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'fieldString',
|
||||
label: '字符串',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
label: '联动字符串',
|
||||
field: 'fieldString111',
|
||||
component: 'ApiSelect',
|
||||
required: true,
|
||||
componentProps: {
|
||||
api: getPostList,
|
||||
// use name as label
|
||||
labelField: 'name',
|
||||
// use id as value
|
||||
valueField: 'id',
|
||||
getPopupContainer: () => document.body,
|
||||
onChange: () => {
|
||||
console.log('sssssssssss');
|
||||
const accountFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'fieldString',
|
||||
label: '字符串',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
},
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
field: 'fieldInt',
|
||||
label: '整型',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'fieldDouble',
|
||||
label: '浮点',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'fieldLong',
|
||||
label: '长整型',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'sortCode',
|
||||
label: '排序',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
|
||||
{
|
||||
label: '备注',
|
||||
field: 'remark',
|
||||
component: 'InputTextArea',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
label: '部门',
|
||||
field: 'dept',
|
||||
component: 'Dept',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
label: '用户',
|
||||
field: 'user',
|
||||
component: 'User',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
label: '信息体',
|
||||
field: 'info',
|
||||
component: 'Info',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: { infoType: 0 },
|
||||
},
|
||||
{
|
||||
label: '区域',
|
||||
field: 'area',
|
||||
component: 'Area',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: { initFetchParams: { id: '0' } },
|
||||
},
|
||||
{
|
||||
label: '子表单',
|
||||
field: 'subform',
|
||||
component: 'SubForm',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
mainKey: 'subform',
|
||||
columns: [
|
||||
{
|
||||
title: '字符串',
|
||||
dataIndex: 'fieldString',
|
||||
componentType: 'Input',
|
||||
defaultValue: 111,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '子表单组件验证案例',
|
||||
},
|
||||
],
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '整型',
|
||||
dataIndex: 'fieldInt',
|
||||
componentType: 'Switch',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '子表单组件验证案例',
|
||||
},
|
||||
],
|
||||
defaultValue: true,
|
||||
{
|
||||
label: '联动字符串',
|
||||
field: 'fieldString111',
|
||||
component: 'ApiSelect',
|
||||
required: true,
|
||||
componentProps: {
|
||||
checked: true,
|
||||
onChange: function () {
|
||||
console.log('子表单组件事件案例');
|
||||
},
|
||||
},
|
||||
api: getPostList,
|
||||
// use name as label
|
||||
labelField: 'name',
|
||||
// use id as value
|
||||
valueField: 'id',
|
||||
getPopupContainer: () => document.body,
|
||||
onChange: () => {
|
||||
console.log('sssssssssss');
|
||||
}
|
||||
}
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'fieldDatetimeStart,fieldDatetimeEnd',
|
||||
componentType: 'RangePicker',
|
||||
defaultValue: ['2022-06-15', '2022-06-18'],
|
||||
},
|
||||
{
|
||||
field: 'fieldInt',
|
||||
label: '整型',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
{
|
||||
field: 'fieldDouble',
|
||||
label: '浮点',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
{
|
||||
field: 'fieldLong',
|
||||
label: '长整型',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
{
|
||||
field: 'sortCode',
|
||||
label: '排序',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
|
||||
{
|
||||
label: '备注',
|
||||
field: 'remark',
|
||||
component: 'InputTextArea',
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
{
|
||||
label: '部门',
|
||||
field: 'dept',
|
||||
component: 'Dept',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
{
|
||||
label: '用户',
|
||||
field: 'user',
|
||||
component: 'User',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
{
|
||||
label: '信息体',
|
||||
field: 'info',
|
||||
component: 'Info',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: { infoType: 0 }
|
||||
},
|
||||
{
|
||||
label: '区域',
|
||||
field: 'area',
|
||||
component: 'Area',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: { initFetchParams: { id: '0' } }
|
||||
},
|
||||
{
|
||||
label: '子表单',
|
||||
field: 'subform',
|
||||
component: 'SubForm',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
placeholder: ['开始时间', '结束时间'],
|
||||
},
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '合并',
|
||||
dataIndex: 'xxxx',
|
||||
children: [
|
||||
{
|
||||
title: '浮点',
|
||||
dataIndex: 'fieldDouble',
|
||||
componentType: 'Switch',
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '长整数',
|
||||
dataIndex: 'fieldLong',
|
||||
componentType: 'Render', //如果使用自定义渲染 必须设置componentType === 'Render'
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '子表单组件验证案例',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
xxxx: ['xxxx', 'xxxx'],
|
||||
},
|
||||
render: ({ model, field, rules, componentProps }) => {
|
||||
const handleChange = (e: ChangeEvent) => {
|
||||
model[field] = e.target.value;
|
||||
console.log('参数有', model, field, rules, componentProps);
|
||||
};
|
||||
mainKey: 'subform',
|
||||
columns: [
|
||||
{
|
||||
title: '字符串',
|
||||
dataIndex: 'fieldString',
|
||||
componentType: 'Input',
|
||||
defaultValue: 111,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '子表单组件验证案例'
|
||||
}
|
||||
]
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '整型',
|
||||
dataIndex: 'fieldInt',
|
||||
componentType: 'Switch',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '子表单组件验证案例'
|
||||
}
|
||||
],
|
||||
defaultValue: true,
|
||||
componentProps: {
|
||||
checked: true,
|
||||
onChange: function () {
|
||||
console.log('子表单组件事件案例');
|
||||
}
|
||||
}
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'fieldDatetimeStart,fieldDatetimeEnd',
|
||||
componentType: 'RangePicker',
|
||||
defaultValue: ['2022-06-15', '2022-06-18'],
|
||||
componentProps: {
|
||||
placeholder: ['开始时间', '结束时间']
|
||||
}
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '合并',
|
||||
dataIndex: 'xxxx',
|
||||
children: [
|
||||
{
|
||||
title: '浮点',
|
||||
dataIndex: 'fieldDouble',
|
||||
componentType: 'Switch'
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '长整数',
|
||||
dataIndex: 'fieldLong',
|
||||
componentType: 'Render', //如果使用自定义渲染 必须设置componentType === 'Render'
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '子表单组件验证案例'
|
||||
}
|
||||
],
|
||||
componentProps: {
|
||||
xxxx: ['xxxx', 'xxxx']
|
||||
},
|
||||
render: ({ model, field, rules, componentProps }) => {
|
||||
const handleChange = (e: ChangeEvent) => {
|
||||
model[field] = e.target.value;
|
||||
console.log('参数有', model, field, rules, componentProps);
|
||||
};
|
||||
|
||||
// tsx写法
|
||||
// tsx写法
|
||||
|
||||
// return (
|
||||
// <Input
|
||||
// placeholder="请输入"
|
||||
// v-model:value={model[field]}
|
||||
// onChange={handleChange}
|
||||
// ></Input>
|
||||
// );
|
||||
// return (
|
||||
// <Input
|
||||
// placeholder="请输入"
|
||||
// v-model:value={model[field]}
|
||||
// onChange={handleChange}
|
||||
// ></Input>
|
||||
// );
|
||||
|
||||
//渲染函数写法
|
||||
return h(Input, {
|
||||
placeholder: '请输入11111111',
|
||||
value: model[field],
|
||||
onChange: handleChange,
|
||||
});
|
||||
},
|
||||
// width: 180,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
componentType: 'IconPicker',
|
||||
},
|
||||
],
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
//渲染函数写法
|
||||
return h(Input, {
|
||||
placeholder: '请输入11111111',
|
||||
value: model[field],
|
||||
onChange: handleChange
|
||||
});
|
||||
}
|
||||
// width: 180,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
componentType: 'IconPicker'
|
||||
}
|
||||
]
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const emit = defineEmits(['close', 'register']);
|
||||
const emit = defineEmits(['close', 'register']);
|
||||
|
||||
const { notification } = useMessage();
|
||||
const { notification } = useMessage();
|
||||
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
const { t } = useI18n();
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
const { t } = useI18n();
|
||||
|
||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: accountFormSchema,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: {
|
||||
span: 23,
|
||||
},
|
||||
});
|
||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: accountFormSchema,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: {
|
||||
span: 23
|
||||
}
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields();
|
||||
setModalProps({ confirmLoading: false });
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields();
|
||||
setModalProps({ confirmLoading: false });
|
||||
|
||||
console.log('useModalInner', data);
|
||||
console.log('useModalInner', data);
|
||||
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
|
||||
if (unref(isUpdate)) {
|
||||
rowId.value = data.id;
|
||||
const record = await getDemo(data.id);
|
||||
if (unref(isUpdate)) {
|
||||
rowId.value = data.id;
|
||||
const record = await getDemo(data.id);
|
||||
|
||||
setFieldsValue({
|
||||
user: '1,2',
|
||||
dept: '1419276791701966848',
|
||||
info: '2',
|
||||
area: '130000,130100',
|
||||
...record,
|
||||
});
|
||||
setFieldsValue({
|
||||
user: '1,2',
|
||||
dept: '1419276791701966848',
|
||||
info: '2',
|
||||
area: '130000,130100',
|
||||
...record
|
||||
});
|
||||
}
|
||||
|
||||
if (data.id) {
|
||||
//ssss
|
||||
type.value = data.id;
|
||||
}
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增用户' : '编辑用户'));
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
console.log('handleSubmit', values);
|
||||
return;
|
||||
setModalProps({ confirmLoading: true });
|
||||
|
||||
// TODO custom api
|
||||
if (!unref(isUpdate)) {
|
||||
//false 新增
|
||||
await addDemo(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('新增成功！')
|
||||
}); //提示消息
|
||||
} else {
|
||||
values.id = rowId.value;
|
||||
await updateDemo(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('修改成功！')
|
||||
}); //提示消息
|
||||
}
|
||||
|
||||
closeModal();
|
||||
emit('close');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
if (data.id) {
|
||||
//ssss
|
||||
type.value = data.id;
|
||||
}
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增用户' : '编辑用户'));
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
console.log('handleSubmit', values);
|
||||
return;
|
||||
setModalProps({ confirmLoading: true });
|
||||
|
||||
// TODO custom api
|
||||
if (!unref(isUpdate)) {
|
||||
//false 新增
|
||||
await addDemo(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('新增成功！'),
|
||||
}); //提示消息
|
||||
} else {
|
||||
values.id = rowId.value;
|
||||
await updateDemo(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('修改成功！'),
|
||||
}); //提示消息
|
||||
}
|
||||
|
||||
closeModal();
|
||||
emit('close');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,43 +1,35 @@
|
||||
<template>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree
|
||||
title="机构列表"
|
||||
toolbar
|
||||
search
|
||||
:clickRowToExpand="true"
|
||||
:treeData="treeData"
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree title="机构列表" toolbar search :clickRowToExpand="true" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import { getDepartmentTree } from '/@/api/system/department';
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import { getDepartmentTree } from '/@/api/system/department';
|
||||
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DeptTree',
|
||||
components: { BasicTree },
|
||||
export default defineComponent({
|
||||
name: 'DeptTree',
|
||||
components: { BasicTree },
|
||||
|
||||
emits: ['select'],
|
||||
setup(_, { emit }) {
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
emits: ['select'],
|
||||
setup(_, { emit }) {
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
|
||||
}
|
||||
async function fetch() {
|
||||
treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
|
||||
}
|
||||
|
||||
function handleSelect(keys: string, e) {
|
||||
emit('select', keys[0]);
|
||||
console.log(keys, e);
|
||||
}
|
||||
function handleSelect(keys: string, e) {
|
||||
emit('select', keys[0]);
|
||||
console.log(keys, e);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
return { treeData, handleSelect };
|
||||
},
|
||||
});
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
return { treeData, handleSelect };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,167 +1,165 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight contentClass="flex">
|
||||
<!-- <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> -->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--class="w-3/4 xl:w-4/5" -->
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate">新增</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<DemoModal @register="registerModal" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
<PageWrapper dense contentFullHeight contentClass="flex">
|
||||
<!-- <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> -->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--class="w-3/4 xl:w-4/5" -->
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate">新增</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleEdit.bind(null, record)
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record)
|
||||
}
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<DemoModal @register="registerModal" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import { getDemoPage, deleteDemo } from '/@/api/code/demo';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import DemoModal from './components/DemoModal.vue';
|
||||
// import DeptTree from './components/DeptTree.vue';
|
||||
import { ref } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import { getDemoPage, deleteDemo } from '/@/api/code/demo';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import DemoModal from './components/DemoModal.vue';
|
||||
// import DeptTree from './components/DeptTree.vue';
|
||||
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'fieldString',
|
||||
label: '字符串',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'fieldInt',
|
||||
label: '整型',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'fieldDatetime',
|
||||
label: '时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'fieldDouble',
|
||||
label: '浮点',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'fieldLong',
|
||||
label: '长整数',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'fieldString',
|
||||
label: '字符串',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'fieldInt',
|
||||
label: '整型',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'fieldDatetime',
|
||||
label: '时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'fieldDouble',
|
||||
label: '浮点',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'fieldLong',
|
||||
label: '长整数',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
}
|
||||
];
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '字符串',
|
||||
dataIndex: 'fieldString',
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '整型',
|
||||
dataIndex: 'fieldInt',
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'fieldDatetime',
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '浮点',
|
||||
dataIndex: 'fieldDouble',
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '长整数',
|
||||
dataIndex: 'fieldLong',
|
||||
// width: 180,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
];
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '字符串',
|
||||
dataIndex: 'fieldString'
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '整型',
|
||||
dataIndex: 'fieldInt'
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'fieldDatetime'
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '浮点',
|
||||
dataIndex: 'fieldDouble'
|
||||
// width: 120,
|
||||
},
|
||||
{
|
||||
title: '长整数',
|
||||
dataIndex: 'fieldLong'
|
||||
// width: 180,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark'
|
||||
}
|
||||
];
|
||||
|
||||
defineEmits(['register']);
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
const selectDeptId = ref(''); //左侧树选择
|
||||
defineEmits(['register']);
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
const selectDeptId = ref(''); //左侧树选择
|
||||
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: 'Demo列表',
|
||||
api: getDemoPage,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [
|
||||
['fieldDatetime', ['fieldDatetimeStart', 'fieldDatetimeEnd'], 'YYYY-MM-DD HH:mm:ss'],
|
||||
],
|
||||
},
|
||||
// beforeFetch: (params) => {
|
||||
// //发送请求默认新增 左边树结构所选机构id
|
||||
// return { ...params, departmentId: selectDeptId.value };
|
||||
// },
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: 'Demo列表',
|
||||
api: getDemoPage,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [['fieldDatetime', ['fieldDatetimeStart', 'fieldDatetimeEnd'], 'YYYY-MM-DD HH:mm:ss']]
|
||||
},
|
||||
// beforeFetch: (params) => {
|
||||
// //发送请求默认新增 左边树结构所选机构id
|
||||
// return { ...params, departmentId: selectDeptId.value };
|
||||
// },
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
// console.log(record);
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isUpdate: false
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
deleteDemo([record.id]).then((_) => {
|
||||
reload({ searchInfo: { departmentId: selectDeptId.value } });
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('删除成功！'),
|
||||
}); //提示消息
|
||||
});
|
||||
}
|
||||
function handleEdit(record: Recordable) {
|
||||
// console.log(record);
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
reload({ searchInfo: { departmentId: selectDeptId.value } });
|
||||
}
|
||||
function handleDelete(record: Recordable) {
|
||||
deleteDemo([record.id]).then((_) => {
|
||||
reload({ searchInfo: { departmentId: selectDeptId.value } });
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('删除成功！')
|
||||
}); //提示消息
|
||||
});
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
reload({ searchInfo: { departmentId: selectDeptId.value } });
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user