You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
492 lines
16 KiB
492 lines
16 KiB
<script setup lang="ts">
|
|
import { createVNode, getCurrentInstance, reactive, toRaw } from "vue";
|
|
import { Format } from "@ease-forge/shared";
|
|
import { createBlockComponent } from "@ease-forge/runtime";
|
|
import DataForm from "@/components/data-form/DataForm.vue";
|
|
import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts";
|
|
|
|
window.globalConfig.componentManage.registerComponent("DataForm", DataForm);
|
|
|
|
// 当前组件对象
|
|
const instance = getCurrentInstance();
|
|
|
|
const data = reactive({
|
|
str: "abcABC",
|
|
num_1: 123,
|
|
checkbox_1: true,
|
|
checkbox_group_1: ["v2"],
|
|
radio_1: false,
|
|
radio_group_1: "v2",
|
|
switch_1: false,
|
|
select_1: "006",
|
|
select_2: "006",
|
|
date_1: "2025-02-03",
|
|
date_2: Format.toDayjs("2025-02-03").toDate(),
|
|
time_1: "08:30:00",
|
|
time_select_1: "08:30:00",
|
|
cascader_1: ["wh"],
|
|
tree_select_1: "wh",
|
|
autocomplete: "汤磊",
|
|
tags_1: ["DEV"],
|
|
color_1: "#CA4343",
|
|
slider_1: 80,
|
|
rate_1: 3.5,
|
|
mentions_1: "abc @bj ABC",
|
|
transfer_1: ["v1", "v2"],
|
|
upload_1: [
|
|
{
|
|
name: 'image.png',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-2',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-3',
|
|
percent: 50,
|
|
name: 'image.png',
|
|
status: 'uploading',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-5',
|
|
name: 'image.png',
|
|
status: 'error',
|
|
},
|
|
],
|
|
password: "2025fff",
|
|
textarea: [
|
|
"蛇衔春色千山秀",
|
|
"龙舞祥光万户新",
|
|
"福满人间",
|
|
"属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
|
|
].join("\n"),
|
|
});
|
|
|
|
const dataForm1 = reactive<DataFormProps>({
|
|
formFields: [
|
|
{
|
|
dataPath: 'str', label: '字符串', input: 'Input',
|
|
inputProps: {
|
|
placeholder: '请输入',
|
|
clearable: true,
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'num_1', label: '数字', input: 'InputNumber',
|
|
inputProps: {
|
|
placeholder: '请输入',
|
|
controlsPosition: 'right',
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'checkbox_1', label: '复选', input: 'Checkbox',
|
|
inputProps: {
|
|
trueValue: true,
|
|
falseValue: false,
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'checkbox_group_1', label: '复选组', input: 'CheckboxGroup',
|
|
inputProps: {
|
|
max: 2,
|
|
options: [
|
|
{ value: "001", label: "选项1" },
|
|
{ value: "v2", label: "选项2" },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'radio_1', label: '单选', input: 'Radio',
|
|
inputProps: {
|
|
value: true,
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'radio_group_1', label: '单选组', input: 'RadioGroup',
|
|
inputProps: {
|
|
options: [
|
|
{ value: "001", label: "选项1" },
|
|
{ value: "002", label: "选项2" },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'switch_1', label: '开关', input: 'Switch',
|
|
inputProps: {
|
|
inactiveValue: false,
|
|
activeValue: true,
|
|
inlinePrompt: true,
|
|
inactiveText: "关闭",
|
|
activeText: "开启",
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'select_1', label: '选择器', input: 'Select',
|
|
inputProps: {
|
|
placeholder: "请选择",
|
|
clearable: true,
|
|
options: [
|
|
{ value: "001", label: "选项1" },
|
|
{ value: "002", label: "选项2" },
|
|
{ value: "003", label: "选项3" },
|
|
{ value: "004", label: "选项4" },
|
|
{ value: "005", label: "选项5" },
|
|
{ value: "006", label: "选项6" },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'select_2', label: '选择器', input: 'SelectV2',
|
|
inputProps: {
|
|
placeholder: "请选择",
|
|
clearable: true,
|
|
options: [
|
|
{ value: "001", label: "选项1" },
|
|
{ value: "002", label: "选项2" },
|
|
{ value: "003", label: "选项3" },
|
|
{ value: "004", label: "选项4" },
|
|
{ value: "005", label: "选项5" },
|
|
{ value: "006", label: "选项6" },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'date_1', label: '日期选择', input: 'DatePicker',
|
|
inputProps: {
|
|
placeholder: "选择时间",
|
|
type: "date",
|
|
format: "YYYY-MM-DD",
|
|
valueFormat: "YYYY-MM-DD",
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'date_2', label: '日期时间选择', input: 'DatePicker',
|
|
inputProps: {
|
|
placeholder: "选择时间",
|
|
type: "datetime",
|
|
format: "YYYY-MM-DD HH:mm:ss",
|
|
// valueFormat: "YYYY-MM-DD",
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'time_1', label: '时间选择', input: 'TimePicker',
|
|
inputProps: {
|
|
placeholder: "选择时间",
|
|
isRange: false,
|
|
format: "HH:mm:ss",
|
|
valueFormat: "HH:mm:ss",
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'time_select_1', label: '时间选择', input: 'TimeSelect',
|
|
inputProps: {
|
|
placeholder: "选择时间",
|
|
clearable: true,
|
|
step: "00:15",
|
|
format: "HH:mm:ss",
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'cascader_1', label: '级联选择', input: 'Cascader',
|
|
inputProps: {
|
|
placeholder: '请输入',
|
|
options: [
|
|
{
|
|
value: 'zj', label: '浙江',
|
|
children: [
|
|
{
|
|
value: 'hz', label: '杭州',
|
|
children: [
|
|
{ value: 'xh', label: '西湖' },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 'js', label: '江苏',
|
|
children: [
|
|
{
|
|
value: 'nj', label: '南京',
|
|
children: [
|
|
{ value: 'zhm', label: '中华门' },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{ value: 'sh', label: '上海', },
|
|
{ value: 'bj', label: '北京', },
|
|
{ value: 'sz', label: '深圳', },
|
|
{ value: 'cq', label: '重庆', },
|
|
{ value: 'gz', label: '广州', },
|
|
{ value: 'cd', label: '成都', },
|
|
{ value: 'wh', label: '武汉', },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'tree_select_1', label: '树形选择', input: 'TreeSelect',
|
|
inputProps: {
|
|
placeholder: '请输入',
|
|
clearable: true,
|
|
defaultExpandAll: true,
|
|
// renderAfterExpand: true,
|
|
data: [
|
|
{
|
|
value: 'zj', label: '浙江',
|
|
children: [
|
|
{
|
|
value: 'hz', label: '杭州',
|
|
children: [
|
|
{ value: 'xh', label: '西湖' },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{ value: 'wh', label: '武汉', },
|
|
{ value: 'sh', label: '上海', },
|
|
{ value: 'bj', label: '北京', },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'autocomplete', label: '自动补全', input: 'Autocomplete',
|
|
inputProps: {
|
|
placeholder: "自动补全",
|
|
clearable: true,
|
|
fetchSuggestions: (queryString: string, callback: Function) => {
|
|
const data = [
|
|
{ label: "1熊超", value: "熊超" },
|
|
{ label: "2姚洋", value: "姚洋" },
|
|
{ label: "3崔艳", value: "崔艳" },
|
|
{ label: "4侯芳", value: "侯芳" },
|
|
{ label: "5林敏", value: "林敏" },
|
|
{ label: "6金丽", value: "金丽" },
|
|
{ label: "7侯秀英", value: "侯秀英" },
|
|
{ label: "8刘秀英", value: "刘秀英" },
|
|
{ label: "9林刚", value: "林刚" },
|
|
{ label: "10汤磊", value: "汤磊" },
|
|
{ label: "11刘军", value: "刘军" },
|
|
{ label: "12潘娜", value: "潘娜" },
|
|
{ label: "13袁军", value: "袁军" },
|
|
{ label: "14段勇", value: "段勇" },
|
|
{ label: "15李霞", value: "李霞" },
|
|
{ label: "16赵杰", value: "赵杰" },
|
|
];
|
|
const res = data.filter(item => item.label.includes(queryString));
|
|
callback(res);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'tags_1', label: '标签输入', input: 'InputTag',
|
|
inputProps: {
|
|
placeholder: "请输入",
|
|
clearable: true,
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'color_1', label: '颜色选择', input: 'ColorPicker',
|
|
inputProps: {},
|
|
},
|
|
{
|
|
dataPath: 'slider_1', label: '滑块', input: 'Slider',
|
|
widthCount: 2,
|
|
inputProps: {
|
|
showInput: true,
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'rate_1', label: '评分', input: 'Rate',
|
|
inputProps: {
|
|
allowHalf: true,
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'mentions_1', label: '提及', input: 'Mention',
|
|
inputProps: {
|
|
placeholder: '请输入',
|
|
options: [
|
|
{ value: 'sh', label: '上海', },
|
|
{ value: 'bj', label: '北京', },
|
|
{ value: 'sz', label: '深圳', },
|
|
{ value: 'cq', label: '重庆', },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'password', label: '密码', input: 'Input',
|
|
inputProps: {
|
|
placeholder: '请输入',
|
|
clearable: true,
|
|
type: "password",
|
|
showPassword: true,
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'textarea', label: '多行文本', input: 'Input',
|
|
widthCount: 3,
|
|
inputProps: {
|
|
placeholder: '请输入',
|
|
clearable: true,
|
|
type: "textarea",
|
|
autosize: { minRows: 3, maxRows: 8 },
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'transfer_1', label: '穿梭框', input: 'Transfer',
|
|
widthCount: 3,
|
|
inputProps: {
|
|
titles: ["数据项", "已选择"],
|
|
data: [
|
|
{ title: "选项1", key: "v1" },
|
|
{ title: "选项2", key: "v2" },
|
|
{ title: "选项3", key: "v3" },
|
|
{ title: "选项4", key: "v4" },
|
|
{ title: "选项5", key: "v5" },
|
|
{ title: "选项6", key: "v6" },
|
|
{ title: "选项7", key: "v7" },
|
|
{ title: "选项8", key: "v8" },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
dataPath: 'upload_1', label: '文件上传', input: 'Upload',
|
|
widthCount: 3,
|
|
inputProps: {
|
|
listType: "picture-card",
|
|
fileList: [
|
|
{
|
|
name: 'food.jpeg',
|
|
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
},
|
|
{
|
|
name: 'food.jpeg',
|
|
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
},
|
|
{
|
|
name: 'food.jpeg',
|
|
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
columnCount: 3,
|
|
layout: "onlyLabelFixed",
|
|
});
|
|
|
|
const MyDataForm = createBlockComponent({
|
|
block: true,
|
|
type: "DataForm",
|
|
data: {
|
|
data: toRaw(data),
|
|
},
|
|
props: {
|
|
style: {
|
|
overflowY: "auto",
|
|
},
|
|
// data: "{{ data }}",
|
|
data: toRaw(data),
|
|
formFields: dataForm1.formFields,
|
|
columnCount: dataForm1.columnCount,
|
|
layout: dataForm1.layout,
|
|
labelWidth: "100px",
|
|
},
|
|
}, {
|
|
componentManage: window.globalConfig.componentManage,
|
|
});
|
|
|
|
function test() {
|
|
system.showDialog(createVNode(DataForm, {
|
|
style: {
|
|
overflowY: "auto",
|
|
},
|
|
data: toRaw(data),
|
|
formFields: dataForm1.formFields,
|
|
columnCount: dataForm1.columnCount,
|
|
layout: dataForm1.layout,
|
|
labelWidth: "100px",
|
|
}), {
|
|
title: '模型查看器',
|
|
width: 950,
|
|
height: 400,
|
|
showClose: true,
|
|
showMax: true,
|
|
showCancelButton: false,
|
|
showOkButton: true,
|
|
}).then(() => {
|
|
console.log("data", data);
|
|
// instance?.proxy.$forceUpdate();
|
|
}).finally();
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<button @click="test">测试</button>
|
|
</div>
|
|
<div class="flex-row-container" style="column-gap: 12px;height: calc(100% - 30px);">
|
|
<DataForm
|
|
class="flex-item-fixed"
|
|
style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"
|
|
:data="data"
|
|
:formFields="dataForm1.formFields"
|
|
:columnCount="dataForm1.columnCount"
|
|
:layout="dataForm1.layout"
|
|
labelWidth="100px"
|
|
inputWidth=""
|
|
/>
|
|
<!--<MyDataForm class="flex-item-fixed" style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"/>-->
|
|
<pre class="flex-item-fill" style="overflow-y: auto;" lang="json">{{ JSON.stringify(data, null, 4) }}</pre>
|
|
</div>
|
|
<div style="height: 24px;"/>
|
|
</template>
|
|
|
|
<style>
|
|
/** flex多行容器 */
|
|
.flex-column-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/** flex多列容器 */
|
|
.flex-row-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/** flex自动填充 */
|
|
.flex-item-fill {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/** flex固定大小 */
|
|
.flex-item-fixed {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/** flex主轴上对齐方式 */
|
|
.flex-justify-content-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
/** flex交叉轴上对齐方式 */
|
|
.flex-align-items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
/** 内容居中 */
|
|
.content-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|