style: 删除无用组件
This commit is contained in:
rd
@ -1,158 +0,0 @@
|
||||
import type { Form } from '@/components/wyg-form/interface';
|
||||
export const options = [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: 'Beijing',
|
||||
children: [
|
||||
{
|
||||
value: 'chaoyang',
|
||||
label: 'ChaoYang',
|
||||
children: [
|
||||
{
|
||||
value: 'datunli',
|
||||
label: 'Datunli',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'haidian',
|
||||
label: 'Haidian',
|
||||
},
|
||||
{
|
||||
value: 'dongcheng',
|
||||
label: 'Dongcheng',
|
||||
},
|
||||
{
|
||||
value: 'xicheng',
|
||||
label: 'Xicheng',
|
||||
children: [
|
||||
{
|
||||
value: 'jinrongjie',
|
||||
label: 'Jinrongjie',
|
||||
},
|
||||
{
|
||||
value: 'tianqiao',
|
||||
label: 'Tianqiao',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: 'Shanghai',
|
||||
children: [
|
||||
{
|
||||
value: 'huangpu',
|
||||
label: 'Huangpu',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const formConfig: Form.FieldItem[] = [
|
||||
{
|
||||
field: 'basic',
|
||||
label: '基本信息',
|
||||
component: 'title',
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '姓名',
|
||||
required: true,
|
||||
component: 'input',
|
||||
allowClear: true,
|
||||
colProps: {
|
||||
span: 20,
|
||||
offset: 100,
|
||||
},
|
||||
rules: [{ required: true, message: 'name is required' }],
|
||||
},
|
||||
{
|
||||
field: 'age',
|
||||
label: '年龄',
|
||||
required: true,
|
||||
component: 'input',
|
||||
allowClear: true,
|
||||
},
|
||||
{
|
||||
field: 'hobby',
|
||||
label: '爱好',
|
||||
required: true,
|
||||
component: 'input',
|
||||
},
|
||||
{
|
||||
field: 'school',
|
||||
label: '学校',
|
||||
required: true,
|
||||
component: 'input',
|
||||
},
|
||||
{
|
||||
field: 'sex',
|
||||
label: '性别',
|
||||
required: true,
|
||||
component: 'select',
|
||||
lists: [
|
||||
{
|
||||
label: '男',
|
||||
value: 'M',
|
||||
},
|
||||
{
|
||||
label: '女',
|
||||
value: 'F',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
field: 'birthTime',
|
||||
label: '时间',
|
||||
component: 'time',
|
||||
},
|
||||
{
|
||||
field: 'birthDate',
|
||||
label: '出生日期',
|
||||
component: 'date',
|
||||
},
|
||||
{
|
||||
field: 'rangeDate',
|
||||
label: '日期范围',
|
||||
component: 'rangeDate',
|
||||
},
|
||||
{
|
||||
field: 'address',
|
||||
label: '地址',
|
||||
component: 'cascader',
|
||||
options,
|
||||
},
|
||||
{
|
||||
field: 'desc',
|
||||
label: '自我介绍',
|
||||
required: true,
|
||||
component: 'input',
|
||||
},
|
||||
{
|
||||
field: 'contact',
|
||||
label: '联系信息',
|
||||
component: 'title',
|
||||
},
|
||||
{
|
||||
field: 'tel',
|
||||
label: '联系电话',
|
||||
component: 'input',
|
||||
},
|
||||
{
|
||||
field: 'email',
|
||||
label: '邮箱',
|
||||
component: 'input',
|
||||
},
|
||||
{
|
||||
field: 'relation',
|
||||
label: '关系信息',
|
||||
component: 'title',
|
||||
},
|
||||
{
|
||||
field: 'relationTable',
|
||||
label: '关系信息',
|
||||
component: 'slot',
|
||||
},
|
||||
];
|
||||
@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<a-card class="mb-5">
|
||||
<eo-form ref="formRef" :fieldList="fieldList" :model="model" @submit="handleSubmit" @change="handleChange">
|
||||
<!-- <template #header> 基本表单header </template> -->
|
||||
<!-- <template #footer>基本表单footer</template> -->
|
||||
|
||||
<!-- <template #buttons="{ model, formRef }">
|
||||
<a-button @click="handleSubmit(model, formRef)">提交</a-button>
|
||||
</template> -->
|
||||
|
||||
<!-- <template #relationTable>
|
||||
<div>关系人slot</div>
|
||||
</template> -->
|
||||
</eo-form>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="onSubmit">父组件提交</a-button>
|
||||
<a-button @click="onSwith">启用/禁用</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import EoForm from '@/components/wyg-form/index.vue';
|
||||
import { formConfig } from './config';
|
||||
import type { Form } from '@/components/wyg-form/interface';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
let fieldList: Form.FieldItem[] = formConfig;
|
||||
const model = ref<Record<string, any>>({
|
||||
name: '张三',
|
||||
age: 18,
|
||||
});
|
||||
// 提交按钮在子组件
|
||||
const handleSubmit = (model: Record<string, any>) => {
|
||||
console.log(model, 'model====');
|
||||
};
|
||||
// 提交按钮在父组件
|
||||
const onSubmit = async () => {
|
||||
const res = await formRef?.value?.submit();
|
||||
console.log(formRef, 'formRef====');
|
||||
console.log(res, 'res====');
|
||||
};
|
||||
// 修改Form组件相关属性
|
||||
const status = ref(false);
|
||||
const onSwith = () => {
|
||||
status.value = !status.value;
|
||||
formRef?.value?.setForm({ disabled: !status.value });
|
||||
};
|
||||
|
||||
const handleChange = (params: any) => {
|
||||
const { key, val } = params;
|
||||
if (key === 'sex') {
|
||||
const required = val === 'F';
|
||||
// 更新form配置
|
||||
const updateList: any = [
|
||||
{
|
||||
field: 'school',
|
||||
required: required,
|
||||
disabled: !required,
|
||||
},
|
||||
];
|
||||
formRef?.value?.updateFieldsList(updateList);
|
||||
formRef?.value?.setModel({ age: 26 });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,38 +0,0 @@
|
||||
/*
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-02-20 14:00:07
|
||||
* @LastEditors: 田鑫
|
||||
* @LastEditTime: 2023-02-20 14:00:08
|
||||
* @Description:
|
||||
*/
|
||||
import type { TableColumnData } from '@arco-design/web-vue';
|
||||
|
||||
export const columnsData: TableColumnData[] = [
|
||||
{
|
||||
title: '测试表头1',
|
||||
dataIndex: 'column1',
|
||||
},
|
||||
{
|
||||
title: '测试表头2',
|
||||
dataIndex: 'column2',
|
||||
},
|
||||
{
|
||||
title: '测试表头3',
|
||||
dataIndex: 'column3',
|
||||
},
|
||||
{
|
||||
title: '测试表头4',
|
||||
dataIndex: 'column4',
|
||||
},
|
||||
{
|
||||
title: '测试表头5',
|
||||
dataIndex: 'column5',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: '',
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
slotName: 'opeartion',
|
||||
},
|
||||
];
|
||||
@ -1,132 +0,0 @@
|
||||
import type { Form } from '../wyg-form/interface';
|
||||
export const options = [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: 'Beijing',
|
||||
children: [
|
||||
{
|
||||
value: 'chaoyang',
|
||||
label: 'ChaoYang',
|
||||
children: [
|
||||
{
|
||||
value: 'datunli',
|
||||
label: 'Datunli',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'haidian',
|
||||
label: 'Haidian',
|
||||
},
|
||||
{
|
||||
value: 'dongcheng',
|
||||
label: 'Dongcheng',
|
||||
},
|
||||
{
|
||||
value: 'xicheng',
|
||||
label: 'Xicheng',
|
||||
children: [
|
||||
{
|
||||
value: 'jinrongjie',
|
||||
label: 'Jinrongjie',
|
||||
},
|
||||
{
|
||||
value: 'tianqiao',
|
||||
label: 'Tianqiao',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: 'Shanghai',
|
||||
children: [
|
||||
{
|
||||
value: 'huangpu',
|
||||
label: 'Huangpu',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const formConfig: Form.FieldItem[] = [
|
||||
{
|
||||
field: 'name',
|
||||
label: '姓名',
|
||||
required: true,
|
||||
value: '波波',
|
||||
component: 'input',
|
||||
allowClear: true,
|
||||
colProps: {
|
||||
span: 20,
|
||||
offset: 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'age',
|
||||
label: '年龄',
|
||||
required: true,
|
||||
value: '18',
|
||||
component: 'input',
|
||||
allowClear: true,
|
||||
},
|
||||
{
|
||||
field: 'hobby',
|
||||
label: '爱好',
|
||||
required: true,
|
||||
value: '',
|
||||
component: 'input',
|
||||
},
|
||||
{
|
||||
field: 'school',
|
||||
label: '学校',
|
||||
required: true,
|
||||
value: '',
|
||||
component: 'input',
|
||||
},
|
||||
{
|
||||
field: 'sex',
|
||||
label: '性别',
|
||||
required: true,
|
||||
component: 'select',
|
||||
lists: [
|
||||
{
|
||||
label: '男',
|
||||
value: 'M',
|
||||
},
|
||||
{
|
||||
label: '女',
|
||||
value: 'F',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
field: 'birthTime',
|
||||
label: '时间',
|
||||
component: 'time',
|
||||
},
|
||||
{
|
||||
field: 'birthDate',
|
||||
label: '出生日期',
|
||||
component: 'date',
|
||||
},
|
||||
{
|
||||
field: 'rangeDate',
|
||||
label: '日期范围',
|
||||
component: 'rangeDate',
|
||||
},
|
||||
{
|
||||
field: 'address',
|
||||
label: '地址',
|
||||
component: 'cascader',
|
||||
options,
|
||||
},
|
||||
{
|
||||
field: 'desc',
|
||||
label: '自我介绍',
|
||||
required: true,
|
||||
value: '',
|
||||
component: 'input',
|
||||
},
|
||||
];
|
||||
@ -1,27 +0,0 @@
|
||||
# Table 说明
|
||||
|
||||
## 说明
|
||||
|
||||
`<a-table v-bind="propsRes" v-on="propsEvent" ></a-table>`
|
||||
|
||||
`复写a-table中原始的v-bind及v-on属性，propRes负责处理属性，propsEvent负责处理a-table的事件`
|
||||
|
||||
`setProps：设置a-table的属性，类型为：IDefaultProps`
|
||||
|
||||
`setColumns：设置table中columns的属性，类型为：TableColumnData[]`
|
||||
|
||||
`setLoadListParams: 设置列表数据接口的请求参数，类型为自定义`
|
||||
|
||||
`loadTableData：获取列表数据，返回列表参数`
|
||||
|
||||
## 使用方式
|
||||
|
||||
`<a-table v-bind="propsRes" v-on="propsEvent">`
|
||||
<br>
|
||||
`<template #xx></template> // 自定义插槽名称，在setColumns的传入值中设置`
|
||||
<br>
|
||||
`</a-table>`
|
||||
|
||||
## 示例
|
||||
|
||||
`具体参照table文件夹的示例`
|
||||
@ -1,52 +0,0 @@
|
||||
<!--
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-02-20 13:58:48
|
||||
* @LastEditors: 田鑫
|
||||
* @LastEditTime: 2023-02-28 12:05:03
|
||||
* @Description: table示例
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-table v-bind="propsRes" v-on="propsEvent">
|
||||
<template #opeartion="{ record }">
|
||||
<div flex>
|
||||
<a-link>编辑</a-link>
|
||||
<ConfirmButton content="确定要删除该条数据吗？" popupType="error" @confirm-emit="deleteItem(record)">
|
||||
<a-link>删除</a-link>
|
||||
</ConfirmButton>
|
||||
<a-link>下载</a-link>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { fetchTableData, type IExample } from '@/api/example';
|
||||
import useTableProps from '@/hooks/table-hooks';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { columnsData } from './columns';
|
||||
|
||||
const { propsRes, propsEvent, setProps, setColumns, setLoadListParams, loadTableData } =
|
||||
useTableProps<IExample.ITableResponse>(fetchTableData);
|
||||
setProps({
|
||||
'row-key': 'id',
|
||||
'row-selection': {
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true,
|
||||
},
|
||||
'selected-keys': [1, 2, 3],
|
||||
});
|
||||
setColumns(columnsData);
|
||||
onMounted(async () => {
|
||||
await loadTableData();
|
||||
});
|
||||
|
||||
function add() {
|
||||
Message.info('=sa');
|
||||
}
|
||||
|
||||
function deleteItem(record) {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user