Skip to content

Commit a21d02e

Browse files
sendyasendya
authored
Merge pull request #247 from sunshineLixun/dev
feat: add ProFieldSelect request props
2 parents 24dfd84 + 734ff86 commit a21d02e

File tree

25 files changed

+1714
-871
lines changed

25 files changed

+1714
-871
lines changed

‎docs/.vitepress/config.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export default {
1+
import { defineConfig } from "vitepress";
2+
3+
export default defineConfig({
24
base: "/pro-components/",
35
description: "中后台重型组件",
46
themeConfig: {
@@ -68,4 +70,4 @@ export default {
6870
},
6971
],
7072
},
71-
};
73+
});

‎docs/.vitepress/theme/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import DefaultTheme from "vitepress/theme";
2+
3+
export default {
4+
...DefaultTheme,
5+
enhanceApp({ app }) {},
6+
};

‎docs/.vitepress/theme/index.ts‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎docs/components/pro-form.md‎

Lines changed: 216 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -15,93 +15,228 @@ yarn add @ant-design-vue/pro-form
1515
npm i @ant-design-vue/pro-form -S
1616
```
1717

18-
### Simple Usage
18+
### Demo
1919

20-
::: details 显示代码
21-
22-
```html
23-
<template>
24-
<QueryFilter
25-
:model="formModel"
26-
@finish="handleSubmit"
27-
@collapsed="onCollapsed"
20+
<div style="margin-top: 30px">
21+
grid开关
22+
<Switch v-model:checked="grid" />
23+
</div>
24+
<br />
25+
<div>
26+
只读
27+
<Switch v-model:checked="readonly" />
28+
</div>
29+
<br />
30+
<div>
31+
标签布局
32+
<RadioGroup v-model:value="formLayoutType">
33+
<RadioButton v-for="layout in layouts" :key="layout" :value="layout">{{ layout }}</RadioButton>
34+
</RadioGroup>
35+
</div>
36+
<br />
37+
<pro-form
38+
v-model:model="formModel"
39+
:readonly="readonly"
40+
:layout="formLayoutType"
41+
:grid="grid"
42+
:col-props="{
43+
span: 8,
44+
}"
45+
@finish="handleSubmit"
46+
>
47+
<pro-form-text
48+
name="name"
49+
label="应用名称"
50+
:field-props="{
51+
allowClear: true,
52+
placeholder: '请输入',
53+
}"
54+
required
55+
/>
56+
<pro-form-text
57+
name="name2"
58+
label="应用名称2"
59+
:field-props="{
60+
allowClear: true,
61+
placeholder: '请输入',
62+
}"
63+
required
64+
/>
65+
<pro-form-text
66+
name="name3"
67+
label="应用名称3"
68+
:field-props="{
69+
allowClear: true,
70+
placeholder: '请输入',
71+
}"
72+
required
73+
/>
74+
<pro-form-text
75+
name="name4"
76+
label="应用名称4"
77+
:field-props="{
78+
allowClear: true,
79+
placeholder: '请输入',
80+
}"
81+
required
82+
/>
83+
<pro-form-text
84+
name="name5"
85+
label="应用名称5"
86+
:field-props="{
87+
allowClear: true,
88+
placeholder: '请输入',
89+
}"
90+
required
91+
/>
92+
<pro-form-text
93+
name="name6"
94+
label="应用名称6"
95+
:col-props="{
96+
xl: 8,
97+
md: 12,
98+
}"
99+
:field-props="{
100+
allowClear: true,
101+
placeholder: '请输入',
102+
}"
103+
required
104+
/>
105+
<pro-form-text
106+
name="name79"
107+
label="应用名称7"
108+
:field-props="{
109+
allowClear: true,
110+
placeholder: '请输入',
111+
}"
112+
required
113+
/>
114+
<pro-form-password
115+
name="password"
116+
label="密码"
117+
:field-props="{
118+
allowClear: true,
119+
placeholder: '请输入',
120+
}"
121+
required
122+
/>
123+
<pro-form-select
124+
name="gender"
125+
label="性别"
126+
:options="sex"
127+
:field-props="{
128+
placeholder: '请选择',
129+
}"
130+
required
131+
>
132+
<template #option="{ value: val, label, icon }">
133+
<span role="img" :aria-label="val">{{ icon }}</span>
134+
&nbsp;&nbsp;{{ label }}
135+
</template>
136+
</pro-form-select>
137+
<pro-form-select
138+
name="girlName"
139+
label="Girl姓名"
140+
:field-props="{
141+
placeholder: '请选择',
142+
mode: 'multiple',
143+
options: girlNameoptions,
144+
}"
145+
required
28146
>
29-
<FormItem name="name" label="应用名称" required>
30-
<input v-model:value="formModel.name" placeholder="请输入" allow-clear />
31-
</FormItem>
32-
<FormItem name="creater" label="创建人" required>
33-
<input v-model:value="formModel.creater" placeholder="请输入" />
34-
</FormItem>
35-
<FormItem name="sex" label="性别" required>
36-
<select v-model:value="formModel.sex">
37-
<SelectOption v-for="item in sex" :key="item.value" :value="item.value"
38-
>{{ item.label }}</SelectOption
39-
>
40-
</select>
41-
</FormItem>
42-
<FormItem name="status" label="应用状态">
43-
<input v-model:value="formModel.status" placeholder="请输入" />
44-
</FormItem>
45-
<FormItem name="startDate" label="响应日期">
46-
<DatePicker v-model:value="formModel.startDate" placeholder="请输入" />
47-
</FormItem>
48-
<FormItem name="create" label="创建时间">
49-
<RangePicker
50-
v-model:value="formModel.create"
51-
:placeholder="['开始时间', '结束时间']"
52-
/>
53-
</FormItem>
54-
</QueryFilter>
55-
</template>
147+
<template #dropdownRender="{ menuNode: menu }">
148+
<v-nodes :vnodes="menu" />
149+
<Divider style="margin: 4px 0" />
150+
<div style="padding: 4px 8px; cursor: pointer" @mousedown="(e) => e.preventDefault()" @click="addItem">
151+
<plus-outlined />
152+
Add item
153+
</div>
154+
</template>
155+
</pro-form-select>
156+
</pro-form>
56157

57158
<script lang="ts" setup>
58-
import { ref, reactive } from "vue";
59-
import { QueryFilter } from "@ant-design-vue/pro-form";
60-
import dayjs, { type Dayjs } from "dayjs";
61-
import {
62-
FormItem,
63-
Input,
64-
Select,
65-
SelectOption,
66-
RangePicker,
67-
DatePicker,
68-
} from "ant-design-vue";
69-
70-
// main.[js|ts]
71-
import "@ant-design-vue/pro-form/dist/style.css"; // pro-form css or style.less
72-
73-
const formModel = reactive({
74-
name: "123",
75-
creater: "11",
76-
sex: "男",
77-
status: "",
78-
startDate: "",
79-
create: [
80-
dayjs("2015/01/01", "YYYY/MM/DD"),
81-
dayjs("2016/01/01", "YYYY/MM/DD"),
82-
] as [Dayjs, Dayjs],
159+
import { reactive, ref, FunctionalComponent } from 'vue';
160+
import { PlusOutlined } from '@ant-design/icons-vue';
161+
import { RadioGroup, RadioButton, Switch, Divider, type SelectProps } from 'ant-design-vue';
162+
import type { FormLayout } from 'ant-design-vue/es/form/Form';
163+
import { ProForm, ProFormText, ProFormPassword, ProFormSelect } from '../../packages/pro-form';
164+
import '../../packages/pro-form/src/style.less'
165+
import 'ant-design-vue/dist/antd.css'
166+
167+
const layouts = ['horizontal', 'vertical', 'inline'];
168+
169+
const formModel = reactive({
170+
name: '456',
171+
name2: '567',
172+
name3: 'xxx',
173+
name4: '',
174+
name5: '',
175+
name6: '',
176+
name7: '',
177+
password: '111',
178+
gender: '女',
179+
girlName: undefined,
180+
});
181+
182+
const sex = ref([
183+
{
184+
value: '男',
185+
label: '男',
186+
icon: '🇨🇳',
187+
},
188+
{
189+
value: '女',
190+
label: '女',
191+
icon: '🇺🇸',
192+
},
193+
]);
194+
195+
const girlNameoptions = ref<SelectProps['options']>([
196+
{
197+
label: 'Manager',
198+
options: [
199+
{
200+
value: 'jack',
201+
label: 'Jack',
202+
},
203+
{
204+
value: 'lucy',
205+
label: 'Lucy',
206+
},
207+
],
208+
},
209+
{
210+
label: 'Engineer',
211+
options: [
212+
{
213+
value: 'yiminghe',
214+
label: 'Yiminghe',
215+
},
216+
],
217+
},
218+
]);
219+
220+
const formLayoutType = ref<FormLayout>('horizontal');
221+
const grid = ref(true);
222+
const readonly = ref(false);
223+
224+
const handleSubmit = (value: any) => {
225+
console.log(value);
226+
};
227+
228+
const VNodes: FunctionalComponent = (_, { attrs }) => {
229+
return attrs.vnodes;
230+
};
231+
232+
let index = 0;
233+
const addItem = () => {
234+
girlNameoptions.value?.[1].options.push({
235+
value: index++,
236+
label: `Item${index++}`,
83237
});
84-
const sex = ref([
85-
{
86-
value: "男",
87-
label: "男",
88-
},
89-
{
90-
value: "女",
91-
label: "女",
92-
},
93-
]);
94-
95-
function handleSubmit(params: any) {
96-
console.log(params);
97-
}
98-
function onCollapsed(collapsed: boolean) {
99-
console.log(collapsed);
100-
}
238+
};
101239
</script>
102-
```
103-
104-
:::
105240

106241
## API
107242

‎docs/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "@vue-antd-pro-components-monorepo/docs",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"dependencies": {
7+
"ant-design-vue": "^3.2.12",
8+
"dayjs": "^1.11.5",
9+
"vue": "^3.2.39"
10+
},
11+
"devDependencies": {
12+
"gh-pages": "^4.0.0",
13+
"less": "^4.1.3",
14+
"markdown-it": "^13.0.1",
15+
"markdown-it-container": "^3.0.0",
16+
"vite": "^3.1.3",
17+
"vitepress": "1.0.0-alpha.15"
18+
},
19+
"scripts": {
20+
"docs:dev": "vitepress dev .",
21+
"docs:build": "vitepress build .",
22+
"docs:serve": "vitepress serve .",
23+
"docs:deploy": "pnpm run docs:build && gh-pages -d docs/.vitepress/dist"
24+
},
25+
"author": "",
26+
"license": "ISC"
27+
}

‎docs/tsconfig.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"resolveJsonModule": true,
7+
"allowSyntheticDefaultImports": true,
8+
"esModuleInterop": true,
9+
"forceConsistentCasingInFileNames": true,
10+
"strict": true,
11+
"noImplicitAny": false,
12+
"skipLibCheck": true,
13+
"lib": ["esnext", "dom"],
14+
"paths": {
15+
"@ant-design-vue/pro-layout": ["../packages/pro-layout/src/index.ts"],
16+
"@ant-design-vue/pro-form": ["../packages/pro-form/src/index.ts"]
17+
},
18+
"jsx": "preserve"
19+
},
20+
"include": ["**/*", ".vitepress/**/*"],
21+
"exclude": ["node_modules"]
22+
}

0 commit comments

Comments
 (0)